CHEF iQ Design System & UI Library
The design system for CHEF iQ was created with scalability as our prime directive. Working closely with the Software team, we looked at our design elements from the ground up to create a scalable, responsive, and adaptive system of component-based designs that ultimately created a more cohesive digital product and experience.
Project Scope: Create a scalable, component-based design and system for the CHEF iQ app, while maintaining the core structure of the original features wherever possible.
Role: UX/UI Designer
Collaborators:
Design Collaborators: Rachel Kamelhar, Tamer Koseli
Software Collaborators: Rene Midouin, Man Hong Lee, Joseph Kim
Project Manager: Dani Zhu
Atomic Structure
We applied Brad Frost’s atomic design methodology as a way of building more deliberate hierarchies and relationships between elements. Starting at the level of atoms (semantic color, grid, typography, icon and illustration sizes, and elevations), we worked our way up through molecules, organisms, and templates.
Atoms
Molecules, organisms, and templates
Challenges
A considerable portion of our efforts in developing a Design System involved evangelizing and adopting various tools and processes for more effective communication across teams.
Improvements
The adoption of tools like Storybook, Zeplin, and InVision allowed us to streamline the feedback cycles across Design and Dev teams, and to more effectively document our design decisions and solutions. This not only allowed us to rebuild our app in a more structurally sound and scalable manner, but also lent us more flexibility to tweak or edit our designs closer to implementation.
Symbols: State and Content Variations
CHEF iQ, Continued
Soon after launch, we refactored and updated the app to a more deliberate and consistent design. One that would bring a more cohesive experience to our users.
After establishing a baseline for a Design System and components library with the app, we set out to do the same for the flagship product’s on-unit display.