The Mystery
Problem statement
Rideshark, a ride-sharing web application, had the foundation of a design system, but something was off. While a framework existed, components lacked consistency, accessibility, and usability best practices. Developers encountered challenges with fragmented UI elements that did not completely facilitate a seamless experience.
My mission? Investigate the gaps and design a robust set of components using UX design techniques.
Investigating the evidence
Discovery Phase
I observed a few inconsistencies within the user interface of Rideshark’s main products. To understand what was broken, I started by diving deep into their existing design system.
Methods used:
- UI Audit of current components across pages
- Stakeholder interviews to understand design development pain points
- Accessibility scan (contrast ratios, keyboard navigation, etc.)
- Review of user feedback
Key Clues Uncovered:
- Buttons, input fields, and icons varied in style and behavior.
- Absence of usage guidelines resulted in some inconsistency in developing implementation.
- Accessibility issues made some components less usable for diverse users.
- The design system lacked UX-informed rationale for many components.
Defining the Mystery
Define Phase
“This case came with the mystery already defined; my mission was to help solve it.
Let’s see how this case unfolded.”
Brainstorming the Next Move
Ideate Phase
I mapped out the culprits and got to work brainstorming solutions that would strengthen both consistency and usability. Together with the team, we prioritized clarity, cohesion, and collaboration.
prototyping the case
Prototype Phase
I created an updated component library that felt more like a well-organized detective’s toolkit than a messy evidence locker.
UX Techniques Applied:
- Affordance design for better interactivity
- Fitts’ Law to ensure easily clickable touch targets
- Color contrast analysis for accessibility
- Component usability testing (internal review & feedback loop)
Key prototypes included:
- Redesigned buttons, forms, cards, modals, alerts, and navigation elements with clear hierarchy
- Defined interaction states (hover, focus, disabled, active)
- Created a flexible grid and spacing system
- Accessible form elements with consistent spacing and labeling
- Developed a scalable color and typography guide
- Built out a component library in Adobe XD with guides and annotations
Testing My Theory
Testing Phase
I tested the new components with designers and developers directly:
- Checked accessibility with keyboard navigation and contrast tools
- Observed how quickly developers could implement updated components
- Gathered real-time feedback from stakeholders and users
Outcome:
The new system increased UI consistency and cut down dev time significantly.
What I Learned
Solving this case taught me that design systems are more than assets; they’re a living contract between designers, developers, and users. With the right structure and UX rigor, even a messy UI mystery can be cracked.
