The Future Of Retail Shopping Experiences: A UX Case Study
By Avinash Pillai
Prologue: Project Background
Guitar Central, A legacy guitar store in India, wants to create a website for their guitar store. Guitar Central has a proud heritage of being the “go-to place” for the new born guitarist and the veteran alike.
Guitar Central CEO’s vision has always been to create a safe haven for the aspiring rockstar in all of us. A place where young novices can explore and lose themselves in the world of guitars. A place where intermediate to veteran aficionados can meet up share their love for the instrument and the craft. Polish their skills in community jam sessions , guitar battles and gigs. A community, a reprieve from the tedium of everyday living.
A safe space for browsing a wide variety of instruments from top brands and artists. Guided by professional technicians and audiophiles a civilian can enter a guitar central store empty handed and walk out with the perfect instrument and a renewed understanding of the guitar. This is the “Guitar Central Guarantee”.
Guitar Central is not a guitar store. It is a community of guitar enthusiasts who want to inspire guitarists and help them make purchase decisions that bring supreme value for the consumer. A value that lasts a lifetime.
The Challenge: Guitar Central wants to build a responsive website that will help them take this superior shopping experience online.
My Role: Complete end-to-end UX-UI Design.
Project Type: Sharpen Prompt for Google UX Career Certificate: Course# 6
Upon receiving the prompt, I was cognizant of its ambiguity. I proceeded to distill the prompt into tangible sub-problems. This would form the basis of my research goals:
1. How can we create a solution that is tangible and relevant to the current retail environment?
2. How will the solution create value for the business owners and users alike?
3. What are the pillars of a seamless cross-platform guitar shopping experience?
4. How do we create synergies between the UX of the website and existing branding /service design of the guitar store?
MY DESIGN PROCESS
RESEARCH PHASE
Methodology:
- Secondary Research & Work Experience: Identify retail business trends to leverage.
- Primary Research: User Interviews & Competitive Benchmarking
Secondary Research
My experience in sales development and management in the beauty and cosmetics industry made me privy to the upcoming trends in the retail shopping space. This formed the basis of my secondary research. The secondary research was done to supplement my understanding of these trends to build a foundation for our primary research .
Basis: 86% of customers regularly channel hop while shopping for things. There are customers who literally browse and shop for products online , while waiting in the queue at a retail store.
The following section will detail key business trends I decided to leverage to define our problem statement.
Trend #1: According to Harvard Business Review, 73% of customers use multiple channels during their purchase journey.
Trend #2 : The State of Commerce Experience 2021 research shows that (44%) of B2C buyers and 58% of B2B buyers say that they always or often research a product online before going to a physical store. They go online while in the store and continue their research.
Trend # 3: The ability to buy anything online has increased greatly. Making it necessary for retailer across all industries to show their presence across all channels in order to create a customer touch point.
Insight: There is a need for a user experience that seamlessly transitions across all channels while keeping the customer experience a cohesive whole, this is called “Omni-channel commerce.”
Primary Research
I conducted preliminary user interviews with customers at a guitar store. The participant pool included users across the spectrum of guitar store customers i.e beginners , novice , intermediate to professional guitar players. This was followed by developing user personas.
Research Objective: Understand the goals and frustrations of users when shopping for guitars | Determine key steps of the user journey
Research Mode: Unstructured interviews
Age Range: 18- 44
User Personas:
At the end of the interviews user’s were asked to summarize their expectations and frustrations with present day existing guitar store website in 3–5 words. The words and phrases were then run through a word cloud generator to be sorted by relevance and the following trends emerged:
User expectations:
User frustrations:
DEFINE PHASE : Arriving at the Problem Statement
Q1. How might we create a responsive website that provides remote assistance and information to users?
Q2. How might we facilitate a seamless omni-channel experience allowing users to channel hop and shop for guitars and services at their convenience.
Q3. How might we integrate the online and offline shopping experience and build a synergistic eco-system?
To bring the shopping experience to the users and empower them to avail an equally gratifying, superior experience on and off the line.
IDEATION PHASE
With the problem carefully defined and the scope established I progressed into the ideation phase. The fun and games begin!!!
Sketching : The ideation phase began with a simple Crazy 8’s whiteboarding exercise:
By the end of the ideation phase. I had successfully finalized on some ideas that I would take forward and use as the base to start creating my website skeleton. Next step would be to put it all together in a sitemap.
Building the sitemap: A sitemap is a model of the website’s content.
I have found that the sitemap is never an absolute construct. Items are added, subtracted , tweaked and fleshed out on the sitemap throughout the design cycle.
Building a website is like planning a virtual city. A sitemap helps keep the big picture in mind as the design iteratively materializes in front of us.
DESIGN PHASE
Armed with a skeleton of the website it was finally time to start adding some designer flesh to those bones! My design process starts with some basic wireframing of the main pages. I might refer to my earlier design concepts from my ideation phase to get the creative juices flowing!
Wireframing:
As the goal is to create a responsive website , I create wireframes of the pages for at least 2–3 screen sizes at the same time. This helps me visualize how I want the page content to adapt to different screen sizes.
Secondly, as more frames are created, It helps me arrange, test out and tweak different user flows to arrive at an optimal flow for a particular task.
The objective of this step is to get out as many variations of frames on paper. This is followed by a systematic element by element review, where I finalize my favorite elements and put them together to create my final wireframes. These final frames are then digitized.
Design — Test — Iterate
With the final wireframes complete, a basic linked lo fidelity prototype was created to illustrate the flow. From here on out numerous usability studies were conducted with the lo-fi prototype.
Objective: Perfect the user flow and iterate on product features and specs with regular feedback from users.
Mode of test: Moderated and unmoderated usability studies ( as the prototype got iteratively better , I was able to shift to unmoderated usability studies as users needed lesser guidance navigating the prototype.
Prototype 1:
ITERATIVE TESTING PHASE: Usability Study
I conducted an early usability study with 5 participants. Participants were asked to navigate through the prototype of the website and perform certain tasks. The tasks were flashed to the users in the form of prompts. Participants were encouraged to think out loud as they worked through the prompts.
Research Goals:
- Determine ease of completion of key tasks on the eshop
- Identify bottlenecks in flow to simplify the journey
- Early feedback on content offered around guitar shopping
- What features will help better simulate in store instrument testing that allows users to make informed purchases.
Observation & Insight Generation;
I created a simple template to gather my observations and identify trends. Below is the template used for note taking :
Learnings from usability study
- Icon Labels are very important. What we perceive as obvious might not necessarily be obvious for our users. Thus standalone icons to depict certain actions can be misleading to users.
2. While it is common practice to embed a “Back to Home” link in the website logo. This was not common knowledge to all users.
3. Users want to move freely between channels during their purchase journey. Therefore, user flows must help facilitate seamless channel hopping wherever possible.
4. For Navigation to be seamless, we need to design ways to enable users to establish their current position in the website and the route they took to reach said position.
5. Users like to compare and contrast between different products before making their final decision. This involves opening multiple tabs and a certain degree of multi tasking. Which if a source of distraction and can contribute to drop offs.
6. Hence, the user experience must account for consumer behavior and facilitate easy access to information and comparison tools within its ecosystem , to avoid drop offs.
7. For Guitar websites users seek visual and auditory engagement to back up their purchase decisions.
Prototype 2: Sound Simulator Tool & Additional Cart Features
HIGH FIDELITY PROTOTYPE PHASE
After many iterations of changes and tweaking , once the user flow was robust and final, I proceeded to improve prototype fidelity. This involved selecting color palettes and adding high resolution assets, to enrich the user experience. Micro interactions were added in certain areas of the flow to punctuate the journey.
Desktop Prototype Highlights
Compare & Contrast Products:
Users can compare up to 3 products on the bases of specifications , prices and discounts any time during the shopping flow.
Guitars and Gear Pairing:
Users can run audio simulations of any guitar with popular amplifiers and effect pedals. Exactly like they would at the guitar store.
Checkout Flow:
Streamlined checkout flow gives users the option to have their purchases home delivered or picked up at store. This option can be individually set for each item in the cart.
Mobile version:
Closing Thoughts
This project prompt had a steep learning curve , specially since I was just starting out designing micro interactions and animations on adobe xd. This was something I have absolutely no experience with. All in all I had a lot of fun with it. And the experience of materializing abstract ideas and into real tangible design solutions has indeed been rewarding.
If there is one learning that I have been made aware of repeatedly during the course of this project it was, to continuously touch base with our users in every iteration till you have minimized the possibility of optimization and improvement to a virtual 20%. And this 20 % which could have been improved but was left out should have been due to design calls /compromises made during the design process.
Then you will know you have truly kept the user in the center of the design process.
