Revamping Topgear
A complete redesign, and thorough analysis of TopGear, Toptal's internal e-commerce store.
The Problem
The People Team at Toptal came to us for help addressing complaints they received on their internal e-commerce store, TopGear. They were receiving multiple Issues with order fulfillment, and poor user experience.
The website was also managed through a third-party vendor, making it impossible for administrators to quickly make updates to the site.
In addition to the existing challenges, the team identified an opportunity to expand the store to the talent network, potentially increasing the user base from around 1,200 to over 10,000.
Unfortunately, they did not feel comfortable sharing the site due to its poor UI and complaints.
The Solution
First and foremost, we needed to recreate the site so we had full ownership.
The redesign addresses the multiple reports while being able to take full ownership. Our solution involved diving into discovery research, user interviews, and testing. We then analyzed the results to identify pain points and develop effective solutions to create a better experience.
The outcome was a visually appealing site that is highly functional and intuitive. By prioritizing user needs throughout the design process, we created a store that not only addressed initial complaints but also surpassed user expectations with its new features.
Research & Strategy
Collecting Qualitative Data
Before embarking on the redesign and the expansion of the talent network, it was crucial to gather concrete evidence of our users' pain points. To accomplish this, the team carefully planned our research methodology, outlining how to conduct our investigations and what information we hoped to uncover.
Refining Themes
#1 Pre-orders
What leads a user to TopGear?
#2 Search and purchase flow
How long are users spending on the site searching for products? How long does it take for the user to checkout? How can we simplify this process?
#1 Post-orders
Why do we currently have multiple reports of problems with fulfillment?
User Interviews
Pinpointing User's Main Concerns
We conducted a series of 8 interviews which included core Toptal members who have all purchased products from TopGear. These users were also from different departments as well as different regions across the world.
Our goal was to understand if these users were returning to the store, why, or why not. What was their experience?
During the interviews, we discovered a huge need to be more inclusive of our global users. Shipping costs were abnormally high for those across the globe since our warehouse was located in the US.
After obtaining this knowledge, it was time to get to work on planning how to build a better experience based on the concerns of our users. It seemed to be that our main area of concern was our shipping and checkout experience, so the plan was to start there.
A Win for our Global Users!
During this time, we successfully advocated for a partnership with a second warehouse in Europe. This new partnership would drastically lower shipping costs for users on the other side of the world, resulting in a significant win for our TopGear users who reported high shipping costs.
However, it also presented a new challenge in directing users to the new "store" and ensuring a seamless transition.
Information Architecture
Mapping the Path to Customer Satisfaction
Our user interviews revealed that we should be focusing on tailoring the site to our global customer base first and foremost and we discovered three main areas where we can improve these:
✓ Improvements to our checkout experience for a more seamless experience as well as more transparency with price and gift cards
✓ Welcome and onboarding experience to allow the user to select a closer warehouse or "store" to solve shipping cost issues
✓ Be more inclusive of our international audience on our product description pages
Low-Fidelity Prototypes, Wireframes, and Feedback
Designing a New Experience, and Putting it to the Test
With help from the product manager and engineering team, we were able to discuss, test, and iterate the design until we felt confident in our product decisions.
We then sent a multitude of prototypes to our stakeholders and a select few members from the core team to test the designs.
100% of users reported an easy and seamless experience
92% felt the new layout + features felt more inclusive to the global audience
High-Fidelity Solutions
A Brand New Experience
Users can now set up store preferences. We recommend a store based on the user's location, but they always have the option to toggle between stores easily once they are inside the site.
Cart and Checkout Experience
The major pain points our users were experiencing was being hit with extremely high shipping costs at the end of their checkout experience.
Although we hope to have solved this issue by now having two separate warehouses, we still would like to add full transparency so that the user knows exactly how much shipping will cost without the hassle of going through the entire checkout flow first.
We also discovered a lot of folks had an unused gift card balance due to the balance being in their account and not the checkout experience.
Product List and Description Pages
Users wanted more options as well as more ways to refine their search. Below I've added more categories to filter through products and a "Quickview" option so that the user can easily see product descriptions without losing their place on the product list page.
Keeping in Mind All Scenarios
Designing error screens and messages requires careful consideration of the user's perspective. It's essential to provide clear, concise, and actionable instructions that guide users toward a solution.
Components & Hand-off
I wanted to make sure we were elevating the UI by adding small details such as cohesive branding, icons, and illustrations. I acted as art director, working with our illustration team to direct and execute designs that felt on brand.
Where We Left Off
The engineering team is currently building out the welcome, home, product list, product details, general error pages, and cart experience. The designs are finalized and have been tested using the same methods of testing during our wireframing stage.
Unfortunately, I am no longer with Toptal, so I won't be able to engage in the post-design process, but from the feedback, we gathered thus far, I am confident the new and improved TopGear site will meet and exceed our user's expectations.