Innovaccer Design
Building the host for Innovaccer’s Masala Design System which acts as the source of truth for all the guidelines around the system.
date_range
3 months
TEAM
child_care
face_2
face
My Role
Lead Designer
Developer
Content Writer
Context
What sparked this project?
We were using third party CMS - Zeroheight for hosting and documenting our design system. And there were issues -
Out of sync versions - design (the zeroheight website) and dev (the storybook).
Live components - Zeroheight couldn’t render many number of stories (live components) on a single page easily. There was a lot of delay.
Lack of customization and flexibility - Some discoverability issues were there because of rigidness of the system (Zeroheight).
Out of sync versions of the design system
😤
Problem
Talking to the users
Did usability testing to figure out other problems that the users might be facing.
In order to do so, prepared some tasks that the users should perform.
The sessions provided us other insights apart from the problems that we were already aware of.
Earlier feedback from the users
🧐
The HMWs
Reframing the insights into opportunity areas
Based on the pain points that surfaced during the usability testing sessions, the team sat down for coming up with how might we statements to reframe our insights into opportunity areas.
This team exercise included designers, developers and the engineering manager from the Design System team.
Segmented the HMWs into the major themes.
Each person got to vote for 3 important areas.
The entire team sat down to come up with HMWs
🧠
Journey Mapping
Coming up with the goals
Derived goals from the most voted HMW statements for each of the actors involved - the designers, the developers and the copywriters.
Followed the Discover -> Learn -> Use journey from the design sprint from Google.
Mapped the HMWs to the relevant touch points in this journey.
Journey mapping as per the design sprint process
Lightning demos
Competitive Analysis
Looked at other design systems to see how they approach the hosting of their design, documentation and coding resources.
Took relevant screenshots and segmented them.
Lightning demos
Information architecture
Journey mapping and lightning demos provided us insights to create a rough IA.
Did iterations on how the IA can be improved in order to be able to solve the problems that we discovered earlier in the process.
Based on the journey mapping and lightning demos came up with the IA
Prototype
Thanks to our design system, we were able to quickly iterate and build a prototype. (As one of our designers said - reusability and consistency runs in our blood).
Iterations of left navigation bar
Usability testing
Prepared a script containing questions and tasks that we asked the users to perform.
These questions were framed on the basis of the doubts/questions that we had received from the users in the past.
Script for the usability testing
Insights
Recorded the sessions and generated the transcripts using Dovetail.
Overall did 6 sessions - involving users who were beginners to the users who were more experienced.
Some of the insights -
Mobile/Web toggle on the components page did not have great visibility.
Users prefer looking at images to actually reading the guideline. They also prefer guidelines which are concise and not long paragraphs of text.
Users also rely on search to find out about certain usage guideline. Search was the area where we did not put much efforts earlier.
Jump list is helpful but was not working as intended because of a bug.
Recordings and insights from usability testing
Challenges
A series of challenges and overcoming them
Content migration - took way too long to finish migrating the content from Zeroheight. The estimation of 1 month took ~ 4 months.
No CMS - had to write the markdown in VS code for the content as we did not go for a CMS.
Documentation - going back and forth in deciding the documentation structure.
Migrating the content using VS Code
😤
Impact
The DAU, WAU and MAU
Some numbers from Google Analytics
Takeaways
Validate your assumptions as soon as possible.
This will save a lot of back and forth.
Going the extra mile.
If you take accountability, you have to go the extra mile to get the work done.
