Description
Role
Date
Design system evolution: Homepage Redesign
Product Designer
July 2023
The problem
As Jarvis, our design system matures and gains adoption across teams, we faced a challenge in effectively communicating its purpose and functionality through our existing homepage. The lack of visual appeal and intuitive navigation hindered seamless integration and hindered third-party vendors' understanding of our design system.
The goal
To redesign Jarvis was necessary to accommodate the increasing demands and ensure easy accessibility to vital resources, thereby enhancing collaboration and fostering a comprehensive understanding of our design system.
Before - Jarvis Homepage
After - Jarvis Homepage
Research and User Testing 🧠
User Testing
After diving deep into our competitive analysis, we were pumped to incorporate the best elements we found into Jarvis. We used Figma to create low to medium-fidelity wireframes that captured the essence of our vision.
We generated three versions of low to medium-fidelity wireframes, exploring various iterations of the homepage's potential visual designs
First
Explored a few mockups our team could use for user testing
We created one wireframe (picture on the right) that became our testing ground, where we gathered valuable feedback from users and fine-tuned the design
Second
User Interviews
We conducted user interviews with three primary user groups - designers, developers, and product managers. Our primary goal was to evaluate the design system homepage’s clarity by assessing whether users could easily identify the page they were on and recognize it as a design system’s central hub.
We delved into users’ perspectives on the relevance of the existing information, aiming to understand what they found valuable and any aspects that fell short of their expectations. We also elicited feedback on specific information missing from the homepage and gathered suggestions for additional elements that users would like to see for a more comprehensive experience.
Results from the user interviews:
“I wish there was a role for product managers too because we tend to make decisions based on our components and new product managers who come into the company can easily adapt to the design system”
”
“As a developer, I would like to see new releases like previous releases or version control because most releases are dev related”
”
“My team always has an icon request and the forms are never easy to find, a section where we can send in our request would be great”
”
Competitive Analysis
To gain insights and inspiration for our redesign for Jarvis, we conducted a comprehensive competitive analysis of mature design systems in the industry. By evaluating the homepage designs of other leading companies, we pointed out common trends, best practices, and innovative approaches they’ve incorporated. This analysis guided our decision-making process, enabling us to incorporate certain elements and adapt them to suit our unique needs.
The team created a dump to review all current leading design systems. From that, we came up with a list of would-love and must-dos to help prioritize needs when creating our wireframes for user testing.
Designing 🎨
⭐ Before diving into the design, there were a few constraints:
must use Roger’s branding colour and typography
must adhere to Roger's design system, requiring the use of our internal components and icons, considering budget constraints.
cannot change the side navigation bar
Leading users to their roles
We discovered that providing separate sections for designers and developers on the homepage was crucial in helping them navigate and get started with the design system effectively.
Through the user testing, we found that product managers were feeling lost within our design system website due to the absence of a dedicated "Getting Started" link tailored to their needs. We recognized the importance of incorporating a dedicated link for product managers to ensure their seamless integration and understanding within our design system ecosystem.
Added a portal for product managers - before it was only for designers and developers.
Easily accessible resources to empower and educate
We made sure Jarvis provided valuable information. Based on the findings, we made icons, components, development new releases, and content guidelines easily accessible sections, catering to the most frequently sought-after resources within our design system.
Incorporating a discover section to facilitate easier access to the most frequently used sections within our design system.
We enhanced the homepage with compelling value propositions to emphasize the design system's importance for third-party vendors, agencies, and internal stakeholders, promoting broader adoption and understanding of its significance in ensuring consistent and high-quality digital products.
Establishing trust and confidence
Recognizing the desire of our stakeholders to become more involved, we implemented a contribution section on our homepage. This section includes a user-friendly form where users can:
suggest new ideas
request icons
report bugs
ask questions
By providing this avenue for engagement, we aimed to establish trust and confidence in our design system, demonstrating our commitment to catering to the needs and feedback of our users.
Conclusion
Measuring the impact of a design system can be challenging due to the lack of defined metrics. However, the adoption of our design system by all six lines of business and their utilization of design system components during the design process was a clear indicator of its success.
The redesign of Jarvis played a pivotal role in fostering collaboration and breaking down silos, as teams embraced the design system as a unified framework. This transformation provided a strong foundation for governance and brought a sense of cohesion and consistency to our design practices.