Confused.com Design System
Tools: Figma • Illustrator • Zeroheight • Storybook
Role: Senior UI Designer / Design System Lead
Duration: 2022 - (ongoing)
__________________________________________
Overview:
Confused.com needed a unified, scalable design system to align product, marketing, and internal tools. I led the creation of a simple, flexible, and accessible visual language that supports clarity across every digital touchpoint.
__________________________________________
The Challenge:
Rapid product growth had created inconsistent interfaces, duplicated components, and slow delivery cycles. The goal was to build a single source of truth that improved efficiency while reinforcing the brand.
__________________________________________
My role:
I led the design system initiative, collaborating with product, brand, and development teams. Responsibilities included:
• Defining design tokens (colour, type, spacing, iconography)
• Building a reusable Figma component library
• Embedding accessibility into all UI patterns
• Documenting guidelines in Zeroheight
• Running workshops to drive cross-team adoption
__________________________________________
Approach:
I began with a full UI audit to identify inconsistencies and opportunities for consolidation. Using these insights, I created the foundational styles and core components, then expanded into more complex patterns. Documentation and workshops ensured the system was easy to use, adapt, and maintain across teams.
__________________________________________
Outcome & Impact:
The design system became the central reference point for all digital design, delivering:
• Faster design and development workflows
• A consistent, brand-aligned UI across products
• Reduced duplication and improved team alignment
• A scalable foundation for future features and platforms
__________________________________________
Why It Matters:
This project demonstrates my ability to lead design direction, collaborate across disciplines, and create systems that improve product quality, speed, and long-term scalability.
__________________________________________
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
Role: Senior Visual Designer
Duration: 2022 (on-going improvements)
__________________________________________
The Approach:
To modernise Confused.com’s quote journeys, I led a strategic redesign grounded in clarity, accessibility, and visual coherence. My focus extended beyond aesthetics: I aligned user needs, brand expression, and technical constraints to build a system that scales across products and platforms.
Through user research, iterative prototyping, and cross-functional workshops, I identified the key points where users felt uncertainty. These became opportunities to strengthen trust through cleaner hierarchy, more intentional interactions, and a more expressive yet unobtrusive visual language.
__________________________________________
Key Contributions:
Reimagined the end-to-end quote experience
• Redesigned the full home and car quote journeys — from form flows to results screens — with a focus on clarity, reduced friction, and stronger alignment to brand principles.
Crafted a high-performing visual system
• Refined typography, spacing, colour, and layout to create a visual rhythm that improves scannability and reduces cognitive load.
• Established consistent visual behaviours for states, interactions, and error handling to improve usability.
Built a scalable component library
• Developed a modular component system enabling cross-product consistency and faster design/development cycles.
• Documented patterns and usage rules to ensure repeatable, high-quality execution across teams.
Elevated accessibility and inclusivity
• Embedded WCAG-compliant patterns into every component and flow, improving readability, contrast, form usability, and assistive-technology support.
Validated with real users
• Prototyped and tested interactions with users to uncover behavioural patterns and refine visual decisions.
• Used analytics to guide prioritisation and measure the impact of changes.
This was not a visual refresh — it was a foundational redesign that unified behaviour, brand, and product strategy.
__________________________________________
The Outcome & Impact:
The redesigned quote journey now reflects Confused.com’s promise of simplicity by delivering a cleaner, more confident user experience — one that is consistent, accessible, and built for scale.
__________________________________________
Results:
• +2% increase in conversion since the late-2022 launch.
• Users report greater clarity, reduced confusion, and easier navigation through lengthy forms.
• A unified design language now spans journeys, devices, and platforms — enabling faster iteration and future product expansion.
• The new system significantly reduced design/development overhead and improved cross-team alignment.
__________________________________________
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.
