Swirl Your Wine
Building the foundations for a scalable mobile experience.
Building the foundations for a scalable mobile experience.
Building the foundations for a scalable mobile experience.
Client
Swirl Your Wine
Team
3 Developers
1 Data Analyst
1 Product Designer
1 Product Manager
Role
Product Designer - Design System Specialist
Industries
Mobile App, Food & Beverage
Date
July-Oct 2025
OVERVIEW
Introducing Swirl: Personalised Wine Discovery at Your Fingertips
Swirl is a mobile wine discovery app designed to help users find wines they truly enjoy through personalised recommendations, label scanning, and expert insights.
Swirl is a mobile wine discovery app designed to help users find wines they truly enjoy through personalised recommendations, label scanning, and expert insights.
I joined the team as a Product Designer - Design System Specialist, tasked with creating Swirl’s first design system from scratch. As the sole designer in a small cross-functional team, I established the visual and structural foundations that brought consistency, accessibility, and scalability to the product.
I joined the team as a Product Designer - Design System Specialist, tasked with creating Swirl’s first design system from scratch. As the sole designer in a small cross-functional team, I established the visual and structural foundations that brought consistency, accessibility, and scalability to the product.
CHALLENGE
Fragmented Design, Inconsistent Experience, and Limited Scalability
Before my involvement, Swirl lacked an established design system or file organisation. The app exhibited inconsistencies in typography, spacing, and colour, and did not comply with accessibility standards. Without reusable components or documentation, team collaboration was inefficient and error-prone.
Before my involvement, Swirl lacked an established design system or file organisation. The app exhibited inconsistencies in typography, spacing, and colour, and did not comply with accessibility standards. Without reusable components or documentation, team collaboration was inefficient and error-prone.
Design and UX Audit
Identifying Gaps: From Visual Inconsistencies to Usability Challenges
I began with a comprehensive audit of Swirl’s interface and user experience. The audit uncovered visual inconsistencies and usability gaps. Key recommendations included:
Introducing contextual CTAs to prevent dead ends.
Adding “Coming Soon” indicators to manage expectations.
Enhancing clarity with icons and supportive visuals.
Adjusting touch targets for improved mobile accessibility.
Simplifying in-app language.
Strengthening feedback through colour, imagery, and emojis.
I began with a comprehensive audit of Swirl’s interface and user experience. The audit uncovered visual inconsistencies and usability gaps. Key recommendations included:
Introducing contextual CTAs to prevent dead ends.
Adding “Coming Soon” indicators to manage expectations.
Enhancing clarity with icons and supportive visuals.
Adjusting touch targets for improved mobile accessibility.
Simplifying in-app language.
Strengthening feedback through colour, imagery, and emojis.
Establishing the Design System Foundations
Building a Solid Design Framework for Consistency and Accessibility
I defined the core foundations of Swirl’s design system, applying atomic design and design token principles.
Foundation library included:
Colour tokens with accessible contrast ratios
Typography hierarchy optimised for mobile readability
Spacing and grid systems
Iconography and illustration guidelines
Shadows, borders, and corner radii tokens
I defined the core foundations of Swirl’s design system, applying atomic design and design token principles.
Foundation library included:
Colour tokens with accessible contrast ratios
Typography hierarchy optimised for mobile readability
Spacing and grid systems
Iconography and illustration guidelines
Shadows, borders, and corner radii tokens
Component Library
Creating Reusable, Scalable Components for Seamless UI
Building on the foundation, I developed a reusable component library in Figma. Components were created with Auto Layout and variables, ensuring responsiveness and scalable design across different screens and interaction states.
Building on the foundation, I developed a reusable component library in Figma. Components were created with Auto Layout and variables, ensuring responsiveness and scalable design across different screens and interaction states.
Documentation and Team Enablement
Empowering the Team with Clear Guidelines and Best Practices
I documented the system in a Design System Manual, covering token usage, component construction, and best practices. I also led a team presentation to demonstrate application of the system.
Although I wasn’t directly involved in implementation, the documentation ensured continuity between design and development after handover.
I documented the system in a Design System Manual, covering token usage, component construction, and best practices. I also led a team presentation to demonstrate application of the system.
Although I wasn’t directly involved in implementation, the documentation ensured continuity between design and development after handover.
OUTCOMES
Delivering a Cohesive, Accessible, and Scalable Design System
Delivered Swirl’s first fully documented, token-based design system.
Established consistent design patterns and accessibility standards across the app.
Enabled the team to scale design efficiently with clear structure and guidance.
Introduced a systematic, professional approach to design operations within an early-stage startup.
Delivered Swirl’s first fully documented, token-based design system.
Established consistent design patterns and accessibility standards across the app.
Enabled the team to scale design efficiently with clear structure and guidance.
Introduced a systematic, professional approach to design operations within an early-stage startup.
REFLECTION
Lessons in Systematic Design and Empowering Teams Through Documentation
This project reinforced my understanding of design systems as living frameworks, vital not just for consistency, but also for fostering collaboration, accessibility, and scalability.
Working independently in a startup environment required a systematic, self-sufficient approach, resulting in documentation that empowered the team to evolve Swirl’s design practice long after my involvement.
This project reinforced my understanding of design systems as living frameworks, vital not just for consistency, but also for fostering collaboration, accessibility, and scalability.
Working independently in a startup environment required a systematic, self-sufficient approach, resulting in documentation that empowered the team to evolve Swirl’s design practice long after my involvement.
