Shelf Pilot Case Study

Summary

Initial Premise

  • As the service is a relatively new concept, the website should tell a story that carries visitors on a journey from the beginning to the end which leads them to sign up for the service.
  • Pricing only matters at checkout and customers are used to additional fees added by external parties.

Problem

How might we… provide a service that automates purchases of personal care items for consumers?

Concluding Findings

  • Visitors are generally impatient so the quicker you tell them what the product is about and how much they can expect to pay, the better.
  • How pricing is communicated matters a lot. It is true customers are used to additional fees but the expectation of it matters a lot more. Customers appreciate knowing the total price they are going to pay upfront before they get to the checkout.

Role

• Product Manager
• Lead Designer

Tools

• Bubble (No Code tool)
• Figma (Design Tool)

Research

Target Audience

Male young professionals are the initial target market for this product as they are more likely to empathise with the pain points laid out on the website.

Objective Key Results

✅ The target cohort understands what the service does

✅ The target cohort understands the pricing tiers
‍
❌ The target cohort wants to sign up (except in cases where the problem is already taken care of)

Persona Example

Hand-drawn Prototypes

Design Style Guide

Below is a cross-section of the style guide used for the designs of the application.

Information Architecture

Homepage

User Primary Flow

High Fidelity Designs

The following shows some of the screens used for the design of the web application.
Visually it is presented in two styles:

Explanations of the screens are presented in this format

Interesting thoughts regarding the screens are presented like this

A view into the first version of the homepage on both desktop and mobile. The theme is focused on bathrooms (the value proposition) as well as a minimal look and feel to reduce the number of distractions.

The sign up page includes a “Sign up with Google” button to offer the user a shorter signup option, given the user would be filling out more fields in subsequent pages.

This is the first step of the subscription process and it features an explanation blurb to introduce the user to the process ahead.

In the step indicator at the top of the page, it is not apparent to the user that there are more than 4 steps in the process (there are 6). This didn’t seem to matter much to the user but a more accurate representation is better so it does not appear deceptive. This was later fixed.

This page introduces the user to the pricing before selecting any products for their basket. Doing it in this order allows the user to prepped for the number of products they can select and the estimated cost.

This page had more revisions than I imagined as I learnt that people generally have a heightened focus to any information regarding pricing (more about this in the Test Insights below).

This page drills further into the subscription type. This means a user could be on a Standard–L'Essentials, Standard–Luxe, or Standard–Lavish subscription depending on what they want to pay

Even though this page is a continuation of the last page, it was not made apparent to the user. In addition, if something is a continuation of a previous page, it is better to re–present that information again to reduce load on working memory. This is particularly true for things that involve pricing.

Here the user can select what items they want in their bathroom before actually choosing which brands they want for that particular item.

One of the beauties of designing mobile first, is that it constrains you on how to present information to the user, and requires extra precision to get it right. Here, the challenge was how to tell the user they can add items from the main list to their list. The answer was to pre-add 2 for them (which they can remove).

After choosing the items wanted, this page is a second level and requires the user to choose the brand they want. This is akin to writing a shopping list first, then picking items for the items in your shopping list.

This screenshot shows it as a radio button but actually users may want to select more than 1 item.

This is an optional page which aims to profile the user on their daily habits and frequency if usage based on the products they selected. It shows it is optional as users can select "Skip this step".

This page gives the user a summary of items in their basket before they proceed to payment. This enables the user to confirm that they are happy with their selection before paying for it.

If possible, include pictures of your products as much as you can where possible. People may not often remember the name of the item they chose but the chances of recognition increases when accompanied by an image.

Once a user confirms they are happy with their selection, this page allows them to make a payment and thus begin their subscription to the service. All fields on this page are fairly familiar with users who have paid for online goods in the past.

As mentioned previously, people pay more attention to figures when payment is involved. Providing a breakdown of the total payments can often be detrimental as users may start doing mental maths or make comparisons to other services.

Once payment has been completed, this page confirms the status to the user as well as next steps on what to expect.

Having a referral CTA on the summary page works well as long as it is low effort.

Testing Results

Testing Goals

  • To see if a user understands what the site is about
  • To see if a user identifies with the problem of the site
  • To see if a user can complete a task given to them
  • To monitor any points of confusion, pain or inability to do something
  • To see if a user can utilise other features on the website

Instructions for Participants

  • The aim of this test is to see if people understand the concept of the site and to see how usable the site is for the primary user flow.
  • As you use the site, please feel free to speak out loud as this may help me to understand your thought process and what you’re thinking at particular points

Tools

  • Bubble(Low Code App Builder)
  • Zoom

Tasks for Participants

  • Please take a couple of minutes to browse through the homepage of this site.
  • In your own words could you tell me what service this website provides?
  • After browsing through what would you do next if you wanted to use this service?
  • Could you please sign up for the site, either through Google or the sign up form?
  • Could you please start the process of using the service to select items you use in your bathroom and paying for it in the end?

Test Insights

Homepage

  • 90% of participants understood the general idea of the site but required more specificity up front (in the hero) rather than having to scroll down to get the general idea
  • Most participants felt the pricing was confusing. This was mainly down to structure and language rather the figures themselves
  • Most participants may have had a feeling that this service is better than the status quo but it was not made immediately apparent to them.

User Flow from Sign Up to Payment Complete

  • Low clarity on the differences between the service tiers and their respective pricing
  • Confusion on the second layer of the “Standard Type” Service. Is this an extra cost to the first?
  • “L’Essentials” section has two different steps but it is named the same thing in both steps so it was confusing.
  • “L’Essentials” does not mean much to people and the brand
  • Adding prices to the first step of L’Essentials caused confusion when participants got to the second step
  • The process of choosing another product and moving to the next step was not clear
  • The breakdown of pricing on the payment page made users do a double take.

Design Changes

Information Architecture Changes

Initial

Revised

UI/UX Changes

Homepage

  • The subheading in the hero was changed to provide more meaning
  • A discount pricing was added to entice visitors
  • The CTA was changed
  • The length of the homepage was reduced
  • More info was provided on the homepage based on some of the questions asked like “How it works”

Previous

Redesigned

Pricing Page

  • Clarity on the pricing was improved.
  • Users did not have to do maths calculations in their head to know what to expect to pay

Primary User Flow Pt 1

  • Combined page 1 and 2 to reduce the number of steps
  • Removed the “Choose your standard type” page based on the new pricing clarity
  • Changed the name of “L’Essentials” pages to a more obvious name
       •   L’Essentials page 1 -> Choose Your Items
       •   L’Essentials page 2 -> Choose Your Brand

Primary User Flow Pt 2

  • Choose Your Items page now has the prices removed to remove confusion
  • Choose Your Brand page has been redesigned based on observations from testing
  • Since questions about your usage is an optional step, this page was removed moving the user closer to the last step.
  • Pictures added to the summary page

Conclusion

Summary

This case study was a masterclass in showing me that the content (specifically language) used to communicate to visitors of a website has a lot of weighting to it. Dare I say it has the utmost weighting out of all UI Elements. The challenge for me was not in fact communicating to visitors but relaying information in a succinct manner to an impatient visitor.

Another major point I learnt was people are generally sensitive to prices when it comes to paying for goods. This means the user experience of how pricing information is displayed is critical at every point it is mentioned.