As the Senior UI/UX Design Lead at Avenue One, I led the development of Phase One of the Avenue One Design System.
This case study outlines the research, design, and implementation of our design system to ensure a consistent and cohesive user experience across all Avenue One products.
Project Name: Doors Design System Phase 1
Role: Senior Design Lead
Duration: 6 months
My Role:
I joined Avenue One in May 2023 as their Second in-house designer to work directly with the Head of Product on a complete platform redesign. One of the key tasks was setting up and managing a new Design System. I took the responsibility of creating Avenue One’s design system in phase 1.
Scope and considerations
Working as a design lead meant I had limited time to spend developing the Design System alongside other rapid UX work. The Design System had to scale fast, as I was discovering new use cases and constantly rethinking and expanding the library, so I had to approach this challenge strategically.
Working with the Head of Product and Front-End Engineers, I established a set of short-term and long-term priorities. Rapid scalability and modularity were some of the guiding principles, working towards a tight deadline for the launch of the Design System Phase 1. In practice, this often meant favouring reusable components and a templated approach to layouts, where possible.
Design System Strategy
Understanding Objectives:
- Research & Discovery: I conducted extensive research on Avenue One’s existing design principles, user base, and current design challenges. Before delving into the design process, I made sure to clarify my personal brand identity, defining the color palette, typography, and tone of voice. This step was crucial to maintain consistency throughout the project.
- Stakeholder Alignment: I gathered insights and requirements from various stakeholders, including designers, developers, product managers, and accessibility experts.
- Define Goals: I clearly outlined the objectives of the design system, emphasizing the importance of accessibility in fostering an inclusive user experience.
Design System Creation:
- Components Inventory: I conducted an audit of existing design assets, including UI components, color schemes, typography, and interaction patterns.
- Accessibility Guidelines: I established comprehensive guidelines adhering to WCAG (Web Content Accessibility Guidelines) standards, encompassing color contrast ratios, keyboard navigation, screen reader compatibility, etc.
- Component Library: I developed a centralized library of accessible UI components considering various disabilities such as visual, auditory, motor, and cognitive impairments.
- Testing & Validation: I implemented rigorous testing methodologies, including automated tools and manual testing by individuals with diverse abilities, to ensure compliance with accessibility standards.
Laying the foundations
Using Atomic Design Principles for Design System
I embraced Brad Frost’s Atomic Design principles, which include:
Atoms: Basic UI elements like buttons, typography styles, and form inputs.
Molecules: Small, reusable components composed of atoms, e.g., a card with an image and a title.
Organisms: Complex components assembled from molecules, such as a project showcase section.
Templates: Page-level structures that define the layout.
Pages: Instances of templates with real content.
Avenue One Design System
Atomic Design Library
I created a Figma design library to organize and maintain the atomic elements of the design system. This included defining design tokens for colors, typography, spacing, and component states (e.g., hover and focus).
Roadmap
Component Design
I designed individual components in Figma for each atomic level, ensuring they were reusable and followed the defined brand guidelines.
Master Components (Base component)
I have used the concept of Base/Master components in a design system to provide essential consistency and efficiency in design and development, ensuring a cohesive user experience and facilitating scalability and ease of maintenance while upholding brand consistency and accessibility standards.
Component variants
I efficiently utilized component variants in Figma to streamline design consistency and maintenance, managing multiple versions of a component within a single master component, thus enhancing the overall design process.
Slot Components
I leveraged slot components in Figma, known as “Components with Overrides,” to create adaptable and customizable design elements that support dynamic content insertion. This approach improved the efficiency and flexibility of my design system, allowing for the easy reuse of components with diverse content and styles.
Design Tokens
I established a design tokens system in Figma to maintain consistency across the design. This system allowed for easy updates and ensured that any design changes would propagate seamlessly through the project.
Work Management
I used Jira to manage design system work, which helped streamline project organization, track tasks, and collaborate effectively.
Implementation & Documentation:
- Integration Strategy: Collaborate with development teams to seamlessly integrate the design system into Avenue One’s products, ensuring proper adoption and utilization. We developed a Storybook for our design system library, combining component showcases with comprehensive documentation. This interactive platform allows our team to access and understand components and design guidelines, promoting consistency and collaborative efficiency in our design projects.
I ensured that the design system was responsive by utilizing CSS Grid and Flexbox for layout management. Media queries were implemented to adapt to various screen sizes and devices.
- Documentation: Create detailed documentation encompassing design principles, usage guidelines, accessibility best practices, and code snippets to facilitate easy adoption and maintenance.
- Training & Support: Conduct workshops and training sessions to educate teams about the significance of accessibility in design and development.
Ongoing Maintenance & Improvement:
- Feedback Loops: I establish mechanisms for continuously collecting feedback from the dev team users and internal teams to improve the design system.
- Version Control & Updates: I implement version control and release cycles to manage updates and enhancements systematically.
- Evolutionary Approach: I continuously evolve the design system by incorporating new accessibility standards, emerging technologies, and user needs.
UI shots with the use of the A1 design system
Success Metrics, Adoption & Evaluation:
Results
The design system for my portfolio website based on the Atomic Design approach yielded several benefits:
Consistency: The design system ensured a consistent look and feel throughout the website, reinforcing my personal brand identity.
Efficiency: The reusable components and design tokens streamlined development, saving time and effort in the long run.
Scalability: As I added new projects to my portfolio, it was easy to integrate them into the existing design system, maintaining a cohesive user experience.
Reduced Development Cost:
Implementing a design system significantly reduces development costs by streamlining and standardizing design elements, resulting in faster, more efficient development processes.