A UX Case Study: Designing a mid fidelity prototype of an e-commerce stationary shop through research, card sorting and user testing

The below case study showcases a summary of the project. To read my full UX process please click here.

UX Concept Project | 2 Weeks | Individual

Overview

To create a new e-commerce website for a local stationary shop in East London that maintains their ‘small shop’ appeal online and their values and identity in their new digital presence. I named the shop “Nib + Ink”.

This was an individual concept project assigned to me through General Assembly’s design course which was all online due to Covid-19. The deliverables were a mid-fidelity prototype for a local stationary shop and a final presentation.

Process

I used parts of the double diamond to discover, define, develop and deliver the project.

Software

I used Sketch and InVision to create the wireframes and prototype.

Research Methods + Deliverables

  • User interviews, competitor analysis, consolidation of findings, problem statement
  • Open + closed card sorts, site map, user flow
  • Usability tests on low and mid fidelity prototypes

Constraints

Due to the 2-week time span of this project and nature of the brief, I focused on usability testing and the website build over extensive user research. I also concentrated on digging deeper into users’ values and frustrations over conducting a survey. This gave me valuable insights which impacted the design by adding a more personalised feel to it.

Highlights + Challenges

I loved conducting the card sorting on participants which informed a part of the site map, as I was able to uncover a variety of users’ mental models. When the results from the open card sort were verified by a closed card sort, it was a win! I learnt the importance of implementing cognitive psychology processes within my website, as the usability tests highlighted how information on the left side of a screen was read before information on the right within the global navigation. Also, just because you shop a lot online doesn’t mean you know all the intricacies of an e-commerce site build!

Understanding the problem

Before starting the build, I wanted to understand the shop’s values to ensure the website was focused on Nib & Ink’s business needs, as well as addressing the local community’s needs.

The key features they needed for their website were to:

  • 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.
  • Allow customers to contact the business (including to request a product not otherwise stocked)

The user + competitor research, card sorting exercises and usability tests were paramount in helping design a user-centred solution which was intuitive and useful

This was done by adding flexible delivery options, creating a flow which helped users make an informed decision to purchase and implementing e-commerce design conventions. Through the results from the card sorting exercises, I was able to segment the inventory provided into understandable product categories to inform the site map and mid fidelity wireframes.

The usability testing of the low fidelity prototype enabled me to understand users’ perspectives of the design conventions I used and the areas they gravitated when making a decision.

Mid fidelity prototype

Below is a demo walkthrough of the prototype which demonstrates the user’s happy path — the ideal path a user takes without any errors.

Measuring success

Although this was a concept project, I would gauge how successful the design is through the following weekly/monthly activities:

  • Monitoring the volume of website visitors WoW.
  • Monitoring the conversion rate of purchases/visitors WoW.
  • Comparing drop off rates between pages.
  • Analysing conversion rates deeper down the funnel: the number of adds to basket/traffic on the product detail page and the number of purchases/the number of adds to basket.
  • Looking at heat maps to identify areas of activity or inactivity.
  • Conducting surveys and contextual inquiries.

The plan would be to use the data for continuous improvement, including A/B testing the placement of features and website copy.

Next steps

With more time, I would conduct further tests on the language and placement of buttons within the primary navigation. While the usability findings were extremely useful, I believe it’s important to test the feature on a larger sample size before rolling it out to high fidelity. The primary navigation serves as a gateway to the rest of the website and it’s therefore crucial to get the language and placement of these buttons right.

Learnings

This project highlighted the importance of staying organised throughout, to ensure all findings were documented for easy referral and assessed against an impact vs. effort matrix. The card sorting exercise was also paramount in creating the site map — without verifying the categories, the website would be hardly understandable to potential customers. I absolutely loved creating this website and hope to roll it out to high fidelity in the near future!

The below case study showcases a summary of the project. To read my full UX process please click here.

User Researcher | Writer | Artist Motivated to improve design in the world around us through understanding people. www.roshnighedia.com