BUILDING A DESIGN SYSTEM
OVERVIEW
Design and implementation of a design system for scalability across all Robot UIs to support the growing number of partners and products.
PROBLEM
Previously the Robot UIs had an inconsistent visual language including different design patterns, naming conventions/text, and components across all products. This led to inefficiencies in development work, visual design discrepancies, and lack of clarity for our end users. Working with limited design resources, we needed to support scaling, have consistent design and a consistent user experience across all products.
ROLE
Art Direction, Illustration, UX Design
PROCESS
The UX team did a heuristic evaluation of the Robot UI and an audit of graphics, language, and components. What we found was a variety of inconsistencies in graphic styles, language and type sizes. The natural solution was to create a design system or styles for the Robot UI.
We had the opportunity to observe numerous amounts of operators in dozens of stores. We then applied those observations to redesigning the interfaces. We created new personas that better reflect the abilities, motivation, and learning levels of the operators. From there, we reviewed our UI by applying best practices for this user group.
Next, I researched design systems and was inspired by the Department of Transportation standards that provide clear, concise information at each decision point. The icon based design system uses pictograms to convey its meaning through its pictorial resemblance to a physical object. This same style has been perfected and proven out over the last 16 Olympics to achieve true internationalization.
Department of Transportation and Olympics Design System Icons examples.
Design decisions were made based on utility and usability. Simple iconography for internationalization and simplified visual design so our operators and users aren’t intimidated by the technology.
Adding personality
Animations enhance the user experience when incorporated at the right time and the right place. Not only do these UI animations give delight, they have a purpose; they are meaningful, and functional.
Below are examples of UI animations created with After Effects and Lottie.
Finally, creating a design system that would scale and be consistent across the numerous partners and products.
Design System Principles:
Simplified icons
Meaningful color use
Unified design language across products
Scalable and consistent
DEVELOPMENT
Established and maintained a design system including the creation of all the visual assets: icons, components, animations, and photography.
IMPLEMENTATION
Created concepts, prototypes, and closely worked with developers to drive polished designs to final implementation, enabling cost reduction of product development.
