Role
Lead UX Designer
Duration
12 Weeks
Tools
Figma
Team
Brand Voice
Creative
April 2024
A Voice for Cohesive Experiences
Measured Results
40%
Design Time
30%
Faster UAT
40%
Dev Time
Currently enjoying helping users discover a new chapter in their hydration journey!
Cirkul is a customizable hydration company that offers a unique bottle and flavor cartridge system, allowing users to personalize their drinking experience with adjustable flavor intensity and a variety of flavors.
As a Lead UX Designer, I shape user experience strategy across multiple projects, ensuring designs are user-centered and aligned with business goals. I collaborate with cross-functional teams to define requirements, create prototypes, and refine designs through research, usability testing, and data-driven iterations.
*During my time at Cirkul, I worked on projects that I cannot disclose due to NDA restrictions. Please contact me for more information at UXbyAndrew@yahoo.com.
Context
Overview
Cirkul experienced rapid growth in the eCommerce space, but its design system had not kept pace. Over five years, various teams made independent design decisions, leading to inconsistency in typography, colors, grid structure, and component usage. This lack of cohesion resulted in accessibility issues, inefficiencies in design and development, and an overall disjointed user experience.
My Role
As the Lead UX Designer, my role was to spearhead the effort to unify the brand’s design elements into a structured system. I collaborated with cross-functional teams, including Creative, Brand, and Development, to define clear standards for typography, color usage, and responsive layouts. My goal was to create a scalable design system that would streamline workflows and improve the user experience.
Timeline
This project spanned several months, with multiple iterative improvements. Initial efforts focused on auditing and defining core styles, followed by collaboration with stakeholders to establish consistency. The implementation phase involved working closely with developers to integrate the new system into the live environment, ensuring alignment between design and code.
Project Brief
Cirkul’s website was originally launched by a single developer, and its extreme growth over five years left little time to refine the design details.
As the company expanded, inconsistencies in design multiplied, making it increasingly difficult to maintain a seamless and accessible user experience.
️ The Challenge: consolidating five years’ worth of fragmented design decisions into a cohesive, scalable system that improved usability, accessibility, and efficiency.
Our solution focused on standardizing typography, refining the grid system, and developing a pattern library of reusable components. This structured approach allowed us to improve communication across departments and enhance the overall user experience.
Design
Overview
To bring clarity and consistency to Cirkul's digital presence, we focused on establishing a structured design system that addressed typography, layout, and component usage. Our goal was to create a scalable and adaptable system that enhanced the user experience while streamlining workflows across teams.
Typography - We conducted an audit that revealed over 40 type styles. We then streamlined the system by defining a clear hierarchy for headlines, body text, and labels, ensuring readability and alignment with the 4-point grid.
Grid - We established clear breakpoints and transitioned from an XY grid to a more standardized Bootstrap-style grid, making responsive design more predictable and scalable.
Pattern Library - We identified high-value components such as buttons, forms, and modals, standardizing their design and interaction to maintain consistency across the site.
Design Token - We translated our design system styles into CSS tokens, allowing developers to implement standardized values for typography, colors, and spacing. This ensured consistency across projects and simplified future updates.
By addressing these core areas, we created a foundation that allowed for greater efficiency and consistency across all design and development efforts.
Standardizing Typography for Consistency
To address typography inconsistencies, we conducted a full audit and reduced the number of type styles from over 40 to a defined set of headline, body, and label styles. Open Sans was established as the brand font, and we standardized line heights for improved readability. Additionally, we aligned text styles with a 4-point grid, ensuring scalability across breakpoints and enhancing accessibility.
Establishing a Scalable Grid System
Previously, there were no defined breakpoints, and designs ignored larger screens and tablet layouts. We worked with developers to introduce a structured responsive grid system based on Bootstrap principles, ensuring consistency across devices. This approach provided a scalable framework that accommodated all screen sizes while improving the alignment between design and development.
Building a Unified Pattern Library
Beyond typography and grid, we identified key UI elements that needed standardization, including buttons, forms, and quantity selectors. We also aligned larger components such as product cards, page sections, and modals to ensure design consistency. To address icon inconsistencies, we adopted a single icon pack, reducing visual fragmentation across the site.
Creating a Single Source of Truth with Design Tokens
To maintain consistency and streamline development, we translated our design system elements into CSS tokens. This approach provided a single source of truth for typography, colors, spacing, and component states. Developers could easily reference and implement these tokens, ensuring consistency across all digital touchpoints while simplifying future updates.
Result
By the metrics
40%
Design Time
30%
Faster UAT
40%
Dev Time
After multiple iterations, we established a cohesive design system that streamlined interdepartmental collaboration, improved design efficiency, and enhanced code implementation. The new system significantly reduced inconsistencies, improved accessibility, and provided a more seamless user experience.
Takeaways
🤝 Clearer Communication & Faster Development
Defining styles with developers led to decreased development time, quicker user acceptance testing (UAT), and more efficient cross-team collaboration, reducing errors and misalignment.
🌟 Increased UX Team Productivity
With a structured design system in place, the UX team could focus on higher-level testing and design validation rather than continuously addressing minor inconsistencies, leading to a more strategic and user-focused approach.
