The biggest little stationery shop—a UX case study

Take Note

The Challenge

only 9.7% of participants surveyed in the 2016 Verdict Retail report on the UK stationery market shop for stationery online.

Competitor Research

Quadrant analysis
Moleskine—in store vs online
London Graphic Centre—in store vs online

User Research

Meet Amelie
Amelie’s inspiration sites

Card Sorting

Primary navigation bar comparison
Amelie’s card sort

Site structure

Site Map

Site map covering Take Note’s business needs and Amelie’s needs

User Flows

  1. Locate journal and add to cart
  2. Use search or a chatbot to find notecards
  3. Checkout
User flow

Solutions

Sketches

Early sketches—Take Note wireframes

Testing

Sign up flow changes

Sign up

  • 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
Chatbot changes

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
Initial checkout

Checkout

  • I was worried my personal preferences were getting in the way of the checkout process design
Final checkout process
  • 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

  • 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
Take Note mid-fidelity prototype

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

--

--

--

Product Designer | Developer | www.louisehill.tech

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Thoughts on Design Thinking with SAP Leonardo

Project 3 | 51–261

User Journey Mapping

6 tips for facilitation User story mapping workshop

UI/UX Design: Project Ecosystems

Linting meets Design

The user interface of Sketch Assistants showing violations.

Project 1: Spatial Experiences

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Louise Hill

Louise Hill

Product Designer | Developer | www.louisehill.tech

More from Medium

Typography in UX & Business

Culture & Heritage

Demystifying UX Design

Design Thinking Challenge: Citymapper