Boutique Retail App
Created to connect customers to local retail businesses.
Project Overview
Understanding the User
Starting the Design
Refining the Design
Going Forward
Project Overview
THe Product:
BoutiqueRetail is a new app created to connect customers to a local retail business which allows users to purchase and return product, as well as book a personal shopper without having to visit the physical location.
Target Users:
Income: 80K annually (minimum)
Age: 25-65 years of age
Profession: Any
Education: Any
Gender: Any
Lifestyle: busy, wants to support local businesses, familiar with online shopping
Project Duration:
February 2024-March 2024
The Problem
Sales and in-store traffic for our client’s local boutique retail business are declining, as market share to large online competitors is increasing. Our client needs a way to connect with customers to bring business back to their local store.
The Goal
The boutique retail app will let users quickly and easily purchase and return products from anywhere with the ability to book a personal shopper, affecting busy customers who don’t have time to visit the store. This allows customers to support their local retail business from home or on the go. I will measure effectiveness by increased purchase and return transactions via the app.
My Role
Lead UX designer
UX researcher
Responsibilities
user research
wireframing
prototyping
Understanding the user
User Research: Summary
The research for this project was fueled by my background in business management and my affinity for shopping local boutiques. With so many unique items for sale from local businesses, and the knowledge that large online retailers get the majority of the market share I wanted to create an app that could help local business owners connect with the customers in their community.
I started off assuming that the app would primarily be a customer service app where purchases and returns could easily be made from the user’s mobile device. After numerous competitive audits and the first round of user research, I quickly learned that there was a gap in the local retail business. That’s when the idea of a personal shopper began. With the ability to book a personal shopper, the customer would not only receive the service they needed for their busy lives, but also have a local contact to help them with their shopping needs. This was a void that large online retailers could not fill, and the direction of my project changed.
My user research includes three areas of focus: understanding what the customer service app primarily will be used for, how the user wants to primarily use the app (mobile, desktop etc), and understanding the processes and emotions that people experience when the user is in the app.
User Research: pain points
1
pain point
Boutique shopping is fun but it takes a lot of time to visit the store in person. Users want to purchase and check stock levels via the app/website.
2
pain point
When there is a problem with a purchased item, users want customer support options and be able to return product via the app/website.
3
pain point
Users don’t have time to visit the boutique every time a new item is introduced, personalized alert through the app is wanted.
4
pain point
More product information and detailed pictures of items for sale is needed for new and frequently purchased items.
User Personas:
By completing this user journey map I was able to really breakdown the user’s process when using the app. However, not integrating my own designer biases with online shopping was the most challenging part of this process.
User Journey Map
starting the design
Paper Wireframes
The goal for this set of wireframes was to design an initial home page for the boutique retail app.
I started the process by creating a list of “must haves” to include in the design. I explored different options that immediately grabbed the user’s attention to the product with varying layouts of photos. I also experimented with options on how the user would gain access to the app and what they were there to do (purchase or return).
Ultimately in Figure Home V1, I brought together the elements I liked from each wireframe creating a clean and cohesive design that highlighted the company’s key benefits through a carousel.
A carousel from the paper wireframe to highlight companies’ features and benefits
Digital Wireframes
With the initial paper wireframes drawn up, it was time to put my layouts into a digital format using Figma. Using inspiration from the user research, I wanted to create a design that was intuitive and easy to navigate. The users already led busy lives, so they needed an app to help them achieve their goals quickly.
We all shop with our eyes, so beautiful and inspiring photos communicating how the app could make the user’s life easier was a focal point in my designs.
Specific categories have become visible after login credentials are provided to help the user quickly navigate the app
Based on user research, top three reasons to why a customer would visit the app are front and center upon logging in.
An expected and simple design to easily guide users to logging in to the app to gain access to personalized experience
Low-fidelity prototype
This user flow was designed for booking a personal shopper through the app. The goal was for the user to easily go through as few steps as possible, focusing on intuitive navigation. Check it out here.
usability study: findings
Usability studies were conducted after the initial wireframes were created to see if the design and flow of the app was working for the user. I quickly found a few trouble areas that needed refinement, particularly around the booking of a personal shopper and the user expecting to see a confirmation page before they were charged for the appointment. A secondary area to improve was how the user communicated to the personal shopper they wanted to book.
Round 1 Findings
1
2
3
Users were surprised and frustrated that there wasn’t a confirmation page before the personal shopper was booked.
A calendar was expected when booking a personal shopper.
Participants wanted a reoccurring appointment option when booking a personal shopper.
Usability study participant a
Usability study affinity diagram
Round 2 Findings
1
2
3
Areas of expertise were desired when selecting from the list of available personal shoppers.
Users wanted an area to input custom notes for the personal shopper at the time of booking.
A few participants were confused on if the list of available shoppers were all available at their selected date and time.
Usability study participant b
Refining the design
Research changes
Taking my findings from the usability studies, my goal was to improve the user’s experience by reducing confusion in three key areas; scheduling, the personal shopper profile page, and the booking confirmation page. Below you will see the addition of a calendar, a section for selecting the time of day an appointment can be made, information and clarification on personal shoppers, and the addition of a confirmation page and notes section.
Before usability study
Before usability study
Before usability study
After usability study
After usability study
Calendar added
Time of Day added
After usability study
Clarification that the personal shoppers listed are all available at the user’s desired date and time added
Specialties added
Booking confirmation page and notes for personal shopper added
High-fidelity mockups
With the additional items added from my research findings, it was time to add some color, typography, and realistic imagery to bring together the branding of Boutique Retail.
High-fidelity Prototype
Check out the high-fidelity prototype here.
Accessibility considerations
1
visual design
Using a high-contrast color scheme, this app design supports visual impairments with colors that pass WCAG compliance.
2
large touch targets
Keeping users with motor and/or vision impairments in mind the touch targets throughout the app are large and well separated from neighboring touch elements.
3
ICONOGRAPHY with labels
To ensure that all users can navigate the app easily simple and recognized iconography is used throughout the app with text below for users with screen readers.
going forward
Takeaways
impact
“I'm a busy mom of two, so I don't have a lot of time to spend shopping. This app could be a lifesaver for me. I can do all my shopping from my phone, and I can even schedule a personal shopper for a time that works for me. I wish more local businesses had an app like this.”
— Ebony-Study Participant A
what i learned
Throughout this project, I wanted to focus on user-centered design. My biggest takeaway was that when I would get so focused on the specific design elements, I would tend to overlook what the user would actually need. The time I spent on testing the app was invaluable. Good UX design projects are meaningless if they don’t solve a problem for the user, and user research is key to creating a great product!
Next steps
1
I would like to fully design and flush out the entire app. With a retail background, I could see this app being tailored to many different online businesses.
2
Conducting usability studies for this app was exhilarating as it led to a much better overall design. I would like to continue conducting usability studies for this project as different sections are completed.
3
Once the app has been fully designed I would like to present it to local businesses here in my hometown and show the stakeholders how I could cater this base design to their specific company.
Thank you for taking the time to dive into this Boutique Retail case study! To review more of my work please continue on to the next case study: Internet Speed Website.
〰️
Thank you for taking the time to dive into this Boutique Retail case study! To review more of my work please continue on to the next case study: Internet Speed Website. 〰️