Nib + Ink: Full UX Process

MacBook Pro.jpg

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

UX Concept Project | 2 Weeks | Individual

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


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)


Competitor analysis allowed me to compare and evaluate features from different stationary shops

With these ‘musts’ in mind, the competitor analysis research strengthened my understanding standard conventions for layouts, categories, features, and general usability among online stationary shops. Ideally I wanted to conduct contextual inquiry by observing customers, but due to Covid-19 this wasn’t possible.

The standout insight was that the bigger shops e.g. Ryman, had last minute up-sells and discounts on the basket page compared to the smaller shops. These findings led to actionable insights to inform the rest of the project.

Competitor analysis for other e-commerce stationary retailers

I dug deeper and created a feature matrix for specific website functions to identify where competitors were falling short. It was surprising to see that the smaller shops did not have an online loyalty scheme or the ability for someone to request a product that wasn’t stocked — this would encourage more interaction between the customer and the shop, thereby promoting a personal feel. Most also did not have click + collect available. As Nib & Ink highlighted their desire for creating a local and personal feel, they could capitalise on the features below and build unique selling points around them.

A feature matrix of specific site functions and those that Nib & Ink can capitalise on.

Interviewing users who fit the shop’s ideal customer profile painted a clearer picture of the features I needed to incorporate into the design following their values

Interviewing ideal customers was the best research method given the circumstances to build empathy with users and help me re-create the personal community feel online. By revisiting the requirements from the brief, I identified a typical customer as someone who likes to support local businesses and avoids shopping at giant retailers. I conducted two 30 minute interviews with two participants who would be perfect customers to dig deeper into their values. I had connections within my network of ideal customers so I did not need to use a survey to screen them.

Two important points mentioned a few times during the interviews, was the need to make an informed decision during purchasing and the need for flexible delivery. I had to think of ways of incorporating these points into the website.

All the findings served a strong purpose in informing the next stages of definition and ideation, through to design. To serve as a reminder, I summarised the research into a digestible format to ideate from.

Consolidation of findings


I summarised the research findings into a problem statement to help me focus my designs decisions

Customers needing a way to make an informed decision when buying products because they wanted to be 100% happy with their purchase.

The next phase was to dive into structuring the website build, starting off with a card sorting exercise.


A open card sort exercise was invaluable in unlocking users’ mental models of how the existing inventory could be categorised

Card sorts serve a way to organise information into logical categories for users to understand easily. More specifically, an open card sort allows participants to use their own mental models to categorise data. I was given an inventory of 36 items to divide into understandable and relevant categories.

I conducted six open card sorts with different participants to investigate how they would categorise the inventory. I gave each participant the inventory list and asked them to group them into categories they thought best made sense to them. It was interesting to see a commonality of headings for “pens and pencils” and how it differed from my initial thought of pens and pencils being in separate categories.

Some participants struggled to recognise the terms, yet took an educated guess as to what the “Gelatos gift set” might be, for example. A crucial future learning was to be mindful of repeating certain words when they can actually be written in a different way to make the participant think — e.g. a participant was unfamiliar with the word “paper roll” but saw it repeated on a few items so created a separate category for it. Overall, it worked as a good basis for setting up the language for the website and categorising items.

GURINDER20200605_144114.png

One of my participants conducting an open card sort.

The inventory items can be seen in yellow, categorised under specific headings in purple

The results from the open card sort showed a commonality of headings, which can be seen from the highlighted section of the graph

I aggregated the data and sorted it by most to least common category names. This was a valuable exercise that informed the category names on the site map.

Card sorting results

I validated my results by using a closed card sort to ensure there was cohesion between the category names and the inventory within it

I did this by providing the category names to two participants and asking them to populate each with the inventory items they thought were the most fitting. E.g. The Moderno journal falling under “Notebooks and Planners”. It was a success!

A site map was created to understand how the research and card sorting results would be translated into the build

After sketching out variations of a potential site map and navigation, I designed the following flow, with the card sorting results as the secondary navigation, within products. This section would form the bulk of the website.

Site map and navigation for Nib & Ink


Following this, I mapped out key site pages by sketching a low fidelity layout and navigation. The purpose of these sketches were to determine how the pages led on from each other and where general features would sit.

I tested the flow with two individuals by asking them if they visually understood the progression from one page to the next, however the insights showed some confusion. The results came back with…

That was fair, I understood what they meant. It gave me a basis to iterate from when creating the digital wireframes: to make each page as clear and concise as possible and to re-think the checkout process — how could I organise the flow to make it understandable? I designed an accordion drop down for the next iteration which could be collapsed and expanded as this was a common design pattern among e-commerce stores.

The low fidelity digital wireframes gave sense to the distance between elements and made the information clearer. I uncovered valuable insights which I incorporated into the next iteration.

Insights from testing the homepage

While the overall checkout process made sense, I uncovered many small details that needed fixing. The most surprising insight was how 3/4 users navigated straight to “products” instead of “product recommendations” to search for a suitable gift.

It was initially created to maintain a local and personalised feel, however, I found out that the word “products” was more common and familiar than “product recommendations” so there wasn’t a need for both. Users also said it wouldn’t be a button they would click on in general to find a suitable product.

“Product Recommendations” was taken out entirely for the users to focus on “Products”

Insights from testing the checkout flow

Following my testing insights from the wireframe sketches, I completely transformed the checkout flow from the initial design. The accordion dropdown allowed the customer to see their progress without needing to go through multiple pages. It was a clearer method to showcase the data. The breadcrumbs were also removed.

The mid fidelity prototype worked a lot better due to user feedback, but I still made more adjustments to create a robust design

Two new testers pointed out how they immediately clicked on the search bar instead of “products” because it was the first relevant option they saw, in order from left to right. Therefore, the product option had to take a more prominent stance. It was moved to the front.


The scenario below outlines the user’s “happy path” to purchasing an item, to show the main functionality of the website

User flow from homepage to checkout.


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.

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!