WebsiteNode.jsMongoDBChakra UI

InsideMaps Website

An experience redesign of a Legacy website

Background
InsideMaps Website - UX Redesign
Client

InsideMaps Website

Role

Lead Designer

Team

Lead Designer (me) CTO Engineering Lead Product Owner 3 Jr Designers

Tools

React, Chakra UI, Node.js

Overview

As a lead Product designer, I was responsible for recreating the website navigation and improving the user conversion rate using a 5-phase approach: Discovery, Validate, Research, Design, Prototype/Validate, and Development.

Problem

Internal Usability Tests & Sitemap Redesign

"The internal usability tests revealed several red flags, most notably with the existing Sitemap. The navigation flow was hindering the experience for newcomers, with disconnected information and confusing redirection."

Research

Discovery & Sitemap Strategy

Internal Usability Testing

A part of the Discovery phase for our focused team. We used internal validation before going to users to identify early structural issues.

Internal Usability Testing

Reimagining The Sitemap

Moved from a fragmented '10,000 ft view' to a centralized information hub. Clear navigation flow: knowledge, resource, and pricing accessible directly from the start.

Reimagining The Sitemap
Solution

Interface & Layout Iteration

Following a trail-and-error process where the first layout attempt didn't meet expectations, leading to a successful 'Take 2' using wire-frame prototypes and A/B testing with users.

Solution 0
Implementation

Technical Depth

A/B Testing & Take 2

Second attempt tested at the root level with clickable wire-frame prototypes to ensure the navigation flow and user journey felt natural.

A/B Testing & Take 2

Responsiveness & Accessibility

Implemented Aria attributes, keyboard navigation, color theory, and enhanced touch targets to ensure a seamless experience for everyone.

Responsiveness & Accessibility

Atomic Design Implementation

Built the UI from the ground up using atomic design principles: atoms (design tokens), molecules (patterns), organisms (modules), and finally templates and pages.

Atomic Design Implementation
Impact & Results

80%

User conversion and app downloads both increased by 80%. Specifically, 8 out of 10 visitors signed up, with 85% becoming long-term users—a testament to the cohesive experience between the website and the app I also designed.

80%
Result 0
Result 1
Result 2

You Dream It, I Code it

Contact

Got a question, how or project Idea? I’D love to hear from you and discuss further!
imagine, I build imagine, I build imagine, I build imagine, I build