My Work | Traction Replatform
Traction E-Commerce Replatform
Traction.com is B2B platform that sells heavy duty parts to customers in the Canadian aftermarket. Through a presence in brick and mortar stores and online, they have grown to be the leader in the aftermarket for truck and trailer parts. Traction is part of United Auto Parts (UAP), an affiliate of Genuine Parts Company.
Tool I Used: Paper and Pencil, Sketch, Invision
I came onto this project as a user experience designer from the digital department. My goal was to provide an updated retail digital experience where their customers could search and find products from their catalog of 500,000+ products efficiently.
When I came on to the project, the business had identified the high-level flows and functionalities they wanted to implement as part of the re-platform and communicated them through initial wireframes.
I worked with the business analyst and the client to further refine these requirements and ensure they were within the platform’s capabilities, allowing me to create the wireframes. Because the repatform would be implementing a traditional e-commerce experience, I applied and communicated best practices in e-commerce design during my process.
The following are some wireframes I created for the site:
Header: While the catalog would now be surfaced to the general public, users would still need an account and to be signed in to see product pricing and availability information. Therefore, users are encouraged to sign in through the site at the appropriate touchpoints.
Product pod on a results page: Users are prompted to sign in per product on the results set for pricing information.
Product pod on a results page: Users are given accurate product information once signed in and the ability to purchase it.
Products could potentially have additional prices, such as core pricing or fees, on products that had to be displayed. It was important to communicate what the customer was paying for during their checkout process.
An important feature of Traction would be for users to save items for later in a favorites list. They would need an easy way to add items in their favorites list to their cart to purchase now.
Collaboration and communication was critical to keep moving forward. I held on-going checkpoints with the business analyst and my manager to ensure I was staying within technology constraints while developing the right user experience. I shared my designs with the business during design reviews that allowed me to discuss design decisions and receive feedback.
Iterations happened often and helped me arrive at the best design solution. I consolidated feedback and questions during design reviews to continue further finalizing the wireframes. We then held follow-up design reviews that ultimately allowed us to all agree on the design solutions.
The following are some iterations of the mega menu.
Initially, the business requirement was to show all Level 1 Categories and the subsequent Level 2 subcategories for each category. While the product data had not been finalized, it was estimated to have around 28 categories with up to 10 subcategories in each category.
Early versions: This design showed that there were too many options in the menu for the user to be able to scan and find their desired part quickly and would not scale for mobile since many of the categories would become hidden towards the bottom.
Final Version: Through iterations and design review sessions, we ultimately decided to show only the Level 1 categories in the mega menu for the best browsing experience. Users could land directly on the category landing page to browse for the subsequent subcategories.
This site was built to be responsive - therefore, I delivered designs in both desktop and mobile screens. I annotated the wireframes to call out states, interactions, and various components of a page. The wireframes demonstrated the functional design, and were handed over to the visual design team who developed comps based off of them.
This site was built to be responsive - therefore, I delivered designs in both desktop and mobile screens. I annotated the wireframes to call out states, interactions, and various components of a page. The wireframes demonstrated the functional design, and were handed over to the visual design team who developed comps based off of them.
This was my first project where I was involved in the end-to-end development and delivery of a site and allowed me to develop my skills in various areas.
• Presenting my design decision to the business allowed me to grow my communication and speaking skills.
• Having a strong relationship with the team improved collaboration and communication between us.
• Constant communication should be happening to ensure information wasn’t being misinterpreted or missed.
• Overall, I learned the importance of being a part of a team and respecting each person’s role and knowledge.
Sarah Musa