Case Study: Translating the IRL Experience to Digital — A Local Store Entering the eCommerce Realm
The Project
•Timeframe: 2 week sprint
•Team Members: Me, myself and I 🙋🏻♀️
•Tools: Figma, Zoom, Trello, Slack, pencils and paper
Completed: November 2021
Overview
In November 2021, I was passed a fictional situation by my instructors at GA. Papercraft, a small company based in Hammersmith who provide curated stationery products to local customers needed a way to translate their excellent customer service and small-shop appeal to the digital realm. Despite being a fictional company, Papercraft’s problem is one that businesses, large and small, can face without proper planning. An unappealing interface can make or break an eCommerce business. 😱
The Problem
Papercraft created their own website, but they saw a high churn rate resulting in lost sales and couldn’t work out why. With a successful in-person store/under-utilised online entity disparity, a complete redesign was requested with the following stipulations :
Goals
- Users: Purchase stationery from Papercraft online
- Business: Increase engagement and retention of online shoppers
- Product: Maintain the small shop appeal of Papercraft’s in-person presence
📢 What do we want? Notebooks! When do we want them? Now!! 📢
User Research
I conducted four user interviews remotely (via Zoom) to work out exactly what customers want in an eCommerce website. Based on the results of these rests I would eventually start to sketch and iterate on the eCommerce site’s design.
From the interviews, I made the following findings of the wants and needs of customers when shopping online:
- Users favour shopping online for convenience and will rarely venture into stores unless they want to touch and feel the items prior to purchase.
- Unfamiliar settings are off-putting to users.
- Users do not like highly commercialised websites that bombard them with notifications, offers, deals and emails.
- Users prefer human contact when rectifying issues and expect the same level of customer service online as they would in person.
I created a user persona for Papercraft’s shopper and started to think about the goals, needs and pain points of our user. Reader, meet our crafty best friend Phoebe!
After looking over the data gathered and ideating on how we can help Phoebe, I settled on a problem statement:
Phoebe wants the stationery supply shop that she uses to have a nimble, intuitive and straightforward interface so that she can select and purchase oil paints, but struggles with being put off by unfamiliar web interfaces and a lack of haptic experience when shopping online.
Competitive and Comparative Analysis 🕵🏻♀️
I looked at three other eCommerce entities for competitive/comparative analysis to assess why these competitors were successful.
The competitors I assessed were: Bluefish, Plain Paper and Ryman.
Based on the findings above and the research undertaken, I made the assumption that Phoebe, who is concerned with the touch and feel of products, would appreciate a Reviews section (however, all but Ryman actually included these, something I found very interesting based on the fact the majority of users like to read reviews before making purchases). Breadcrumbs, returns information, a search bar and a clearly set out terms and conditions section were necessary additions to the site, as well as an account creation page and sustainability info.
Let’s think of how we want the site to look…
I had been provided with an inventory and went about sorting the items into categories. To assign categories, I asked 7 people to engage in a card sort. The items then fell into the following categories on the site map:
Initial design iterations 👩🏻💻
The first wireframes were minimalistic — I just wanted to get a feel for how the overall layout of the website would look:
I asked for critique from a lead product designer whom I had become acquainted with over the past few weeks — we’ll call him Fred for anonymity. The initial feedback given was:
- Fred advised that it would be unnecessary to label the “bag” and “account” icons as users are familiar with the icons themselves.
- Fred recommended adding some filer text in the search bar to help the user get their search started.
The next iterations came, and again, further tests. With these further iterations, I tried to keep things as familiar as possible to competitors’ sites to keep our design in line with Jakob’s Law — a heuristic coined by Jakob Nielsen that outlines the fact users spend most of their time on other sites and prefer sites to function on a level of similarity.
A swatch section was incorporated into the item pages, along with a descriptive texture description, to meet Phoebe’s need of touch and feel on an online format.
Test Plan 💡
Goal? Users should be able to select an item, add to cart and check out within five minutes.
Test? Unmoderated, undertaken remotely via Zoom— users will be given instructions to select a Daler Rowney paint pack, add to cart and check out.
Hotel? Trivago.
A simplistic layout with clear areas for content, plus an easy-to-follow payment process screen.
Further tests were done on 5 participants. The findings I made were:
- User said that the basket could have a bigger clickable area
- User said everything was where they expected it to be but was thrown off by an extra breadcrumb in paint area
Fairly happy with two minor fixes, I moved onto the mid-fidelity prototype.
Colour-scheme wise, I wanted to incorporate the warm, homey feel Phoebe knew when she could visit Papercraft when she still lived in London.
A cosy, familiar autumn palette of oranges, greens and neutral nature-themed colours — something akin to the feeling of sitting by a warm fire and reading a book with a cup of tea. ☕️
Let’s take a look at the next iterations…
Further tests were conducted on four more users, and we got there guys — no further UX pains! Every single one of my users got to the end within give minutes, without mis-clicks (thanks to a larger clickable area on buttons, phew).
Bear in mind that this project was undertaken in my third week of UX bootcamp — my design skills were still not quite up to scratch and for some reason, I had a bizarre fascination with boxes. This was pointed out by my course instructor, along with feedback that spacing could be a little better.
Armed with this advice, I present to you the high fidelity iteration. (However, if you’re a UX designer, a dev, or any form of creative, you will know that the design is never finished!)
I ended up going for a slightly different colour palette and simplifying the layout to give a more professional feel — something easy to navigate. I also added tabs within the item description pages to give users more information without taking up much-needed space on the screen. The filters to the left of the gallery pages have been further refined, with larger spacing, and an additional “sort by” section has been added.
I enjoyed undertaking this project because eCommerce is something that fascinates me — turning an in-person experience into something digital is nothing short of amazing. With the recent introduction of the Metaverse, I’m now wondering how the future will look for eCommerce within the VR universe - I can’t wait to see, and I absolutely cannot wait to be a part of it. 🧠
Next Steps…
- Rebuild pages using auto-layout to get the website to a professional level of spacing.
- Further refine the imagery quality within the website to match that of competitors.
Thank you for reading!