CHANI - Design system
03
chani
2024
chaNI: An astrology app for self-discovery, mindfulness, and healing
CHANI is an astrology app designed to make astrology both accessible and useful. the CHANI app combines ancient astrological wisdom with meditation and mindfulness to help users foster their relationship with the sky and support their wellbeing.
Client:
chani
Role:
Product design
design systems
Timeline:
4 sprints
With:
engineering dept.
Fig. 01 - App of the day!
my role
When I first joined CHANI, as a Product Designer, I inherited an under-built and under-documented Figma file that failed to translate to the needs of our engineering department. By the time I left, I had established documentation and governance on the design side to evolve the system, and had established a robust collaboration process on the engineering side that vastly improved communication around design hand-off and build.
Fig. 02 - App Video Walkthrough
the problem
Soon after I was onboarded to the CHANI team, a few major issues started to emerge. The deadline for the Android launch of the CHANI app was fast approaching and the engineering team and I were trying to find common ground within our design and handoff process. One of the major problems we were facing was that a lot of wireframes, features, and components had no unifying philosophy or design principles applied to them. Looking at problem at hand I knew I had to create a design system that was simple, scalable, and understandable by both designers and developers
communication issues
One of the main problems we ran into as a team, was how much time was spent locating and pinpointing exact designs. Often files were hard to find, or wireframes were simply missing. Lengthy meetings via zoom were held to facilitate collaboration and consensus. This effectively slowed down both the design and engineering process, which was stressful with such a big deadline approaching.
Fig. 03 - Example slack communication
Fig. 04 - Uneven spacing and padding
the audit
One of the main pain points I encountered designing for the CHANI app was understanding how to address the differences between the previous designs and the live application. I did a quick wireframe audit to pinpoint inconsistencies. I discovered that not only were the assets widely different, there were many variants of buttons, badges, and other components, and that there was no consistency in how we spaced components or applied padding. We were also missing wireframes for the vast majority of the app. Our engineering team had been building the missing screens themselves!
Key Takeaways
Implement a sizing scale that could be applied throughout the app
Create a typography scale that differentiated between header and body text
Pair down button styles, and assign use cases for each
Create card components and other elements that were resusable for visual consistency across the brand
Build wireframes for all missing screens.
The process
Once the audit had been conducted, the real work began. I knew we had to incorporate Atomic Design principles to help scale our designs. I also enlisted the help of our staff engineer, Andy, to collaborate with me on the design system. With his help, we made sure to includ important missing elements, like spacing standards, color hex codes, and button variants. This was also an effective way for both of us to get educated on how we think and communicate between both teams.
Solution 1: a design system
Prior to laying the foundation for the new design system, I took the time to study a few existing design systems and how companies were building and organizing them. I decided to use the Atomic Design approach. I also focused my efforts on having accessibility as a pillar of my design system. I took into consideration the OS and Material Design guidelines to made sure everything was on point.
Fig. 05 - Figma Styles
Fig. 06 - App wireframes by release updates
One of the other key issues was there was no one place to reference the CHANI app wireframes as we added new features and updated old ones. To account for this I built a figma file, separate from our design system that housed all iterations of app wireframes. This file served a reference point for many of the CHANI company departments, like marketing, content, and engineering as well.
I made sure to keep this file meticulously up to date with all of our new releases.
solution 3: education & Collaboration
As the Product Designer, I put in a lot of time and effort to work closely with the our engineering team. The design system was built with them and by listening to their needs. I presented walkthroughs on how to access and interact with our design system via Figma to help facilitate smoother hand-offs.
To further solidify strong collaboration, I took the initiative to join the sprint schedule our engineering team followed. Once I joined their sprint process, our ability to touch base and discuss design changes became ten times more effective.
Fig. 07 - Swipe to see CHANI Design System Atoms
The results
The design system proved to be a big success. My engineering team gave me some insights into how it helped their work process:
🙌 Wins:
Less time spent on coding new components
Handoff was a lot more efficient (less explanation needed to describe elements)
Less back and forth during QA
Coded design was a lot more consistent
Access to consistent heading, body, spacing and color styles cut down coding time in half.
Significantly cut down the time it took to launch our Android app
Fig. 08 - Swipe to see the CHANI App
The conclusion
As a Product Designer, it's important to not only keep your users in mind, but also those you work with. If our work is to make the user experiences of our products more efficient, than it stands to reason that a designer's core ethos should also include efficiency in our work process. Implementing a design system at CHANI helped with just that, and in the process built a strong foundation of trust and respect between the engineering team and I.
Moving forward, I would love to implement a survey on how the team interacts the design system on a day to day, and how that has increased their work speed, productivity and help identify areas of improvement.