To view case studies in Figma please refer to this link.
Customer Build Feed
The Introduction
Turn 5 is a e-commerce company specializing in the retail of aftermarket car parts. They have 3 websites, each specific to a niche market of vehicles. American trucks is their most profitable. All mock ups usually are centered on that website. As you can imagine they sell aftermarket parts for multiple generations of American made trucks. A useful tool that the website provides is the customer build feed. This is a feed that displays numerous customer profiles each displaying that customers vehicle, purchased products and a pictures of their vehicles. This allows a new way for users to shop by viewing customers who have the same vehicle as them and by viewing products they have purchased.
The Problem
The exposure rate on mobile showed that 60% of users do not scroll past the 4th profile on the feed. Obviously the first post gets the most engagement but within each profile the click engagement majority was split between the picture and the product. Bottom line was that users were not using the Build feed as much as we were hoping. Product owners decided that they wanted the customer feed to be given a redesign to have better aesthetic's and to mimic product cards of popular social media sites to make the user want to engage more with the feed.
In addition, analytics showed that wheels and tires are Turn 5's biggest sellers on the website. Product owners decided that wheel and tire information should be more prevalent on the customer build feed. This provided some conundrums in that, ideally you want to show as much information pertaining to wheel and tire as possible. However, the more information the more overwhelming the feed becomes. We needed this feed to be short, sweet and scannable and when you start piling on heaps of wheel and tire information, you loose that scan-ability.
The Solution
Below is the mock of the design I created to solve the problems illustrated above. On the left shows the original design. On the right shows the redesign.
The redesign features a new information structure in which all pertinent info of that particular customer is contained in a profile card. The card features a picture carousel so the user can view multiple pictures at the feed level without having to enter the customers profile. The main addition is the wheel and tire dimensions as well as the stance and if a lift kit is required are added to the card. This information remains partially hidden and the user can choose whether or not they would want to expand the info.
Above shows the profile card if a user decided to expand the information. Now multiple wheel and tire details are visible. We believe this strategy keeps the feed compact so that the user can browse multiple profile cards and when they land on a profile that they wish to learn more about, they can expand the information at the feed level.
The Testing
A usability test was completed using User Zoom. 5 current customers of American trucks were recruited for the testing. 5 out of 5 thought the redesign was an all around better and more useful experience over the old version.
Profile MVP
The Problem
Turn 5's initial strategy for collecting information to create a profile for customers was definitely not thought out. It starts when a user purchases a product and then is prompted to add a photo of their vehicle. In the process of adding this photo they are asked to make a username and to add details about their purchase. The websites then takes that info and adds it to the customer feed without the owner being able to change, edit or remove any of that information. The user has no access to their own profile but other users can see their profile by accessing it through the customer feed.
The Solution
It was up to me to determine what the minimum viable product for a functioning profile page would require. I decided it was imperative to have a customer be able to not only have a profile page but to allow them to customize it to their preference. So we needed to add an access point to the profile into the main menu.
Then we wanted to redesign the profile page and to have the content be editable. I felt that having the customer be able to change their profile name, picture and to add a short bio added ownership over their profile. I also wanted the ability to add photos. Finally to make a profile a tool for other users to browse and see what people have purchased and to have that be an aid in their own purchases, I needed to add wheel and tire information as well and display purchased products.
VFW Redesign
The Problem
When you are shopping for vehicle parts to fit your exact make, model and year of your vehicle. There is a large margin for error that you will purchase a part that does not fit your exact vehicle. A critical feature of Turn 5's website is the Vehicle Fitment Wizard. It is a series of questions that are meant to ascertain the exact vehicle the user is shopping for. Once it is completed every item the user comes across throughout the website will have an alert that notifies the user if the part will fit their vehicle. The issue is that the way it was previously handled was to have the questions appear right when a user enters the site. However, it isn't the best experience when you are trying to shop and the website is relentlessly badgering you with a series of questions. Even if it is to help you.
The Solution
The VFW redesign features a CTA prominently displayed at the top of the page that notifies the user that they need to confirm their vehicle to make sure the products they are shopping for will fit. Once they engage the CTA, a flyout page prompts the user to fill out the questionnaire (which can be exited at anytime). Once the questionnaire is complete, the final page is a confirmation that they can continue shopping and that all displayed product will fit their vehicle.
