Confused.com Design System
Tools: Figma • Illustrator • Zeroheight • Storybook
__________
The Challenge:
Confused.com’s mission is to bring clarity to a complex world — yet its growing suite of digital products and marketing channels had become visually fragmented. Inconsistent patterns slowed delivery, eroded brand trust, and made it harder for teams to move quickly and confidently.
Our goal was simple but ambitious: create a design system that unified every touchpoint — from the quote journey to internal tools — into one seamless, accessible experience.
__________
The Vision
We set out to build more than a component library. The aim was a living design ecosystem that reflected Confused.com’s promise of simplicity and clarity in every interaction.
By stripping back visual noise and focusing on accessibility, hierarchy, and coherence, we created a minimal, scalable design language that could flex across products, campaigns, and platforms — without losing its identity.
__________
My Role:
As lead UI designer, I directed the end-to-end creation and rollout of the design system, collaborating closely with product, engineering, and brand teams to ensure adoption and long-term sustainability.
Key contributions:
- Built a modular, scalable component library — including typography, color tokens, icons, illustrations, and reusable UI components, all optimized for global updates.
- Embedded accessibility as a foundation, not an afterthought, ensuring WCAG compliance across all products.
- Unified cross-functional workflows through regular design reviews, sprint rituals, and iterative feedback loops.
- Led adoption and governance, running workshops, onboarding sessions, and maintaining comprehensive documentation in Zeroheight and Storybook.
This wasn’t just about creating assets — it was about changing how teams design, build, and collaborate.
__________
The Outcome:
The Confused.com Design System became the single source of truth for digital design — a cornerstone for consistency, efficiency, and brand expression.
Results:
- 2× faster design and development velocity through shared libraries and reusable components.
- Improved cross-team collaboration, with designers, developers, and stakeholders aligned around the same visual and functional language.
- Streamlined third-party integration, supported by live, interactive documentation in Zeroheight and Storybook.
Today, the design system continues to evolve — a dynamic ecosystem that empowers Confused.com to scale confidently while staying true to its mission of clarity.
Confused.com Quote Journey Redesign
Tools: Figma • Illustrator • Adobe XD
__________
The Approach:
The redesign focused on clarity, accessibility, and efficiency — ensuring every interaction felt purposeful and intuitive.
Through user research, iterative testing, and close collaboration with product, development, and content teams, we identified key moments of confusion and transformed them into opportunities for guidance and trust-building.
__________
Key initiatives:
- Redesigned the full quote flow and results screens for both home and car journeys.
- Simplified form logic and visual hierarchy to reduce cognitive load and improve readability.
- Embedded accessibility standards (WCAG) into every interaction pattern.
- Prototyped and tested with real users, iterating designs based on behavioural insights and analytics.
- Established a shared component system to ensure consistency across products and devices.
This wasn’t just a UI refresh — it was a strategic redesign grounded in data and empathy.
__________
The Outcome:
The new quote journeys deliver a smoother, more confident experience that reflects Confused.com’s promise of clarity and simplicity.
Results:
- +2% increase in conversion since the late 2022 launch
- Users report clearer understanding of questions and easier navigation through the process
- Unified design language across journeys, devices, and platforms — ensuring scalable consistency for future products
The quote journey is now faster, more intuitive, and designed to grow with the needs of both customers and the business.
__________
Product quote journeys:
Client: Nationwide
Software used: Photoshop, illustrator
__________
Overview:
As a Digital Designer within Nationwide’s Internal Creative Agency, I was responsible for crafting visually engaging digital assets that adhered to brand guidelines and elevated the user experience. My work spanned multiple formats and platforms, including:
- Homepage hero imagery designed to capture attention and communicate key campaigns.
- Digital display banners optimized for performance across web and mobile.
- ATM screen visuals ensuring a seamless and branded in-branch experience.
- Social media content tailored to engage diverse audiences and drive interaction.
This role demanded a strong understanding of digital design principles, brand consistency, and cross-platform adaptability. Each asset I created was strategically designed to support marketing objectives while maintaining a cohesive visual identity.
Client: Dentally
Agency: Rally Agency
__________
Software used: Sketch, Photoshop, Illustrator
__________
Visit:
__________
Overview:
Dentally is a cloud-based platform built to help dental practices manage their patient data securely and efficiently from anywhere. The previous website was text-heavy and lacked visual clarity, which made navigation and user engagement a challenge.
The brief was clear: reimagine the site’s visual identity by introducing dynamic illustrations and intuitive iconography that would simplify content, improve usability, and reflect Dentally’s modern, user-friendly ethos.
__________
My Contribution:
I was tasked with concepting and designing a cohesive set of bespoke illustrations and icons to enhance the website's storytelling. I developed a clean, approachable visual language using soft pastel tones drawn from Dentally’s brand palette to ensure consistency and accessibility.
These visuals were strategically placed across key user touchpoints to:
- Break up dense text blocks
- Communicate features quickly and clearly
- Add warmth and personality to the overall site experience
__________
Impact:
The refreshed visuals helped transform the website into a more engaging and intuitive platform, better aligned with Dentally’s product promise: smart, simple software for modern dental practices.
Client: MiSmile
Agency: Rally Agency
__________
Software used: Sketch, Photoshop, Illustrator
__________
Visit:
__________
Overview:
MiSmile is a UK-wide network of 60+ independent dental practices offering Invisalign—a clear, removable alternative to braces.
__________
My Role:
Redesigned the MiSmile website to better engage the 25–40 demographic. Focused on creating a more aspirational, vibrant experience using brand-aligned colours, imagery, and tone. The refresh emphasised confidence, lifestyle appeal, and the real-life benefits of Invisalign—making users feel great in any situation.
Client: Invisalign
Agency: Rally Agency
__________
Software used: Sketch/XD, Photoshop, Illustrator
__________
Visit:
__________
Project Summary:
MiSmile is a UK-wide network of 60+ dental practices offering Invisalign treatment. The goal was to refresh the site to better resonate with a 25–40-year-old audience and elevate the brand’s aspirational appeal.
__________
What I did:
- Revamped the site’s visual language using MiSmile and Invisalign brand guidelines
- Introduced vibrant, lifestyle-focused imagery to evoke confidence and approachability
- Crafted a clean, engaging UI that reflects the benefits of clear aligners in everyday life
__________
Outcome:
A more modern, emotionally engaging experience that speaks directly to the target demographic—helping increase brand relevance and user engagement.
Beer label designs by De La Hop Brewery
Client: Personal project
Software used: Adobe Fresco, Photoshop, Illustrator
A personal project to create beer label designs based on themes under the name of a fictitious beer brewery called 'De La Hop'.
The beer can design labels that feature on this page are 'Lost Spirits Pale Ale' and Devil Pit Session IPA.
Clients: De La Hop logo, Opportunity DAO logo, Skyward logo
__________
Software used: Illustrator, Photoshop, Fresco app
__________
A combination of paid commissions and self initiated logo designs.
De la Hop logo
A fictitious brewery logo I created as a passion piece with the idea of it being the main brewery where it will feature on future beer label designs.
Opportunity Dao
https://opportunitydao.com/
A charitable money lending site based in the USA approached me through a contact at another company I was producing some design assets for.
Skyward Digital
https://skyward.digital/
A UK based SAAS company approached me when setting up their business and required a logo which would sell their lofty expectations.
Client: Invisalign
Agency: Rally Agency
__________
Software used: Sketch, Photoshop, Illustrator, After Effects, Adobe Premiere
__________
Background:
The Invisalign Mentoring Programme is a learning based platform containing training module videos with the aim of keeping Orthodontists at the forefront of the orthodontic industry and Invisalign technology.
__________
My responsibility:
To create storyboards for each of the training videos there are 6 training modules in total. After the storyboards were approved by the team it was a case of building out the scenes in Photoshop then importing into After Effects to create the animated sequences. Once done in After Effects they were brought into Adobe Premiere to create the training video sequences before exporting.
The videos were then provided to the Invisalign team to upload to their training system and used in assisted training to Invisalign practitioners.
Client: Personal project
Software used: Adobe XD, Photoshop, Illustrator
A personal project that I created on the back of doing a course in UI/UX using Adobe XD. Showing some of my learnings and designing a website and ordering process for a fictitious online furniture store.
Client: MiSmile/Invisalign
Agency: Rally Agency
__________
Software used: Photoshop, After Effects, Adobe Premiere
__________
Background:
MiSmile uses Facebook and Instagram channels to help promote and market Invisalign treatment to followers and potential customers alike focusing on the benefits of choosing Invisalign and how it fits in with your lifestyle.
The creative is updated with fresh copy and relevant imagery on a regular basis and in order to keep content fresh and engagement high. In addition to this I would experiment with different transitions and visual effects.
My responsibility:
Creating and producing the social videos in After Effects using Invisalign branded assets and stock assets, sourcing audio and using sites like Motion Array to work with new animation techniques and video effects.
Client: SAFE Orthodontics
Agency: Rally Agency
__________
Software used: Sketch, After Effects, Premiere, Photoshop, Illustrator
__________
Visit:
https://www.safeorthodontics.com/
__________
Background:
This is a learning platform where dentists are able to access learning content in the form of video modules which are broken further down into lessons with the aim of helping practitioners gain further knowledge in Orthodontics so they can then assess and carry out orthodontics safely on their patients.
My responsibility:
To work alongside the creative head on the the creation of the platform visuals and storyboarding the video lessons. I was also responsible for taking the storyboards and producing 8 video modules in After Effects and translating them into various languages for the European market.
Client: Unity Trust
Freelance work
__________
Software used: Sketch/XD, Photoshop, Illustrator
__________
Background:
Unity Trust is the bank that helps organisations to prosper and contribute to economic, community and social change with the aim of creating a better society.
__________
My responsibility:
To come up with a design concept for Unity Trust’s banking website, banking app and chat bot for pitch.
