Take Note Stationery
E-Commerce Project
Team: Individual Project
Design Sprint: 2 week Sprint
Role: Researcher | UI | UX Designer
Take Note are a local stationery shop located on Whitechapel high Street. They have been part of Aldgate’s dynamic community since 1982. They strongly believe in good quality products at reasonable prices, good customer Service and supporting the local community where possible and maintaining their small shop appeal.
The challenge:
To design an E-Commerce Solution to showcase their products while maintaining their small shop appeal. Focusing on hand picked quality over quantity.
I would need to deliver the following to fulfil the brief:
- Have clear ways of locating specific products
- Support a single page for each product which can be linked to directly
- Have an efficient way of purchasing one or more products
- Steer customers toward popular products.
Discover
Competitive Research
From looking at the main big brands Paperchase and Rymans, I could see they weren’t in direct competition for Take Note Stationery. They don’t really have that small shop appeal. Although Paperchase has a nice way of inspiring gift ideas and portrays an art craft feel to all their brands.
Choosing Keeping
Choosing Keeping and Present and Correct were two other stationery shops I visited. They are local and most definitely maintain that small shop feel with a personal touch. They give off the sense of supplying for community so I class them to be Take Notes direct competitors.
Present and Correct
- Their websites are very minimal and easy to navigate.
- Their products are handpicked
- All the pricing labels are handwritten for that extra personal touch
User Interviews
I conducted 5 main interviews and also spoke to a number of friends in passing about their motives for shopping online for stationery or if they preferred to go in store and why. I also needed to determine if there were any pain points when shopping online to see if there were any key factors in what makes for the best online shopping experience.
Based on my user interviews I discovered that most people had very similar needs…
- Wanting to save time
- Were influenced by user reviews
- Preferred sites that were easy to navigate
- Next day delivery was also key
A huge pain point was not being able to find what they were looking for on a website or in store as it wasted precious browsing time.
Some key quotes include:
“I don’t like hunting for things, I like sites that are easy to navigate” Sally
“I love shopping online as it saves me time, you name it, I buy it!” Tori
“I like lots of good reviews as I’ve been conned before in the past” Mark
Define
Personas
My findings from all the interviews allowed me to create a persona most suitable to represent my user when making key design decisions.
Rachel is a young enthusiastic professional living and working in London and supports local businesses where she can. She seeks originality, inspiration and good reliable customer service. She also likes being able to locate items and products easily.
To help me get a vision in my head, I needed to define the problem, by focusing on Rachel’s goal I creating a scenario to design a solution for.
Defining the problem
User Goal
Rachel needs to find inspiration for a gift idea for a friend. She doesn’t have time to go in store so looks on Take Note’s website. She then finds exactly what she’s looking for and purchases the gift with next day delivery.
I then sketched out some storyboard ideas based on my scenario to help me visually focus on the main user goal.
Before I could start sketching out the screens I needed for my wireflow and paper prototype, I needed to research which categories my users would expect to see on Take Notes Stationery website.
Develop
Design Studio
I then conducted a mini design studio with two other students in my UXDI cohort at General Assembly. I introduced my primary persona, Rachel, before we began sketching out ideas for Rachels scenario which was to find inspiration for a gift idea for a friend and then purchase with next day delivery.
Information Architecture
Card sorting was next up, this type of methodology gave me great insights as to what categories my users would expect to see certain types of stationery. Allowing users to easily locate everything they need and save time which was the key basis of my users needs based on my research.
Open Card Sorting
I put everything in the inventory onto individual cards, shuffled them together, and gave these to my volunteers to see what categories they came up with.
I completed four open card sorts to let users choose the categories.
Closed Card Sorting
Then two closed card sorts to check that other users could fit all the products within the chosen categories that were determined from the open card sorts.
Site Map
Based on the information from the card sorts, clear hierarchical categories were evident. I then created a site map for my website placing all the chosen products within each category.
User Flow
From here I was able to create a User flow, the vital steps Rachel would take in order to find the perfect gift online.
Develop
Paper Prototype
With the hierarchy now sorted for the website It was time to get stuck into the ideation of how the relevant pages for my wireflow would look. Keeping in mind my users main needs which was to be able to navigate easily around the site and find product information and reviews.
At this stage I now needed to test out if the wireflows were clear to my users having based the screens around their needs. Simplicity was key but also being able to display a lot of product ordering information.
Paper prototyping and testing
Excited to now put all my research into practice, I chose some users to test my first version of my paper prototype. I conducted four users tests and here is some of the feedback I received.
Key findings:
- Very easy to navigate
- Cart pop up box needs to be bigger
- Order of check in page needs to be switched around
- Back button option needed on product page
Below you can see the main changes i implemented into the low Fidelity prototype circled in red.
Low Fidelity
Feedback
After listening to the feedback and sketching out more ideas, I then implemented these changes into my low fidelity wireframes before conducting a second round of user testing.
Prototype and User Testing
Low to Mid Fidelity
I had a lot more feedback from the clickable prototype testing. A lot of design changes were needed on the designs, mainly due to product images being made bigger and moved around slightly.
- Main product image needs to be larger
- Move thumb nail images below main image
- Change wording of ‘other related products’
- Wishlist page items need to be smaller
- Order form is too crowded
Results
After implementing all the changes to my clickable prototype, here is the full wire flow of pages for the inspiration flow right the way through to checkout stage.
Deliver
High Fidelity Prototype
What’s next
Time for more user testing and to implement some of the points below.
- Order form still needs simplifying
- ‘Chat help’ feature to add more of a personal touch
- Option to add your own review in the reviews section
- Reward loyalty for repeat customers
The process is never over, iterate, iterate, iterate…….
Thanks for reading!
If you’d like to get in touch or find out more about me, please feel free to connect with me on LinkedIn, Email or visit my website coriocreative.com.
