Case Study: Local E-Commerce Website
Project Management: Agile
For the 2nd group project we focused on a local business. My group decided to look deeper into a local record store in the DC area. With this project we got a chance to work with Miro to create our infographics, and with Trello for project management using the Kanban method. Kanban is a visual management method that follows the Agile philosophy of project management that separates tasks into lists. For our project, the lists we used were To Do, Doing, Done, and Archived, which really helped up stay on track.
Research
After deciding on an independently opened and operated record store in the Washington, D.C. area, we took a look at their website and social media in order to get a feel of who they were as a business. We also drafted an interview guide for both the stakeholder and users. We took a look at their website and did a deep dive into their site’s navigation to complete a site audit before moving on to business and competitive analysis. Together, we started on the brand and business analysis by completing a feature comparison, brand comparison, and marketing positioning map to determine what features could be implemented to make the website both functional as an e-commerce site, and more competitive against its local and national peers.
While working on the brand and feature comparison, we looked at smaller, niche stores and larger chains. In total, we researched 7 other record stores.
The User Interview Guide focused on questions surrounding the functionality and navigation of the record store’s website. From these interviews, we discovered that the main blocker was that they could not view the website’s inventory without requesting to follow the stakeholder’s Instagram page. This was because instead of having an actual inventory page, the website had “Just In/Events” page comprised of a list of links which would direct the customer to a corresponding Instagram post of a new record that was added to the inventory. However, when the customer on the website clicked the link, they were sent to a private Instagram page with the company’s name and the stakeholders profile photo, thus, not allowing them to see the actual item being added to the inventory.
Define
Taking the data points from interviews, we created the following groups:
(1) Demographic
(2)Habits
(3)Site Navigation
(4)Site Functionality
Within these groups, a few pain points became clear:
(1) Not be able to make a purchase online
(2) Inventory was not viewable
(3)Product was unclear
In synthesizing the data from the Affinity Diagram, we were able to develop an Empathy Map of our user to determine what we now know about our user, what their needs are, and how we can define our solution for those problems.
For the users of our website, this information included:
PAINS:
(1) Difficulty navigating the website
(2) Difficulty purchasing from the website
(3)Frustration with inventory access
GAINS:
(1) Hope to purchase
(2) Need to see inventory
User Personas
Using qualitative and quantitative data from our research we were able to develop a user persona of Artistic Andrew for our website. Artistic Andrew, Drew for short, loves to shop for unique and vintage records that he can add to his collection. He is a photographer and substitute teacher who wants to support local businesses in his hometown, but is unable to shop in person due to Covid-19 restrictions. Because of this, he relies heavily on online shopping.
Next we developed Andrew’s User Journey Map to highlight opportunities for design features for the website. Andrew does not have a good experience with the site because he is unable to determine how he can purchase online. Consequently, he abandons the idea of shopping on the website, and opts for shopping on a competitors website. Because of this, the design feature we focused on was creating a cohesive online inventory page for easy purchase.
Problem Statement: Our company needs a website that will allow users to quickly purchase records online.
3 HMWs for potential features:
(1) How might we inform customers of their purchasing options?
(2) How might we develop a website that targets both older long term record customers, and intrigue new customers?
(3) How might we increase website usage through accessibility of online purchase options, inventory, and blog/articles?
Ideation
The next step was to ideate features and solutions, then to determine the minimal viable product. After ideating on possible features, which included filtering options while searching through the inventory and the ability to preview records before purchasing, we used the MoSCoW method to begin prioritizing these features. Our goal was to improve site navigation, declutter broken links, and develop an inventory page for online shopping with a filtering option.
We developed the following User Story:
As a frequent record purchaser, I want to purchase rare and collectible vinyl records online so that I don’t have to rely solely on in-store shopping.
Using this user story, we were able to understand the need for having an inventory page from the user’s perspective.
We then developed a minimal viable product statement.
The MVP Statement:
The minimum viable product will incorporate an inventory page that has updated products for immediate purchase. This content will invoke records and their track lists.
Information Architecture
We defined the sitemap using results from card sorting and information gathered during interviews. The sitemap we created was reminiscent of the websites current sit-map; however, we included the Shop, Account, and Cart page to allow for online purchases.
Using the site-map, we developed a “happy path” user flow that we would incorporate into wireframe prototype development to test the usability of our new inventory page.
Prototyping and Testing
Low-fi Prototype
Our goal was to test the user flow for online purchasing using the sign in and filter features. We used Maze, an online usability testing platform, to help us determine the usability of our prototype.
Using the Maze data we collected from 5 testers, we determined that there were 2 screens that needed revisions:
(1) Home Page
(2) Inventory Page
The Home Page
According to the data, the average misclick rate was 40%, and the average screen viewing time was 9.7 seconds. The planned revision for this screen was to make the call to action Sign In button more obvious.
The Inventory Page
According to the data for the Inventory page, the average misclick rate was also 40%, but the average screen viewing time was 9.3 seconds. We also noticed from the heatmap, generated by Maze, that it was unclear how users were supposed to complete that task, which was to purchase an online rock album. We also realized that the filtering option was not clickable, and users were expecting to be able to scroll down the page to view any other options.
With this data we revised both the user flow chart, and the prototype. Some of the changes we implemented were:
- Adding images for genre selections
- Enabling clickable filter options on Inventory page
- Adding vertical scroll to Inventory and Filtered Results page
Mid-fi Prototype
To test the mid-fi prototype we conducted Maze tests as well as interviews with individuals who purchase music and records online. Our goal was to improve clickable filtering option on the Rock Inventory page, and product selection on Search Results page. Using Maze data we collected from 12 users, and from 3 interviews, we determined that the changes we implemented on the Home Page screen was successful, but 2 screens needed to be modified:
(1) The Rock Inventory Page
(2) Filtered Results Page.
On the Home Page, users had no problem locating the Sign In call to action button, which was reflected in the 0% misclick rate.
The Rock Inventory Page
The purpose of the Rock Inventory page was to display what the current inventory was for rock records. The task was for testers to locate a rock album that was available for online purchase, and worth $45. The goal was for users to select “Online” from the filter options to show what was available for online purchase, then choose from the filtered options. There was a 100% misclick rate and 30 second screen viewing time, with 28.57% of testers getting lost during the task. Upon reflection, we realized that this could have been caused by how the inventory options were displayed. The first 3 record options were all worth $45. Testers saw this and clicked on all 3 of those options, without considering if they were also available for online purchase, making the filtering option an afterthought. Users stated:
“I was stuck when trying to select the $45 Rock album. I could not find the link to click.”
“It would not let me add the $45 rock album to my cart.”
Filtered Results Page
The second screen that needed revision was the Filtered Results page. 80% of testers did not click the desired touchpoint, 40% of testers got lost during the task, and the average screen viewing time was 23.7 seconds. Through interviews we learned that some testers experienced a glitch with the prototype within the Maze platform which double the screens making it difficult select the $45 rock album. However, some testers who did not experience any glitching still deviated from the path and clicked other options on the screen such as online, different music genres, and rock again.
Next Steps
If we were to continue perfecting our prototype, we would consider the following:
- Clarifying directions in MAZE to eliminate possible confusion for testers
- Add more competitive features, such as “DJ Classes”
Takeaways
- Don’t only rely on Maze for usability data, conduct user interviews as well
- Don’t get discouraged by the data, iterate, test, iterate, test, then iterate and test some more.
- Adding and implementing the Sign-in feature was successful
- Based on feedback from testers, the filter option works, but the way the products were displayed on the page contributed to tester confusion.
All in all, this project gave me quality hands on experience with e-commerce and website architecture. My favorite part was tinkering with the user flow…so many options and deviations. Loved it.
Until Next Time…
