Improving the E-commerce Experience
“When I'm Browsing, I don't see words as much as visuals. I have a feel for where things should be.” - Stephanie
Village Books wants an improved e-commerce website. They want to showcase their products, emphasize curated selections of hand-picked books, and maintain their brand as the beloved local bookstore. In this UX student concept project, I was tasked with developing these improvements.
OVERVIEW
Project Duration: 2 weeks, May 2022
Responsibilities: UX/UI Design, Research
Tools: Surveys, Interviews, Sketches, Figma, Photoshop
PROCESS
Discover: Task Analysis, Surveys, Interviews, Competitive and Comparative Analysis
Define: Affinity Map, Persona and Problem Definition, Current User Journey and Flow, How Might We Statements
Develop: Solutions, Site Map Organization, Proposed User Flow, Sketches, Wireframe, Testing
Deliver: Look & Feel, Hi-Fi Prototype in Desktop and Mobile, Insights
So, How's Your Website Going?
I conducted a task analysis and surveys with book lovers and discovered that they love the brick and mortar book store experience, but found the VillageBooks.com experience to be significantly lacking.
What About the Competition?
With initial data in mind, I conducted Competitive research on other local bookstores.
Who Does E-Commerce Well?
Looking further afield for companies that are doing online retail successfully, I discovered some key insights that help improve customer experience.
What do Book Lovers Want?
Going more in-depth with Interviews, I was able to define more clearly the needs and desires of book shoppers.
Paige is Here to Help
I created a persona to capture the needs, desires and story of our larger group of book shoppers, to keep in mind as I began ideation and design.
A Typical Interaction
Mapping out a common experience browsing at VillageBooks.com, we can see frustrations increase around the home page, browsing and checkout.
We Have a Problem
After defining our problem statement, I created some ‘how might we’ statements to kick off the creative process and drew up some sketches.
Designing a Better User Experience
Card sorting helped us improve the site map organization, and creating a user flow with a few improvements help to make users’ experience easier.
Sketch, Prototype, Test, Refine...
After sketching and building an initial wireframe, I recruited a few users to help test it out. Refinements were needed in some of the wording and details.
A New Look and Feel
Capturing the cozy brick and wood tones of the physical space, while providing a consistent color palette and improved font choice.
Now for the Prototype
I built a high fidelity prototype with some basic functionality and improvements from the testing feedback.
Insights & Takeaways
Thanks to the rise in online browsing and shopping, users have a shared expectation around e-commerce! It’s well defined and easy to find, but not everyone has implemented it.
Reorganizing a web page requires a careful consideration of priorities and more than a little determination in reducing, editing and filing away less important information.
Often times, a few things have to get out of the way for your content to shine.