UX UI Design
Wireframing & Prototyping
E-Commerce
UX/UI Designer
go to live site
Context & Problem
At Rivyl, we partnered with Road Armor to elevate their digital presence through a bold brand and website refresh, aligning with their expansion into new and competitive markets. The new identity aimed to feel sleek, modern, and dominant — but introduced a UX challenge: their primary brand colour, a vivid red, raised accessibility concerns, particularly around contrast and WCAG compliance. As the UX/UI designer, my role was to translate the refreshed brand into a user-focused, high-performing website. I was responsible for designing intuitive navigation, accessible interface components, and a seamless responsive experience. This was delivered in close collaboration with our development team to ensure design fidelity across all breakpoints.
Process
Our UX process started with research to understand business goals and user needs, including stakeholder workshops and competitor analysis. We developed personas—mainly DIY vehicle enthusiasts seeking compatible parts—to guide design decisions. Mapping user journeys revealed pain points like confusing navigation and cluttered product info. We created task flows to compare the current experience with an improved one, simplifying product searches with dynamic filters and clearer categorisation. Wireframes focused on streamlining navigation, enhancing vehicle filters, and redesigning product cards to highlight essential info. Internal and user testing led to refinements, especially for mobile clarity and compatibility details.
Design
The design aimed to create a bold, immersive website aligned with Road Armor’s refreshed brand, while prioritising usability and accessibility. I used a clean light-mode interface with white backgrounds for clarity, balanced by dark mode elements and subtle red gradients to reinforce brand identity. Bright red CTAs ensured visibility, while high-quality product imagery showcased the products. The brand’s unique geometric shape was used across components to enhance visual consistency. The old site was cluttered and confusing; the new design features spacious layouts, clearer information hierarchy, and streamlined product cards showing key details upfront. This supports faster browsing and more confident user decisions. Accessibility was a key focus—we ensured all colour combinations, especially the bright red, met WCAG AA standards. Red was reserved for interactive elements, while text and backgrounds maintained high contrast. Layout and typography followed accessibility best practices to deliver inclusive usability.
Road Armor
