My Role: UX Researcher and Designer | Duration: 1.5 Weeks | Project Status: Complete
Project Overview
This project was about a local ecommerce business experience and the intersection of user and business needs on the digital web. I chose PaperbackExchange.com from a list of small businesses to serve as my client for the project.
Scope of Work
PaperbackExchange.com has been the city’s neighborhood store-type for as long as they can remember and is currently not updated. They’re proud to be a part of their dynamic community. Their customers are varied — but the one thing almost all have in common is an interest in shopping local. The business model is based on customer service, reasonable pricing, and keeping it local. They employ local staff and support the community they serve. They source from a variety of suppliers so they’re able to offer their customers the best range of products at the most competitive prices. My goal was to design the e-commerce component of their website, and I also designed a Personal Shopper Appointment feature to enhance Paperback Exchange’s trade-in program.
Process
I utilized competitive and comparative analysis based on three websites each, card sorting, created a user persona based on one of the provided Target User Profiles to gain insight into my key users, and I also created a journey map based on the pain points of my users. Using my research, I created a sitemap, generated digital users flows for 2 key tasks, generated sketches for both mobile and desktop, created a mid-fidelity mobile prototype, and created an interactive high-fidelity clickable prototype that I then used to conduct usability testing with 5 users. Using the results of my usability testing, I generated a first iteration with suggested improvements.
RESEARCH PHASE (Discover + Define)
Goal of Research
My hypothesis was that with the increased variety of online vendors available, more users would want to make purchases with businesses that had streamlined checkout processes. I came up with the following assumptions:
Users are more likely to abandon online shopping carts if there are too many steps to checkout
Users may want to utilize gift options for their purchases
Users don’t always want to create profiles to checkout
My initial problem statement was that users need a more efficient method to complete online purchases. I wondered: how might I make the online shopping process easier by adding an e-commerce component that simplifies the selection and checkout process?
Methodology
In lieu of conducting user interviews, I was given a variety of target users to choose from to base my user persona on. I chose the Gift Giver, a user with the following qualities:
Recommendations were most important to them
Makes purchase decisions quickly
Buys gifts at the last minute
Wants a gift that fits their giftee’s age, interests, and other meaningful characteristics
Looks for gifts within a particular price range
Considers gift wrapping and shipping options
Doesn’t read descriptions or reviews
Competitive & Comparative Analysis
Competitive Analysis
To gauge some of Paperback Exchange’s competitor’s website features, I completed competitive analysis for Amazon.com, BarnesandNoble.com, and Thriftbooks.com. I used the I evaluated the following features:
Description & review areas: Amazon’s website was full of information, Barnes & Noble had an overview section with reviews low on the page, and Thriftbooks also had an overview section with reviews low on the page
Guest Checkout: This feature was unavailable on Amazon and Thriftbooks’ website, whereas it was available on Barnes & Noble’s site
Gift Options: Amazon and Barnes & Noble had gift options available, but Thriftbooks didn’t
Comparative Analysis
I also completed comparative analysis of eBay.com, freelibrary.org (the official website for the Free Library of Philadelphia), and Etsy.com’s website elements to gauge how some comparators utilized common website elements:
Search bar: It was at the top of eBay and Etsy’s site, but it was in the upper left-hand corner on the Free Library of Philadelphia’s site
Input prompt: There wasn’t one found on the Free Library of Philadelphia’s homepage, but there were input prompts available on eBay and Etsy’s homepages
Breadcrumbs: They were found at the top of pages on eBay.com and freelibrary.org, but they weren’t found on Etsy.com.
The website for Buffalo Exchange, a new and used clothing shop in Philadelphia, PA, also proved to be helpful. They had a calendar picker for customers who wanted to make a Trade Appointment to bring clothing to the store to be appraised for being resold. Since Paperback Exchange has a trade program and discount, I thought it might be helpful for them if I added a scheduling feature for a Personal Shopper Service to accommodate the needs of busy shoppers who might not have the time to choose a personalized, last-minute gift for a loved one.
Persona
Meet Lael
Using the details from the Gift Giver target user profile I chose, I created Lael Lately, a 28-year-old Computer Engineer from Philadelphia, PA who often works so hard that she occasionally forgets to purchase gifts for loved ones until the last minute. Despite her tendency to shop for gifts at the last minute, it’s still important to her to be able to purchase personalized, meaningful gifts, make her purchases quickly, and one of her values is supporting local businesses as often as possible.
Journey Map
Since recommendations are important to her, she’d ask her friends for personal recommendations for local bookstores. Next, she’d look online to find out if those bookstores had websites. As a new customer with very little time to spare or waste, she’d find it frustrating to have to learn how to navigate a business website that’s new to her, much less figure out how to find certain items. She also wouldn’t take the time to read reviews, so the less she’d have to encounter that section, the better. To add insult to injury, since she wouldn’t want to have to create an account to checkout, she might end up abandoning her cart if she was forced to take the time to create an account before making a purchase.
Problem Statement & How Might We’s…
The problem statement I arrived at was that Lael needs a way to shop locally for books online so she can purchase meaningful gifts at the last minute. By focusing on Lael’s needs, I focused on the following how might we’s:
How might we facilitate item recommendations without using a review section? How might we reduce the amount of time the checkout process takes? How might we be able to have someone do the shopping for Lael, yet still have a personal touch?
Card Sorting
I was provided a spreadsheet listing dozens of bookstore-related merchandise items, and I used OptimalWorkshop to generate digital cards, each with the name of one of the products written on them. Next, I invited users on social media and within my personal networks to sort the cards into the groups that they thought made the most sense to them. While there were a number of patterns that emerged, I noticed that some of the groupings slightly shifted when I adjusted the number of users within subsets. The purpose of this exercise was to help me construct a sitemap for PaperbackExchange.com.
Sitemap
Basic sitemap designed for PaperbackExchange.com
When I began fleshing out a sitemap for PaperbackExchange.com, I kept it relatively simple since I planned on implementing a “Recommendations” carousel on the homepage, and I also experimented with placing the Personal Shopper Service page under different tabs.
User Flows
User flow for the checkout feature
Since Lael wanted a faster checkout experience that also allowed her to select gift options, I created a guest checkout feature flow for PaperbackExchange.com. I also implemented the ability for her to choose gift wrapping and other gift giving-related options during the checkout process.
User flow for Personal Shopper Service
In the even that Lael couldn’t (or didn’t want to) take the time to navigate the website to find the perfect gift, I created a Personal Shopper Service flow and feature that would allow Lael to book an appointment with a personal shopper who, after a short conversation with Lael, could use their personal knowledge of the store’s inventory to purchase, gift-wrap, and ship the perfect gift on Lael’s behalf.
Design Studio: Sketching + Concepting
I began this phase of design by repeatedly reviewing Paperback Exchange’s website and brainstorming design ideas for how the changes could be implemented. Even though I wanted to begin with digital sketches, I discovered that I work faster and more efficiently by starting with pen and paper. Working in an analogue fashion enabled me to spread my designs out, and I also spent less time obsessing over the straightness of lines and more time on the placement of different elements and features.
A few desktop sketches
A few mobile sketches
Mid-fidelity Prototype (Mobile)
Even though I only had to create mid-fidelity wireframes for the mobile version of the website, I found it beneficial to go a step further and create a mid-fi prototype to test the page and flow of the experience. As a result, it made designing, wireframing, and prototyping the high-fidelity version much easier.
High-Fidelity Desktop Wireframes and Prototype
While designing my first high-fidelity desktop wireframes and prototype, I experienced challenges with implementing features like horizontal and vertical scrolling in Figma, but I was able to utilize instructor assistant Sean Forsythe’s tips and guidance to successfully get those basic features to work. I came up with the idea of having a scrolling Recommendations carousel for the top of the homepage, but it proved to show its limitations during my usability testing.
User Testing (What I tested, what I learned)
I recruited five users to test my prototype using the following plan:
Purpose: My purpose is to test the checkout process on a new e-commerce store on PaperbackExchange.com’s website, as well as a Personal Shopper Appointment scheduling feature on the site.
Goal: Users will be able to add a gardening book to their shopping cart and check out as a guest, as well as book a Personal Shopper Appointment for Friday, December 19. 2019 at 11am within 15 minutes.
Logistics: The test will be conducted via moderated remote tests.
Persona: 28, Philadelphia, PA, Software Engineer
Tasks:
Find the gardening panel in the “recommendations” section
· Add a gardening book to your shopping cart, mark it as a gift, and check out as a guest
Schedule a Personal Shopper Appointment for Friday, December 19, 2019 at 11am
Metrics: Success rate, time it takes to complete each task, number of errors, users’ likes, users’ dislikes, and users’ questions
I also created a script that I could use as a guide.
Findings + Themes + Insights + Takeaways Only two out of five users successfully completed all of the tasks. While observing them doing the tasks and listening to their comments, I discovered some of the prototype limitations that contributed to the low success rate of the first task; the arrow buttons to scroll on the Recommendations carousel weren’t functional, the carousel doesn’t automatically scroll (like a slideshow), and the “Gift Idea” tab on the homepage lit up for the second task (which confused users since the “gardening” image in the Recommendations carousel slide wasn’t immediately visible). I also realized that I didn’t initially explain the gift part of the checkout process — tester error; I also didn’t give users the scenario that might contextualize the tasks they were given. Earlier interviews helped me figure out how to reframe my tasks (“gardening panel” instead of “gardening tab”), and it also made me question some of my other instructions (should I say “find the slide?”). Here were some key points I pulled out: • “Let me try a little harder.” • Personal shopper feature— “I immediately forgot where I found it (I’d look under ‘Contact Us’)” • Reminds them of Nordstrom's (personal shopping feature) • Multiple users thought their errors were their fault, and two of the users stumbled upon the third task while trying to figure out how to navigate the site to complete the first task • Common recommendations were to place “Personal Shopper Services” under “Contact Us” or “About Us”, and to place “Recommendations” under “Gift Ideas”
First Design Iteration
For my first design iteration post-usability testing, user feedback guided me to change the language on the banner above the Recommendations carousel to more clearly instruct users to swipe the images below. I also added dots at the bottom of the carousel to guide the users to swipe or slide the images to find further recommendation panels since it’s a common element used at the bottom of slideshows and carousels on websites. I also removed the “Continue” button from the prepopulated cart page; I thought that it might confuse people testing the prototype since it looked so similar to the prior page.
Recommendations + Implementation + Next Steps
The following are my next steps:
Consider moving “Personal Shopper” page under “Contact Us”
Consider adjusting carousel buttons to be more prominent
Add “Recommended” carousel to “Gift Ideas” page
Reframe tasks in the context of the persona’s scenario during usability testing
Conduct more testing after further changes to determine how effective the changes are