Nib + Ink: Project Summary
UX Concept Project | 2 Weeks | Individual
The below case study showcases a summary of the project. To read my full UX process please click here.
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 through 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 and 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.