UI/UX Design, Discovery, Ideation, Prototype
As more and more services are getting digitized and the number of apps is exploding every day both on the web and the mobile, it's becoming more and more imperative for any software company to build a strong brand, top of the class user experience and clean user interface. It's becoming more important for any teams that involve in software development to establish an efficient process to be able to promptly react to the ever-evolving market while producing a high-quality product at the lowest efforts.
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.
Here are my assumptions, backed by my own experience, that most designers from small to mid starts are struggling with:
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:
'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.
Basic Workflow of Yugi
Carl Tucker, 26, UI/UX Designer
Eric Burton, 25, Developer
Marie Carpenter, 33, Project Manager
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:
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.
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. Font GD Shera made from Hanken Design Co. is licensed by CC BY 3.0