Case Study
Building up Invoy Design System
Overview
2021-2022
My Role
Design research, UX/UI design, Graphic design, Animation, Accessibility design
Team
Creative director, Team of 4 engineers
2023
Intro
Invoy refreshed with a new pack of brand design at 2021, but the experience on different platforms does not have a consistent look and feel. So Invoy design team needs to build up a joint design system that are align with the new branding and can solve design needs across all mediums. By collaborating with product, engineering, and customer success team, I directly contributed to the design system, including owning the development of iconography library, adopting accessibility into the system and so.
For better User Experience, Please review more content on Desktop.

🖥️
How to improve the efficiency of cross-team communication and product development and design when dealing with new branding language?
Build up a joint design & develop system with flexible and scalable components / modules library, so that it can serve for our current products and has the potential to evolve over time.
Challenge
Goals
Reference from: Invoy New Branding Book -- Primary Color System
Discover
The problem? No consistent design language across different platforms.
Product Audit
I joined when the company was changing their business model and expanding their user base. The creative director had been working for two years on a new branding book that would express the company's updated brand values. In Q4 2021, they decided it’s time to start applying this new design language across all platforms.
Discover
The problem? No consistent design language across different platforms.
Product Audit

I joined when the company was changing their business model and expanding their user base. The creative director had been working for two years on a new branding book that would express the company's updated brand values. In Q4 2021, they decided it’s time to start applying this new design language across all platforms.
Product Audit

With each platform has it’s own standard of design language, it makes our product and experience bizarre and all the experiences seem like a Frankenstein for end users, as well as lead to increased communication costs and development time between designers and engineers when making product updates or developing new products. This can be expensive and inefficient from a business value and company investment perspective.
Define design components for Invoy app 6.1
Part of Information Architecture of Invoy App & components

As we embarked on redesigning the Invoy 6.1 app with a new design language already defined in terms of color and fonts by the creative director, we faced a unique challenge. The urgency to apply this new language in the app led us to develop the design system concurrently with the app redesign. This presented us with a classic 'chicken or egg' dilemma. To navigate this, I initiated the process by conducting a thorough audit of the current Invoy app. This helped us understand the existing components and guided us in strategically categorizing them for the new design system.
Define and Design
Design from atoms, molecules, to pages.

Leveraging the design language guidelines, I crafted multiple iterations for the new Invoy app. Once we established the voice, tone, and key page designs, I began standardizing the necessary components for Invoy App 6.1. This ranged from atomic elements like buttons, labels, and progress bars to modules such as dial charts and activity cards, and extended to layouts for frequently used pages including the introduction, food recommendation, and questionnaire pages.
Develop and Ideation
Integrated development elements into Figma, boosting cross-team efficiency.

Reflecting on the initial challenge – enhancing cross-team efficiency in development and design amidst a new branding language – I recognized the crucial role of developers' needs. Collaborating with a front-end designer, we enriched the design system in Figma with tokens, CSS classes, and code snippets. This collaboration fostered mutual learning and improved our communication, streamlining the entire design-to-development process.
Prototype
How to bridge the gap between development and design?

🙌 Wins:
1. Expedited Prototyping
2. ProcessEnhanced Team Efficiency
3. Flexibility in Design Adaptation
4. Improved User Experience
5. Consistent App Design

Leveraging our comprehensive design system at Invoy, we expedited the prototyping process with real-time updates and enhanced team efficiency. The system's flexibility allowed easy adaptation to evolving needs, focusing on improved navigation and interaction for an intuitive user experience. Despite minimal architectural changes, it ensured a consistent app design aligned with our new branding, maintaining user familiarity and ease of use.
Iconography
To keep visual consistence

Given that the spot illustrations were already created in a realistic flat style with crayon strokes, I adopted this technique for all the app's icons to achieve visual uniformity. Since these icons often occupy over 25% of a page, I ensured each was both easily recognizable and detailed enough to clearly convey its intended message.
Accessibility
To keep visual consistence.

After analyzing user feedback, I found most users fell outside our expected age range, preferred Android devices, and faced usability issues. To address discomfort using the app at night, I implemented a dark theme mode based on Material Design guidelines, improving comfort in low-light conditions and enhancing accessibility.
In-app animation
To support users uncertain about using our physical products correctly, we integrated intuitive in-app animations. These animations provide clear, step-by-step guidance on the proper usage of our products, thereby improving comprehension and minimizing the likelihood of confusion or incorrect usage.
Outcome and Learnings
Embarking on Invoy's design system journey, I constantly evaluated each component against our guidelines, striking a balance between adherence and necessary flexibility. This process wasn’t just about following rules; it was about ensuring scalability and versatility, especially for key elements like cards. This experience taught me that a design system is a living, evolving entity, crucial for fostering efficient team collaboration and workflow integration.

As the system aligned across Figma and code, it transformed our work process, enhancing team efficiency and communication. This project wasn't just a task; it was a narrative of growth, innovation, and finding harmony in a dynamic design environment.
Next Project
Dreamix - Reimagine the Dreamforce Experience