Avid Disc Golf
The Problem
The Avid Disc Golf site is suffering from poor conversion and usability issues. Metrics reveal that 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart. They also show that 70% of users who place an item in the cart do not purchase. Instead users abandon their cart at the registration page.
The goal is to retool the browsing and checkout experience to greatly improve the site’s usability and conversion.
Research and Interviews
While conducting research and interviews I was able to discern that:
Users were able to recognize aggressive/pushy CTA when shopping and that it frustrated them and made them lose trust in the brand.
The people I interviewed reported that they didnt want to be pressured into a purchase and did not like to give out their information unless necessary.
They relied on product info and reviews to make their purchasing decisions.
Research showed that the leading reasons people abandoned their carts are:
extra costs (like shipping and taxes),
slow delivery, and
forced account creation
User Flows
To kick off the design process, I started by creating user flows to give a sense of what the user would see as they navigate through inventory and complete the checkout process. Research and data showed that people were abandoning their cart rather when they had to create an account so the guest checkout was a priority here. I was deliberate in creating an intuitive IA structure to allow for easy navigation while searching.
Low Fidelity Mockups
After locking down the user flows, I was ready to create a wireframe version of my vision for Avid. Having done competitor research, I drew inspiration from existing desirable and functional design.
The goal was to create a site that appealed to both beginners and experienced disc golfers alike.
Design to increase conversion without seeming pushy led me to create a minimalistic guest checkout and offer a code for free shipping, addressing two of the main causes of cart abandonment.
Testing Mockups
To test the usability of my wireframes I conducted usability tests with five users. They were asked to complete several tasks and think aloud as they went. I tested two experienced disc golfers who have bought discs online before and three people who had very little experience with disc golf. Testing showed me that:
There was a strong need for a beginner friendly path to finding disc golf discs to buy.
Users needed a quick and easy way to find reviews for the product they were interested in.
Experienced users needed more descriptive info on the products they were interested in.
Iteration into High Fidelity
Testing wireframes showed a critical usability issue for beginners vs experienced disc golfers. Beginners were overwhelmed by disc info while experienced need more. To address this I created a banner advertising a beginner landing page on the home screen. This brings the user to a page that explains everything about disc golf and how to choose a disc including a quiz to personalize their search for the right disc for them
The beginner section carries a lot a visual weight to stand out for those who need it while experience users can go straight into searching for a disc they want.
The profile of a disc is informative and helpful, using reviews and a quote from a pro player who throws the disc to instill trust and confidence into making a purchase.
The beginner section carries a lot a visual weight to stand out for those who need it while experience users can go straight into searching for a disc they want.
Usability Testing
Testing Hi-Fi designs showed that usability had increased from the previous round of testing although there were still a couple points where users had issues. Primarily users all wanted to use the search function. This was an easy fix of building a search flow in Figma to accommodate user search.
Users also reported several UI issues on the beginners page, finding reviews and a couple other minor issues. These were addressed with deft resizing and changes in spacing and color. Lastly people expressed concern that they did not have a confirmation number on the completion screen after checkout and payment. I added a section to thank the customer and confirm their order as well as indicating a email would follow shortly with the conformation.
After implementing all the changes that testing revealed I completed my final iteration for this project.