top of page

Verifymy's UI Kit and Website redesign:
a UX-Driven Approach

Reading time: 5 minutes

VM Hero.png

Introduction

In May 2024, I joined Verifymy as a Senior Designer to take on an exciting challenge: revamping the website to make it more accessible, brand-aligned, and scalable. As the company matured, there was a growing need to elevate the brand and product experience, ensuring that the website reflected VerifyMy’s evolving identity.

​

To achieve this, I not only redesigned the website but also laid the foundation for a UI Kit, which would later evolve into the company’s Design System. The goal? A more consistent, accessible, and scalable experience across all digital touchpoints.

VM_Image-context.png

Verifymy old website elements

Building a Scalable System: The Atomic Design Approach

To structure this project, I based my approach on the Atomic Design methodology, a framework widely used for building design systems. The idea is simple:

​

  • Start with small foundational elements (like colors, typography, and grids).
     

  • Use them to build components (buttons, cards, input fields).
     

  • Assemble these into modules and patterns (sections of pages).
     

  • Finally, structure these modules into full web pages.


This modular approach ensured consistency, scalability, and flexibility, allowing us to quickly adapt the website to future needs.

Enhancing Accessibility & Visual Consistency

Before jumping into UI components, I needed to refine the foundation:
 

  • Color Adjustments: The existing brand color palette was highly saturated and neon-like, creating contrast issues. I refined the shades to meet WCAG guidelines, ensuring all text and UI elements passed contrast checkers for better readability, and also added shades for more flexibility when creating the components and UI.

VM_Colors.png

Enhancing Accessibility & Visual Consistency

Semantic & Neutral Colors: I introduced a structured color hierarchy, including neutral shades and semantic colors to improve UI clarity and visual communication.

Semantic.png

Enhancing Accessibility & Visual Consistency

Typography Improvements: by increasing line height, I made text more readable and visually appealing. We also define text styles to create consistency and scale design the process.

Type.png

Enhancing Accessibility & Visual Consistency

Grid System: I established a 4px-based grid, ensuring responsiveness and accessibility across all screen sizes.

Designing Scalable UI Components

Once the foundations were in place, I moved on to building core components. This phase involved:
 

  •  Mapping the Website: I conducted a competitive analysis to understand how industry leaders structure their UI and how we could improve VerifyMy’s design.
     

  • Creating 15+ Core Components: each component was built with variations, behaviors, sizes, and breakpoints, ensuring a seamless experience across devices.
     

  • Following UX & Accessibility Best Practices: all components were designed with A11y in mind, ensuring usability for all users.

Components.png

Bringing Everything Together: Modules & Pages

With the foundations and components ready, I started assembling modules and full pages. Since the goal was a dynamic and customizable website, we structured these modules within a CMS, allowing easy content updates without breaking consistency.

 

Key Pages Built:

  • Homepage

  • Blog Gallery & Blog Post Pages

  • Regulation & Content Pages

  • Solution Landing Page (VMC)

  • Content Provider Page
     

​

The website is currently live, you can visit it at verifymy.io.

Pages.png

Key Takeaways & Next Steps

  • Scalability & Efficiency: the modular approach allows Verifymy to easily expand and adapt the website.
     

  • Improved Accessibility: WCAG-compliant colors, typography, and grid system enhance the overall user experience.
     

  • Consistency Across the Brand: a structured UI Kit & Design System creates a unified look and feel.
     

  • Seamless Development Collaboration: detailed documentation ensures smooth handoff between designers and developers.
     

  • Ongoing Optimization: as we roll out the new website, we will continue to test, refine, and iterate based on user feedback.

​

 

This project was a great opportunity to blend UX strategy, UI design, and accessibility improvements into a scalable and user-friendly digital experience.

result.png

Old x New Website

Let's get in touch!

Contact me if you're looking for a product designer or just grab a (virtual) coffee and talk about design.

 

I'm always happy to chat!

bottom of page