.png){kind=logo}
The team was facing a significant challenge in managing the design and development process. Struggling with inefficiencies, wasting extensive time on duplicating efforts, and inconsistent design experiences across the website. A solution was needed to standardize and streamline the approach.
Site Audit
UX/UI Design
Documentation
Quality Assurance
As we scaled to meet growing demands, our design and development teams faced challenges leading to inconsistencies in the design and user experience of the website, impacting user satisfaction and brand perception.
Create a centralized and comprehensive design system with detailed documentation on process, design language, guidelines, and UI patterns to better align our design and development teams.
Increase speed-to-market: A shared resource and process can reduce miscommunication and streamline project delivery
Adopt a user-centered approach: The team can shift to a proactive mindset and focus on research, experimentation and collaboration
Improve brand perception: A consistent web experience can boost brand trust and enhance user satisfaction
I began by conducting a thorough audit of existing designs and took inventory of all visual attributes and UI elements. Using CSS Stats, a free tool that analyzes a site’s style sheets. With this we were able to diagnose our website's inconsistencies.
unique colors
total background colors
unique font sizes
unique font families
.png)
In order to strengthen the design system I implemented a grid layout to enhance consistency and uniformity. Determining 3 breakpoints to address the common device sizes to create fully responsive designs.
Using the atomic design philosophy, I defined a clear design hierarchy and determined which components to keep, reject, combine, standardize, and identify gaps.
Elements: The foundational building blocks that can’t be broken down any further. This includes buttons, inputs, icons, fonts, and more
Modules: A group of elements assembled to form simple UI components, such as forms, content cards, testimonials, and more
Sections: Complex components that can form entire landing pages when combined with other sections.
It was important that the components were built in a way that enhanced design efficiency and saved the design team time when creating designs, making updates, and onboarding new designers. Leveraging features in Figma, including variants, properties, and booleans, we created versatile components that can be customized easily to meet a wide range of design requirements.
In addition to standardizing our web components, we refreshed the look and feel of the brand. With the help and support of the brand team we implemented a new typography style, color scheme, and visual design.
An in depth documentation process was completed to provide clear, specific guidelines for all design components. We also had an extensive QA process with the development team to ensure proper design to development transition.
To ensure the design system worked as expected we redesigned a set of pages to ensure the new components functioned properly. Comprehensive testing and validation were conducted to ensure accessibility, load speed, and file size were optimized efficiently.
.png)
Once we started transitioning to the new CMS platform some design components had to be revised to accommodate the system constraints.
After implementation, we saw significant improvements in the design team’s productivity and efficiency. Additionally, the development hand-off process had improved, reducing meetings and improving accuracy.
Due to the high volume of pages in the site, migration and redesigning pages are still ongoing. In time we hope to gain a clear measurement of success in terms of site speed, performance, and usability.
Establish and enforce a process for building and documenting new components, determining if it needs to be added to the design system, and how to properly communicate updates to the design and development teams.
Circulate the design system with the border team. Encouraging other
teams to adopt and contribute to the system to create more alignment across all Zoom web entities.
