INDUSTRY:
AUTOMATIVE ECOMMERCE PLATFORM
CLIENT:
TAPSI
YEAR:
2022
ROLE:
UX/UI DESIGNER
TAPSI GARAGE
story.
research.
We began by understanding what wasn’t working. Through user interviews, in-app analytics, and heuristic evaluation, we uncovered several pain points:
High checkout abandonment: Analytics showed that nearly 40% of initiated carts never completed. Interviews revealed frustration with too many steps, hidden delivery fees, and unclear address selection.
Product discovery struggles: Drivers often couldn’t find the right product quickly, especially under stress. Categories were inconsistent, filters limited, and icons confusing.
Visual inconsistency: The original UI mixed styles, type hierarchies were unclear, and accessibility was almost nonexistent (poor contrast, unreadable text in motion).
Engineering bottlenecks: Handoff was messy. Developers rebuilt screens from scratch instead of reusing components, increasing build time.
This research shaped our problem statement:
How might we create a scalable and accessible product marketplace that makes car maintenance purchases fast, intuitive, and reliable for drivers under pressure?
information architecture.
With insights in hand, we moved to structuring the experience.
We reorganized product categories into grid-based, icon-driven modules. This was validated with quick tree-testing sessions, showing a 20% faster task completion compared to the old version.
Added city-level filtering and location-aware features, personalizing listings for drivers in Tehran, Mashhad, or Shiraz.
Sketched simplified checkout flows, reducing steps from 5 to 3.
iteration.
1. Visual Identity & Accessibility
We designed a custom 3D icon set for key product categories (oil, filters, tires). By applying WCAG-compliant contrast ratios, improved typography, and Lottie animations, the interface became both delightful and accessible.
I used the to validate improvements, ensuring:
Text contrasts exceeded 4.5:1
Icons had meaningful labels for screen readers
Interactive elements were large enough for thumb use
2. Component System
We rebuilt the UI in Figma with design tokens, creating atomic components (cards, inputs, tabs). This allowed seamless reuse across iOS, Android, and web.
Developers confirmed handoff time reduced by 35% since new designs came with structured tokens and annotations.
Future teams can extend the system without reinventing flows.
3. Checkout Optimization
Checkout was the most critical (and broken) part of the journey.
We introduced one-tap reorder, preferred delivery time, and service center selection via maps.
Usability testing with 12 drivers showed checkout completion improved by 22% after redesign.
Abandonment dropped; we measured this by comparing analytics 4 weeks pre- vs post-launch.
future steps.
While my direct role ended at launch, I proposed next steps:
Driver feedback loops → in-app surveys and heatmaps to track where users still hesitate.
Dark mode adaptation → critical for night drivers.
Expanding accessibility testing → partner with accessibility consultants for WCAG 2.2 AAA.
AI-driven product recommendations → surface relevant car parts based on driver history.
By leaving a roadmap, I showed both care for the long-term vision and commitment to iteration.