Design system
A design language and system to set Zenysis on the path towards building the leading open-sourced design system for international development.
Project Challenge & Solution
The Zenysis product was built without a pattern library for the majority of its life. Two years ago, a lightweight UI system was designed by a contract designer in order to fulfill a shortlist of use cases. Parts of the product were updated while some were not. Given this, there was a lot of inconsistency in the platform -- parts of the product looked as though they were from separate companies. Without a robust set of visual language elements and components and clear UX standards, engineers were confused on how to use components effectively. Given engineers had very little bandwidth and I was the only product designer, we worked to build out a design system that would allow our team to design and build faster at a much higher quality. This would set the foundation for our long-term vision of creating the leading open-sourced design system for international development.
Involvement
Design System
Visual Language
Brand Design
UI Design
Client
Zenysis
timeline
2021
teamates
Quentin - Product Manager
Quentin - Prdouct Manager
David - Senior UI Engineer
Nina - UI Engineer
Branding and Visual Language
There are two requirements to creating a successful visual language. First, the brand must reflect the aspirations and emotion of the company. Second, the visual language must be a system with patterns and standards.
brand behind the system
I lead the product team through multiple rounds of design thinking workshops on-the-ground delivery team. The delivery team are composed of user engagement and technical members who work directly with our users in the ministries of health, NGOs, and other organizations.
In the first part of the design thinking workshop, we wanted to understand the personality and the needs and expectations of our users. We used each of the participants to think of a real user who is passionate about their job and whose goals/dreams they want to help fulfill.
We discussed these adjectives and used them as a primer to critique a set of of aspirational products. We used the rose-thorn-bud methodology to annotate elements we liked, disliked, or saw as a new opportunity. We dot-voted overall compositions to further tease out top designs.
After synthesizing the results, we developed the following stack-ranked framework to underpin the brand and design language.
1. Professional
Equity, speaks to serious/intense nature of work
2. Approachable/welcoming
But not too spartan and bland
3. Modern
Position ourselves alongside the best product our users enjoy in real life
4. Focused
Highly structured, easily scannable
5. advanced/powerful
User expects a system that is reliable and functions with few to no issues
The visual language system
Equally important to branding are the standards and rules that underpin the system. Every part of the visual language follows a scale -- small font to larger emphasized font, subtle colors to loud colors, etc. Part of defining a visual language is applying that system to our current product.
The following goes through a few visual langauge examples that improve the legacy product.
Elevation
The current product does not use elevation systematically nor does it follow physical properties. If we remove every visual element other than the main containers and their elevation (ie shadows), you'll clearly see how visually unsettling the composition is.
The refreshed product uses elevation systematically. Each individual experience should feel balanced and every product should feel part of the same system.
Color
Similar to elevation, color is not used systematically in our product. The system is severely limited so designs either feel flat or lack necessary visual differentiation, or we must break the system.
Making the problem more difficult, static values and legacy variables are littered throughout. We chose a set of colors that used scales from subtle to prominent. In order to gut the system, we took inspiration from the Asana Design System team by defining our tokens with a common set of modifiers.
We applied this color scale across the product systematically. Our components, for example, properly made use of these scales to denote interactive states. You'll notice how the way color tokens are defined map fairly well to the properties of buttons. For example, the "interaction" of the color token maps to the "state" of the button (ie, default, hover, pressed, etc). In order to add additional variation to the button, we can use the "prominence" color token modifier. For example, the "secondary" and "subtle" appearance modifier for a default button uses the opacity color scale. The "interaction" modifier remains the same while the "prominence" modifier reflects the perceived loudness.
Product redesigns
Homepage
Legacy
.png)
UI changes
Redesign
Analyze
Legacy
UI changes
.png)
Redesign
Dashboard
.png)
UI changes
Legacy
.png)
Redesign