UX/UI Designer
The Basics
Objective
Discover the pain points of the current website's e-commerce process and create a responsive solution to improve the user experience.
Role: UX/UI Designer
Deliverables:
-
Business Research Synthesis
-
Customer Review Analysis
-
C & C Analysis
-
Affinity Mapping
-
Persona Development
-
Problem Statement
-
Site Map
-
Low Fidelity Wireframes
-
A/B Testing
-
Usability Testing
-
High Fidelity Wireframes
-
Sketching
Duration: 2 Week Sprint
Project Overview
Business Research: What is the Alabama Booksmith?
The Alabama Booksmith is a small bookstore located in Birmingham, Alabama that is owned by Jake Reiss.
​
The shop was opened in 1990. The bookstore has a website already, but the e-commerce experience could benefit from a redesign.
What's the Current Problem?
In order to discover what the current problem is on the active website, I created a plus/delta system.
Notable Pain Points
I narrowed down the list to focus on 4 key pain points.
Examples of the Pain Points
Competitive Research
Up next, I conducted a competitive analysis exercise to learn more about how the bookstore stacks up against competitors.
​
This confirmed my initial theory that Barnes and Noble offers more services/options for customers. ​
Customer Research
I wanted to find out what current customers of the bookstore think about the shop for comparison so I checked out their Yelp and Google reviews.
Customers used words like hidden treasure, magical, and charming to describe their experience visiting the bookstore.
This taught me that the bookstore's business model is clearly different than average. They aren't trying to be Barnes & Noble. It's more about the personal mom-and-pop feeling you get when you enter the store.
Problem Statement & Target User
Now that I had learned about the bookstore's customers I began to form a problem statement centered around our persona I'll call Will.
​
Problem Statement
Will, the careful critic needs a way to discover new books because he hasn't been satisfied with the quality of his literature purchases in the past.
​
How Might We
​
-
HMW make it easy for Will to find book reviews
-
HMW help Will discover new authors
-
HMW assist Will with finding unique books
Card Sorting
I wanted to learn about how users would group the bookstore's inventory into categories so I conducted an open card sorting exercise.
​
I was surprised to see all participants used general categories for books instead of sorting them by genre or type. My takeaway from that was understanding the importance of simplicity in navigation menus.
Site Map
I created a concept site map based on the findings from the card sort tests and my business research. ​The goal of this was to ideate on the information architecture of the responsive website.
​
I created a large category simply called "books" as a menu item for easy visibility.
Ideation/Sketching
Started to sketch out a few concepts for a responsive website/mobile experience.
​
I wanted to ensure unique categories like Author Videos and The First Editions Club were emphasized in the menu.
Low-Fidelity Wireframes
Next, I converted my sketch ideas into digital wireframes. ​I followed that up by creating an interactive prototype.
​
-
Used Green CTA's to guide the user's eyes
-
Included an A/B Test to compare 2 home page designs
Usability Testing
I conducted 3 Usability tests for my wireframe prototype
​
Key Takeaways were as follows:
Revised Wireframes
I used the feedback from the usability test to improve my wireframes.
​
-
Added new navigation options on the book search and product pages
-
Added an option to write your own book review
-
Ditched the green CTA in favor of lighter more scholarly colors
Final Solution
As seen on mobile
As seen on desktop
Next Steps
For the next sprint I'd suggest the following improvements:​
​
Adding tags to book covers to indicate "first editions" or "30% off"
This would help users find noteworthy deals faster.
​
Splitting the billing & shipping sections during the checkout process
Creating separate billing/shipping sections will make the checkout process clearer.
​
Adding a staff picks section curated by the bookstore owner
Customers at this bookstore care a lot about the owner's recommendations based on their Yelp/Google reviews.
What have I learned from this project?
Research is Crucial
​
If I didn't research the current customer reviews for the bookstore thoroughly then I would have likely designed a solution that didn't fit the business' goals. It's so important to toss our preconceived assumptions out the door as UX Designers.
​
Be Intentional With Design
​
When working on a responsive design solution it's important to consider the constraints of mobile users compared to desktop users. For example, I considered how the primary navigation system would differ. For the mobile experience, I chose to utilize a hamburger menu instead of a traditional header based on the comparative analysis I conducted. I believe that has made the experience more thoughtful for users viewing the website on alternate devices.