Dusty Groove Website Refresh
Complete overhaul of website design, informational architecture, and development of a rewards program
Project overview
Dusty Groove is a Chicago-based record shop with both a physical store and website. Their main focus is selling pre-owned vinyl and having an inventory that is changing constantly, which is great for collectors as you can find something new almost daily.
Project objective
The objective of this project is to enhance the Dusty Groove website by creating a refreshed design and improving the current navigational architecture. While the current website is functional, it lacks an engaging user experience that also captures the essence of the excellent in-person shopping experience.
It was also necessary to uncover the target customers of Dusty Groove, and develop strategies to attract and retain them both in-store and online. By understanding their needs, preferences, and behaviors, and updating the current features, content, and overall user flow, Dusty Groove will be able to increase their customer engagement, satisfaction, and loyalty.
Timeline
2 Weeks
My role
UX Researcher
UX Designer
Tools
Figma
Adobe Photoshop
Omimal Sort
Google Slides
The process
Discover
Define
Design
Deliver
Next steps
Secondary Research
Competitive Analysis
Comparative Analysis
Persona
Empathy Map
Journey Map
Problem Statement
How Might We
User Flow
Informational Architecture
Open Card Sort
Sketches
Mid-Fi Wireframes + Prototype
Usability Testing
Design System
Hi-Fi Mock-up
Two big questions...
In the initial stages of this project, it was very clear that there were two main questions that needed to be answered as a jumping-off point before even attempting to move into the design.
Who is the target user for Dusty Groove?
What is preventing that target user from making purchases?
To begin pinpointing that ideal target user, it was important to understand the services, offerings, and history of Dusty Groove, as well as the 'resurgence of Vinyl' and what factors have been driving that resurgence.
This research pinpointed value hunters as the primary target customer for Dusty Groove.
Value hunters are always on the lookout for:
-
The best prices and deals
-
Compelling value propositions
-
Sales, coupons, exclusive offers, etc...
So what is 'value'?
While uncovering what value is and how it is perceived by customers, it became quickly apparent that value is not just about the best price or lowest amount of money - it’s about the best deal.
Several interesting things happen when a customer perceives they are getting the best deal:
-
They feel much more satisfied with their purchase
-
It develops a better customer/business relationship
-
It creates excitement (cue the endorphins)
-
The customer feels smart and empowered
Dusty Groove's target user
Name: Greg Davis
Age: 47
Location: Chicago, IL
Work: College history professor
Archetype: The value hunter
Greg in a nutshell:
-
Works very hard to save money
-
Organized to a fault
-
Frugal, but has no problem spending money on things he loves… if the deal is right
-
Very loyal when he feels valued
Motivations
The current Dusty Groove experience
So what is Greg's experience like as he navigates through the Dusty Groove website for the first time?
To begin answering this question, it is important to understand what Greg's current experience is with the Dusty Groove website. To do this, you can view Greg's empathy map and Greg's journey map.
These exercises pointed out three key pain points that are contributing to Greg having a less-than-ideal experience on the current site.
Opportunity:
Greg was excited to find a new record store he could shop at
Pain point:
How cluttered and disorganized the navigation is when landing on the main page of the website
1
Opportunity:
Greg was able to find an item he was interested in buying
Pain point:
After researching the item online, Greg discovered it was overpriced
.png)
2
Opportunity:
Greg discovered a special offers section on the site
Pain point:
The offerings in the special offers section seemed more like items they just needed to get rid of
.png)
3
Defining the problem
Problem statement
Greg needs to experience a sense of empowerment when shopping with Dusty Groove, so he can justify making purchases.
How might we
How might we create an online experience for Greg that makes him feel valued and empowered to make purchases?
Improving the navigation
Since informational architecture is such an important part of creating clarity as Greg enters the website, this was a top priority as the current navigation, menus, and sub-menus are causing confusion and frustration.
The results from my open card sort helped to pinpoint how users thought the information should be divided into categories as well as how they preferred them to be named. This information was taken from the original website to find what users found as most important, similar, different, and even unnecessary.
After analyzing all the data, a clearer and more simple informational architecture was able to be created.
The updated informational architecture
Groove rewards loyalty program
Another important step to creating 'value' for Greg was designing a loyalty program from research comparing the top-grossing companies with incredible loyalty programs and understanding how they reward/empower their customers.
The solution was a points-based rewards system (Groove Rewards) that would allow Greg to earn redeemable points to create that deal he has been looking for and feel more empowered to not only make a purchase but come back over and over again.
User flow development
With the navigation and rewards program created, it was time to start creating a few user flows and designs in order to test all of the research findings.
Completing competitive task analysis of other record stores step by step process from entry to checkout helped immensely in developing user flows that fit a certain standard.
The two final user flows focused on signing up for Groove Rewards and then finding a specific album to buy and applying the rewards balance at checkout
Moving into the design
With the flows completed, it was time to bring them to life! The collective research findings along with design standards and competitor inspiration helped to create a clean, intuitive and action provoking experience for Greg that draws his attention and encourages making a purchase.
Home page sketch + mid-fi wireframe
Rewards page sketch + mid-fi wireframe
Mid-Fi Prototype
Usability testing results
The response was overall very positive with 100% completing the scenario and an average System Usability Scale (SUS) score of 95.8 / 100.
-
They loved the loyalty program and all felt immediately empowered to make a purchases
-
All users felt it was very simple and intuitive to navigate
-
The design felt very modern (even in mid-fi)
-
The website told them everything they wanted to know - with multiple ways to get there
Key takeaways & iterations
Missed call-to-action button
One interesting thing that happened was all of the testers missing the large call to action button at the top of the homepage to 'shop now'.
Based on tester feedback, this appeared to be due to the prototype being in grayscale.
To be sure I also decided to start building out a design system so the homepage could be moved into high-fidelity to more accurately check the button placement and color.
To check font types + sizes, colors, layout, etc... it was important to move the homepage to high-fidelity to start honing in on the style guide.
Pulling design inspiration from the actual store
When picking colors, fonts, and overall aesthetic, I took inspiration from Dusty Groove's store, both inside and out. The red building and red accents throughout the store add a stunning pop of color against the light maple wood tones and bricks. By pulling inspiration from the store itself, it allows the customer to have an experience, and not just to go shop on the website.
The Hi-Fi Prototype
Header font size and spacing
The second iteration was to use a slightly larger font and add more space between the header buttons. This would create more clarity and visibility as all of the users avoided or missed both the GROOVE REWARDS and SHOP buttons in testing.
What should happen next?
As a next step, I recommend building out the rest of the prototype with full color and images to continue to interject the story of Dusty Groove throughout the entire design as it is an integral part of gaining and maintaining a loyal customer base.
This will also help to make the Call To Action buttons more prominent and focused by using a color scheme created from the in-store shopping experience.
Continue building out hi-fi
Groove Rewards info page ready to be moved to Hi-Fi
The current drop-down search bar
Iterate on search function
It is also a high priority to look into more options for the search function on the home page since all users requested a permanent search bar instead of it only being in the navigation nar or on the vinyl page.
With these changes, we could run another round of usability tests and see if we can improve our already stellar results even more!
