GPS Design

Challenge

To kick things off, I dove deep into understanding how the current system worked and what users needed from it. I reviewed the current design, tested every corner of the UI, and made note of every moment that felt clunky or unclear. Because I couldn’t access a large pool of users, I leaned into secondary research and heuristic analysis. I used accessibility tools to simulate various types of colorblindness and tested the contrast ratios of existing colors, many of which failed to meet accessibility standards.

I also studied design inspiration from Mobbin to understand modern approaches to navigation, data tables, cards, and visualizations. This helped me benchmark what "intuitive" looked like in other tools and bring that understanding into this redesign.

Design Process

1. Working within the system

One of my first challenges was working within a somewhat rigid design system. I had to rebuild or refine components to behave more intuitively—for example, making hover states more consistent, ensuring padding allowed the eye to scan easily, and simplifying overly technical component names.

2. Color overhaul for accessibility

Color was a huge pain point. The original palette was jarring and non-compliant. I went through multiple iterations, testing every combination for contrast and colorblind compatibility. This wasn’t just about compliance—it was about empathy. I didn’t want anyone to feel excluded from using the tool because of how they see the world.

I finally landed on a brand-forward color palette that felt clean, modern, and inclusive. I also tested every chart and data visualization component to ensure they worked without relying solely on color to convey meaning.

3. Typography and visual hierarchy

Choosing a typeface was another challenge. I wanted something modern, but not too playful—this was still a professional tool. After testing several fonts, I chose one that gave clarity at smaller sizes but still looked sleek when scaled up for headers.

Using consistent font weights, sizes, and spacing, I built a visual hierarchy that let users quickly scan for what matters.

4. Dark mode done right

Dark mode wasn’t just an aesthetic choice—it was a usability and comfort feature, especially for users in the field or in low-light settings. I iterated on shades of gray, ensuring that the UI didn’t feel too stark or washed out. Accessibility stayed top-of-mind here too buttons, cards, and text still needed to pop without straining the eyes.

5. Branding and polish

To give the app a fresh identity, I created a new logo that matched the updated vibe of the product. I also designed primary and secondary buttons, modals, and interactions to create a consistent, delightful experience.