P






ITONICS Cloud Design System




Role
Documentation
UI/UX design
Prototyping


Team
a team of 6 people
including product manager,
developers and me


Year
2019


Context
ITONICS Cloud is a SaaS solution for innovation management that helps users to analyze data, translate it into insights. The Cloud has some pre-existed components inherited from the previous desktop version. We need unified, standardized, and reusable rules to follow for the Cloud version.



Problem & Pain Point
  •  Old desktop version components mixed with new components resulted in inconsistencies and incoherence in styles and behaviors

  •  The developers are wasting their time re-coding similar components that could have consolidated into one.









Design System
We expect a design system that should serve the following purposes:

  •  Achieve consistent user experience 
  •  Provides clarity that improves the communication between developers and designers 
  •  Allow to iterate faster: more frequent low-fi mockups iterations, and apply the design system once we reach a certain concrete design decision



Process
  •  Inventory audit, to evaluate the experience and identify issues 
  •  Create style guide, specify UX rules and component usage if there isn’t any yet
  •  Consolidate extraneous or overlapped components and patterns
  •  Document and maintain the UI library




Iventory Audit, Conducted in Google Docs




Inventory Audit
The way I group elements is based on their  purpose and type, rather than appearance. This approach is aligned with how we organize the component library. Through this purpose-directed inventory, we can then see have an overview of how elements are used in the system, what are the behaviors, and furthermore what needs to be standardized.



Establish Rules and Guidelines
After the audit, I try to capture the existed patterns or determine the best practices to follow as rules. I follow the Atomic Design (Brad Frost, 2016) approach to organize our design system. So we have folders like Atoms; Molecules; Organisms; Templates; Pages and Extra Content.






Example of UX Guideline Documentation





Deliverables
  •  Style guide and pattern library
  •  Design specifications  
  •  UI library build with Sketch that house the design files
  •  System maintainence and update






Design Specifications Example






Result: Card Component








Result: Element Detail Page 






Learnings
  •  The balance between day-to-day tasks and design system is important.
    Me and my team leader decided to setup timeline and checkpoints for the design system. This helps us to move things forward and break down the project into smaller chunks that are more manageable.

  •  Have the design system in mind.
    Always inspect what you can build for the design system when you have a design task. On the other hand, check what you already have in the system before making any new design. 

  •  A design system is a living and on-going project.
    Sometimes the insufficiency of the guidelines shows when implementing. So the updating and improving the design system are equally important as creating it.













About me      Get in Touch      ︎      ︎

© 2021 I-Chieh Pan