A design system is a co-visual language for designers and engineers, and these days, it has become much common that it can be easily created and used by anyone. However, the design system still has major hurdles. The point is that the more components and patterns are included in the design system, the more complex it becomes. This is where the project has begun. To create an assistant in which AI learns numerous design elements over and over instead of a human, and automatically recommends the rules of the design system on the designer’s screen like a spell checker.
About
Technology for the marginalized
Datumo provides high quality data for smarter AI. As part of Datumo's Data Sponsorship Program, Datumo cooperated with a study group of Naver and Line designers within Naver in building the following dataset.
The team started out as a study group of Naver and Line designers within Naver. The group consists of professionals in UX design and Design system(Library), and have been focusing on various ‘1qwH’ technology that could solve the problems designers have been facing during the process of developing LINE and other global designs and products. As part of the study, the group made an attempt of applying object detection to designing, and distinct potentials were observed via prototyping. Confident with the possibility of improving the design industry with appropriate open source datasets, the team applied for Datumo’s “2021 Data Sponsorship Program”. The team is continuing their studies on applying machine learning to designing, and aims to publish interesting results soon.
Testimonial
“The most difficult parts in object detection project was data collecting and labeling. AI performance depends more on quality than quantity of data. In that sense, we were extremely fortunate to meet Datumo through the data sponsorship program. Datumo did not simply provide a crowd-sourcing platform. They started out by passionately discussing with our researchers to systematically build user guidelines. We knew from our past experiences of uploading PDF guidelines on other platforms, that even coming up with the outline for the guidelines were difficult for inexperienced researchers. However, we were able to write quality guidelines using Datumo’s project managers’ tips, which led to efficient labeling process”
Dataset specification
Due to copyright issues, only sample data will be shared.
Publishing of the full dataset is to be announced.
Data labeling of total 11,999 images
50,000+ bbox
Process of annotation
Label bounding boxes according to thirteen UI categories from iOS mobile application screenshots
Write user guidelines on each UI category
Extract common characteristics of UI from different mobile applications, via PoC ex) Most floating buttons have shadows, are round-shaped, and are located on the bottom of the screen
Separate the categories with more edge cases from those with less, for higher accuracy
Final inspection via LabelMe
Post-processing of data using codes
Data Collection
Project started from a study group of Naver and Line Plus designers
Aim to develop an AI tool for designers
Aim to build an AI model trained with bounding boxes drawn around the UI elements on iOS
Datumo was responsible for drawing bounding boxes around thirteen UI elements in provided raw data(mobile iOS screenshots)
Data were collected and labeled using Cash Mission, Datumo's crowd-sourcing platform.
Screenshot of the guidelines on drawing bounding boxes around UI elements_ Cashmission(web ver.)
Reusers are allowed to distribute, remix, adapt, and build upon the material in any medium or format, even commercially, so long as attribution is given to the creator. If you remix, adapt, or build upon the material, you must license the modified material under identical terms.
