Overview (cont'd)

That's where Design System comes in. It has been the top topic among not just designers but also business owners and stakeholders for the last couple years and there's why: it provides clear guidelines to make the products more accessible, consistent, efficient and distinctive. But making a design system from scratch takes a lot of effort and time. For small to mid-sized startups whose resources are very limited and timelines are very tight, it's not easy for them to afford it.

Current Domain of Designing User Interface

Here are my assumptions, backed by my own experience, that most designers from small to mid starts are struggling with:

• Designers build user interfaces for the application from scratch and if they can afford, they attempt to build the library of UIs/components but it often gets obsolete or fragmented as the app scales.
  
• Current design software doesn't assume anything, so designers should tell the software which is which every time by naming components manually and properly categorize them.
  
• Designers should keep the conventional naming structure and educate all team members to follow it.
• It's difficult to have all team members and stakeholders to be on the same page on what to use, how should one look like and where to use.
• Managers/stakeholders often don't have a clear idea as to how managing component libraries is hard, they constantly ask designers to change which would require them to take time to update everywhere.
• Finding and applying components from the library feels so manual and not intuitive.

What if there's an app that allows users to create UIs from the existing library and lets them customize to fit their needs and apply to their design easily and intuitively?

This is where my envision to design Yugi, an app that generates a full set of the design system has been born with these two missions:

1. Lower the barrier for designers or any team members to get into a design system by making it and maintaining it as easy and efficient as possible and
2. Educate owners and stakeholders about it, making them a great supporter of the system.

Yugi (유기) -

'Organism' in Korean:
an individual animal, plant, or single-celled life form.

If we consider the digital product as the living being - continually evolving, reacting to the human interaction and giving feedbacks - an individual element that collectively exists with other elements to function as a whole would be an organism. A button, text field, dropdown, icons, and menu would all be an individual life form in which micro-interaction occurs in it. This would perfectly interpret the intention of the design system and fit as the name of the product that builds it. 

Workflow

Basic Workflow of Yugi

Designer

Carl Tucker, 26, UI/UX Designer

Job Responsibility

• Creating UIs for the web and the mobile applications,
• Creating and maintaining design library,
• Rapid Prototyping
  

Workflow

1. In the morning, Carl checks the design collaboration tool to check feedbacks on the latest designs.
   
2. He finds out that PM wants to update the button to make it more legible.
   
3. He goes to Yugi app and updates the button and sync it to the design software.
   
4. As soon as the element gets synced, it automatically updates all design files.
   
5. PM receives the notification and she approves the change.

Developer

Eric Burton, 25, Developer

Job Responsibility

• Deploying code
• Managing code base
• Managing code doc

Workflow

1. In the morning, Eric receives the notification that the element has been updated and approved on Yugi.
   
2. He goes to Yugi and checks the element's specification that is displayed on the right pane of the screen.
   
3. Tyler applies the change to the codebase and pushes it to the app.

PM

Marie Carpenter, 33, Project Manager

Job Responsibility

• Overseeing design
• Project management
• Defining product roadmap

Workflow

1. Marie reviews the design and asks a designer to change the color of the button background.
   
2. She receives the notification that it's been updated on Yugi.
   
3. She goes to Yugi and she is informed that the updated color of the button doesn't satisfy WCAG 2 Contrast and Color Requirement.
   
4. She adds a comment on Yugi, asking the designer to change the background color again to satisfy the contrast requirement.
   
5. She receives the notification that it's been updated.
   
6. She checks the updated element and approves it.

Screens

Yugi has two main areas: Components and Design System.

Components View: This is where designers spend most of the time adding and customizing UI components.

Design System: This is an area that aggregates all components added in the 'Components' area and arranges them to create a design system. This area is synced to the cloud and shared by all team members and stakeholders. 

Side-Pane: Side drawer is used to list all components that users can add and when a menu is clicked, it extends to reveal the simplified image of a component to provide an idea what use is expecting.

The video illustrates some of the core interactions of the app: 

1. Adding note
2. Navigate button states to edit
3. Previewing components
4. Hovering over the component to check size specification

Editing Example - Typography: User can add as many typographic styles as needed and allows to choose a different set of text to suit their design system. 

Editing Example - Modal: User adjusts paddings, typography, CTA and more to suit their intention.

Collaborating: Going to 'Comments' view allows team members to collaborate and share feedbacks so that users don't need to leave the app. 

Flagging: Yugi flags when the applied design is against the recommended or required design standards, so designers and PMs can be educated and make sure all design elements are as accessible as possible.

Conclusion

Although this project was born out of an attempt to scratch my own itch, having more real data and insights from designers out there would help me prioritize and streamline features better to lower the efforts for MVP release. For example, having a comment section in Yugi might not be needed because otherwise, designers might end up having to check feedbacks/comments on both places, design software (like Invision) and Yugi. 

But working on a project like this has been a huge joy in that I've carried a strong empathy throughout every detail of design and that I've had a belief that such software like Yugi would really benefit not only individuals like myself but also the team to be more efficient and productive. This project has been a visualization and materialization of what I've been dreaming. However this will be evolved from here, I hope that the my envision to bring all designers and team members into one shared understanding of the importance of every each design element that interacts with users find its way home and make a positive impact on their lives.

© 2019-2020 by Kristian Kim.

Links

Dribbble    Linkedin    Twitter

Contact

hello@kristiankim.com