American Tire Distributors
UX & Account Lead
Project Summary
American Tire Distributors is one of the largest independent suppliers of tires, wheels and automotive supplies in the B2B market space in North America. My team has been working with the group since October of 2020. In that time, we reimagined their mobile app and website e-commerce experiences across their three primary brands: ATDOnline, NTDOnline (Canada), and TirePros.
Challenge
American Tire Distributors wanted to enhance their e-commerce experience so that merchants could easily find and order tires that fit their customer’s needs. The current website had been designed over time and had become complicated and challenging to navigate. Further, the current web experience isn’t responsive, creating a limited opportunity for those not engaging with the mobile app. The new design needed to be responsive, leveraged for their three brands, and account for the site’s translation to French.
Insight
The updated website utilizes on common interaction patterns and relies on existing user mental models, but makes key improvements to information architecture, visual patterns and user flows.
Before & After: The Approach
Flexible, reusable components
By utilizing Figma and its design system management capabilities, we revamped the look and feel of ATD’s brands via the creation of a customized modular library. Flexible, reusable components reduced friction during the design process and aligned the design to development handoff.
Streamlined information architecture
We audited ATD’s existing information architecture with a focus on the navigation experience and identified areas to streamline key user flows. My team focused on ATD’s navigation through the lenses of specific personas and how they would each uniquely participate in the ATD e-commerce experience.
Mobile App Home Screen
Highlighting key calls to action
The prior ATD interface was difficult for users to interact with because the screen was static and the logo took up 35% of the screen. Key calls to action were difficult to interact with because they overlapped with mobile status bar. We designed the updated interface to be compatible with a variety of mobile device sizes so that the experience was device agnostic and clearly highlighted key user actions on the homepage to jumpstart the e-commerce experience.
Custom iconography
My team created custom iconography that was utilized in the bottom navigation menu. The reuse of clear iconography contributed to a more standardized navigation experience and cut down on user processing time by relying on easily identifiable visual indicators.
Mobile App Search & Results
Clear hierarchy
The product landing page is the most crucial part of the experience for ATD. The original visual look and feel lacked a clear type and sizing hierarchy which made it difficult for users to parse information quickly. My team implemented clear typography and sizing guidelines which reduced friction as users scanned the incredibly complex product landing page.
Intuitive search
There was a lack of clarity around filtering and controls and users struggled to understand how to modify their search criteria or how to interact with the search results page. My team focused our attention on a streamlined search results card design that offered more visibility into the details of products and utilized clear calls to action.
Desktop Homepage
BEFORE
The existing experience is a hodgepodge of search functions, links, accordions, marketing messages, and account options. Customers struggle to find focus and often are unsure how to achieve their tasks or where to find important daily functions.
AFTER
We created streamlined, focused search options, clear marketing content areas, and drive users to their specific account actions via the “My Garage” section. In testing, users found this offered efficient and clear task flows that provided clear communication throughout.
Before
After