The biggest little stationery shop—a UX case study
--
Re-invigorating the online stationery store experience
This was a 1-week conceptual project completed while studying UX design at General Assembly, London.
Take Note is a stationery store which wants to expand its offering online but keep its ‘small shop’ appeal and great customer service reputation. The store focuses on hand-picked quality over quantity and a highly-curated inventory. I applied UX methods to develop a mid-fidelity prototype of their online store with the aim to set them apart from their competitors.
The Challenge
After conducting some initial market research I discovered that:
only 9.7% of participants surveyed in the 2016 Verdict Retail report on the UK stationery market shop for stationery online.
Why do 92.3% of UK stationery shoppers choose the in-store experience over the online experience and how was the Take Note site going to take advantage of the failings of its competitors?
Competitor Research
A quadrant analysis of the in-store vs online experience of competitors suggested a trend. On competitor e-commerce sites there was a shift away from content and knowledge: the expertise and atmosphere of the in-store experience was being diluted online.
I wanted to investigate this trend further. I visited stationery stores to see what the in-store experience was offering customers that the online space was not.
Moleskine in Liverpool Street Station was the first port of call. Stock was beautifully organised and displayed in real-life situations, prices were not visible, you were never pressured into making purchases and you could test out products.
Online, Moleskine was quite overwhelming — the character of the store was gone and pushing sales seemed to be much more of a priority.
At London Graphic Centre in Covent Garden, store staff were extremely knowledgeable and there were loads of ways to try out products, plus you could also attend workshops and events run by creative influencers.
“I always speak to the customer service team in store and I always buy more than I planned on doing”
Lia—London Graphic Centre customer
The online experience was starkly different. It was only when you scrolled right to the bottom of the homepage that you could see anything about store events or read creative articles.
This research seemed to confirm the trend identified by the preliminary research. I was keen to ensure that Take Note’s e-commerce site was full of the delights and appeal of shopping in store.
User Research
Take Note had provided a persona they had identified as a key customer they wanted to appeal to online.
I interviewed Amelie who was startlingly similar to the persona provided. This conversation offered a wealth of ideas about how to differentiate the Take Note site.
Amelie rarely shops online because she hates the pushy and rushed experience and, as a highly aesthetic and creative individual, she wants something special and editorial from her browsing experience.
Sites she does visit offer her a lot of opportunity to explore without pressure, there is a wealth of visual inspiration and lots of space to breathe.
Every decision on functionality and layout would be made with Amelie’s preferences in mind to encourage more creatives to visit the store.
Card Sorting
Amelie is extremely layout-oriented and cares deeply about how her environment is structured so having a good Information Architecture was crucial to Take Note’s appeal.
I took 75 of Take Note’s biggest products and asked people to organise these into categories they felt matched best to the products. I then worked with a group to consolidate our findings and discover potential trends.
However, during this process I realised that the categories selected were very generic. I returned to my competitor analysis to see how other stationery brands organised their Information Architecture.
Each site’s navigation appeared tailored specifically to their target users. I returned to my primary user, Amelie and asked her to do an open card sort with the same 75 products.
Her personality shone through in the categorisations. I cross-checked these categories in a closed sort with similar users and made small changes to some names and placements in order to satisfy a wider audience. I witnessed positive reactions from users who liked the way the information was now organised.
Site structure
Site Map
I put together a site map for the store to ensure both Take Note’s requests from a business perspective and Amelie’s user needs were met throughout the site. I made sure there were only a maximum of 4 sub-categories in drop-downs so that Amelie would never feel overwhelmed, providing filtering options on category pages to aid customisation.
User Flows
Using the scenario of finding a journal and notecards for a gift for a friend I created a user flow which included 3 stages:
- Locate journal and add to cart
- Use search or a chatbot to find notecards
- Checkout
Solutions
Sketches
I sketched out wireframes for the 3 stages I’d identified and developed them into an interactive prototype.
Testing
During 4 rounds of testing I developed the Take Note site, moving from low to mid fidelity.
Sign up
Fast sign up and plugging a loyalty scheme were important business goals for Take Note
- In the low-fidelity prototype hierarchy within sign up was unclear for testers
- In the mid-fidelity prototype sign up was incentivised with a 10% discount and sign in prioritised on the page so users could see the benefits of their loyalty
Customer service
- Users found the chatbot hard to locate at low fidelity
- In the mid-fidelity prototype it was adapted to look like a sticky note which was a sweet and non-invasive visual Amelie would enjoy
Checkout
Amelie hates the transactional experience online so checking out needed to be as painless as possible
- I was worried my personal preferences were getting in the way of the checkout process design
- My suspicions were correct—it turned out that including a progress bar at the top of the page during checkout was much more popular amongst users than my own idea of the page scrolling down with you as you completed each step
The Outcome
Check out the video below.
- Take Note now had an editorial layout
- Prices were only displayed on hover until landing on product pages
- There were articles to read and plenty of inspiration
- Videos of the product in action were available as an alternative to testing out products in store
- The chatbot offered fast and non-intrusive advice
Next Steps
- Testing the chatbot feature further
- Exploring other flows within the website to ensure they are also matched to Amelie’s and Take Note’s needs
Learnings
- If you understand your primary user then a lot of your strategic work is taken care of for you
- Testing helps remove personal biases from projects
- Testing little and often provides invaluable insights that save you a lot of time in the long run
