BOUTIQUELEE UX CASE STUDY

Design Prompt / Brief:

"Design an e-commerce app for a

boutique retailer in your hometown.”

VIEW THE BOUTIQUELEE CASE STUDY DECK

project

TARGET AUDIENCE

the product

As part of the Google UX Design Professional Certificate, I designed a dedicated app for the fictitious Boutiquelee.

the product

TARGET AUDIENCE

the product

Boutiquelee is an eCommerce shopping app for a highly successful bricks and mortar store located downtown. Owned and operated by Lee, this dedicated app was part of the store's transition online.

TARGET AUDIENCE

TIMELINE & MY ROLE

Age range - 20-85

Gender: 87% female, 11% male, 2% nonbinary

Values: boutique, handmade local products

TIMELINE & MY ROLE

my responsibilities

TIMELINE & MY ROLE

Nov-Dec 2022

UX designer, UX researcher, Information Architect, UX writer

my responsibilities

Wireframe development (paper and digital), Prototype development (low fidelity and high-fidelity), User research, Competitor research

tool

my responsibilities

Figma

THE PROBLEM, SPECIFIC CHALLENGES AND PROJECT GOALS

the problem

project goals

A significant number of Boutiquelee’s loyal customer base finds it difficult to trek downtown to its bricks and mortar store. As such, Boutiquelee requires an online presence. Because many of Boutiquelee’s loyal customers span from the novice technology user to the outright technophobe, the app must be extremely easy to use.

project goals

Develop an eCommerce shopping app that provides existing and new customers with an easy-to-use, fast and seamless shopping experience while still providing the unique feel that is Boutiquelee.

the research study

Purpose of the research

To test the usability of Boutiquelee, including:

ease of use
simplicity of the user flow
specific challenges users might face

This data provides insights to inform redesign.

reesearch goals

Purpose of the research

Determine whether users can complete the core app tasks – easily and effectively.
Identify any pain points in the app.
Determine if there are any current design problems that need addressing and feed these solutions back into the design to improve usability.

research questions

What can we learn from the steps that users are taking during their shopping experience?
Are there areas where users become "stuck"?

Methodology

research questions

Research participants completed two unmoderated Usability Studies and System Usability Scales (at the low and high-fidelity prototype stages). Five participants were included in each study. Sessions lasted 30 minutes. Participants were between 20-85 years and included 3 females, 1 male and 1 nonbinary.

The Users

Patricia

Core User Problems

Age - 67

Education - High School

Occupation - Retired and caregiver for great-grandchildren

Problem Statement - Patricia is a retired pensioner and also caregiver to her disabled great-grandson. Because of her caregiving role, transportation issues and mobility problems, she finds it difficult to travel to her favourite boutique downtown.

Core User Problems

1. Transportation Issues - user does not drive and public transport is limited. A trip to the brick and mortar shop is difficult.

2. Mobility Issues - disability is a barrier to visiting the shop and maneuvering about in the shop.

3. 24/7 Caregiving Responsibilities - makes it difficult to visit the boutique retailer.

4. Time-poor - not enough time to travel to Boutiquelee’s brick and mortar shop.

5. Not tech. savvy - design will need to be basic.

paper and digital WIREFRAMES - DEDICATED APP (pre-usability study)

low fidelity prototypes - PRE-USABILITY TESTING

ITERATION

To improve user experience and usability of Boutiquelee, the first round of usability testing was conducted on the low-fidelity prototypes and the second was on the high-fidelity prototypes. Five participants were provided with use scenarios and their feedback, opinions, and behaviour was used in redesign.

1st Round of usability testing -

Category PlacEment

Users were confused about the category placement on the homescreen. The redesign involved changing the position of the key product categories.

Review feature

Category PlacEment

Users needed a feature to enable review / change / update their purchases prior to checkout.

USER FLOW

Users needed better cues or tweaks in the layout / design of the checkout page to assist user flow.

cluttered

USER FLOW

Some users suggested the page was cluttered. The redesign involved less content, in the form of images and text, to enhance user flow and experience.

LOW-FIDELITY PROTOTYPES - POST-USABILITY TEST

LOW

MOCKUPS & HIGH-FIDELITY PROTOTYPES

Mockups were designed to incorporate user understanding research (empathy) and findings from the usability study. The second round of usability testing was conducted on the high-fidelity prototypes.

2nd Round of usabiity testing -

colour contrast

The buttons throughout the app did not have enough colour contrast to guide users. thereby obstructing user flow.

Unknown icons

colour contrast

For novice users, the hamburger menu icon created confusion and obstructed user flow as it was an unknown icon. Redesign involved adding multiple ways for users to navigate the site.

image size

Missing core element

Users found the images on the home page too small, thereby diminishing the user experience.

Missing core element

No price was given on the Product Card / Item

challenges

1. Time-poor - easily navigated and streamlined, this dedicated app enables users to shop without having to travel downtown to Boutiquelee's brick and mortar store.

2. Caregiving responsibilities - users are able to access the Boutiquelee dedicated app in their "down" moments when on-the-go or out-and-about.

3. Mobility Issues - users can access the dedicated app anywhere, without having to move to a desktop or travel to the Boutiquelee store.

Takeaways

It's very easy to get a design completely wrong -- this lightbulb moment will not come until usability testing is performed. Sometimes bad design comes across as misleading and dodgy, when really it's simply bad design. And, even novice technology users and technophobes will pick up and use a mobile device and app if it provides convenience and time savings in order to access a favorite retailer.

next steps -

1

2

Present ideas to stakeholders, obtain feedback, and conduct a redesign to incorporate integration – bringing a multidisciplinary team together to achieve these objectives.

2

Conduct a Usability Study following the redesign from Step 1 – this would include the users and the Boutiquelee team – and would potentially require a further iteration of the app.

3

2

3

Investigate / research potential eCommerce Integrations to automate core business activities and increase productivity – ensuring that top priority remains customer usability.

BOUTIQUELEE CASE STUDY DECK

Download PDF

Images by Pixabay Community Contributors and Dall-E.