Mobile App
for Local Boutique
The Product
A mobile app for a local boutique with a group order feature to help busy people save time buying essentials for theirselves and the ones they are accountable for.
Project Duration
November 2023 - May 2024
The Problem
User is a busy parent who needs a group order option because it's hard to find a time everyone in their home is free to go to the store to pick out and try on clothes to buy. User would like for their family members to gain independence by picking out their own clothes/style.
The Goal
Our retail app allows multiple users to shop under one 'parent' account. This feature benefits users shopping for multiple people by enabling each individual to select their own items and access pick-up or delivery options.
My Role
UX Researcher, UX Designer, UI Designer, IxD Designer
Responsibilities
Responsibilities included user research, wire framing, usability testing, and prototyping.
Project Overview
User Journey Map
The user often feels stressed when taking their family to the store and ensuring everyone picks the right size clothing. They seek a quick and hassle-free way to purchase clothes for themselves and their family, allowing them to fully enjoy their leisure time together.
Persona: Cristy Covey
Problem Statement:
Cristy is a busy parent and ER nurse who needs an easy and efficient way to purchase clothes for her family because between work and driving her kids to practice she has little time for shopping.
Pain Points
1
Lack of time to shop for family
Between morning rush, work days, afternoon pickups, dinner, extracurriculars, it's hard to find time to shop. A group order feature that allows users to easily send invites and reminders can help.
2
Needs family to be more independent
It is important for every user to have their own identity when it comes to how they dress or the products they use. A way to view an individual's order with the option to modify would allow independence but also a way to assist if needed.
3
Logistics of getting everyone to the store can be difficult
Lining up schedules to get everyone in the car at the same time and keeping track of others in the store, while shopping for yourself, can be a hassle. A group order feature with pick-up or delivery options can help.
4
Difficult to find correct sizes
Clothing brands fit differently and with growing children, not knowing how a certain brand will fit makes it even more difficult. A size recommendation feature and user reviews can help.
Summary
Through conducting an unmoderated remote usability test, it was found that users prefer the ability to modify individual member items and also easily send reminders and invites. Users also liked the option for a deadline.
User Research
Users are able view and edit cart, delivery address, and payment in one location.
5. Checkout
Users are able to view pickup or delivery options and are given a time estimate on each option
This button allows users to submit order.
Users are able to view a summary of the total cost of the order plus fees, if applicable.
Users are given an order confirmation and can easily navigate back to the Home screen.
6. Confirmation
The user is notified that all group members have finished shopping.
3. Ready Notification
The user can easily navigate to the Cart or Group Order screen to double check all members have completed their shopping.
Users are able to see the total and number of items each individual has submitted for their order.
This button allows the user to easily start the checkout process.
Users are able to easily find the subtotal and number of items in the cart.
4. Cart
This section allows the user to see what each group member has order and easily edit size and quantity if needed.
This button quickly allows users to start a group order.
This gives users information on pickup and delivery options available.
This section allows users to view and gain inspiration for seasonal trends.
This allows users to easily shop for the categories they are looking for.
1. Home
The QR code makes it easier to share the user’s shopping link for a group order..
This allows the user to set a group due date and automatically send custom reminders to the group.
This section quickly informs the status of all users in the group order.
2. Group Order
Digital Wireframes
Throughout the initial design phase, I incorporated user feedback and research findings in the designs.
Red stars are used to mark the elements of each sketch that will be used in the initial digital frames.
For the Shopping Cart screen, I prioritized an easy way to for the user to see a summary of how much each member's subtotal and item count. The user also is able to edit size and quantity of each item on the order.
Red stars are used to mark the elements of each sketch that will be used in the initial digital frames.
For the Group Order screen, I prioritized an easy way to share the user’s shopping link, a way to show the status of each group member, and a way to easily send friendly reminders of the due date.
Red stars are used to mark the elements of each sketch that will be used in the initial digital frames.
For the Home screen, I prioritized a clean and organized layout to help users easily find what they are looking for and save time
Drafting multiple iterations of each screen of the app helps spotlight important elements, making sure they make it to the digital wireframes to address user pain points.
Paper Wireframes
Starting the Design
Low-Fidelity Prototype
Check points:
-
User can proceed forward and backwards within the sequence
-
Clear navigation cues
-
Message indicating a successful completion of the checkout process
-
Users are able to return to the starting point after successfully checking out
The goal for this prototype is to test the user flow from Home to Checkout using Group Order.
Usability Study: Findings
Methodology
15 - 20 minutes per participant
United States, Remote
Unmoderated usability study
Users were asked to perform tasks in a low-fidelity prototype
Participants
5 participants
2 females, 2 males, 1 non-binary individual between the ages of 18 and 75
Research Questions
How long does it take a person to start and complete a group order?
Are there any parts of the group ordering process where users are getting stuck?
What can we learn from the steps users take to start and complete a group order?
Findings
1
Users want a simple process on sending group invites and reminders.
2
Users want to easily see individual subtotals and items with the option edit them.
3
Users want to be able to easily select between order pick up or delivery.
Mockups
When asking participants to modify a group member's order, they found it confusing they weren't able to modify the order on the Group Order screen. This was an important discovery, as everything that has to do with the group order should be on the Group Order screen. We brought the ability to modify orders on the Group Order screen and left the option to modify on the Cart as well.
Before usability study
After usability study
The group order Invite and Reminder process needed to be simplified and easier to understand. This was achieved by locating these two options to one location.
After clicking the Invite or Reminder button, the user flow is similar to other apps by allowing the user to use Messages to send invites or reminders.
Before usability study
After usability study
High-Fidelity Prototype
Please note: When updating variables, the subtotals and item counts were thrown off. This will be corrected soon.
Color Contrast
Text, background and foreground colors were checked with the WebAIM contrast tool to ensure they are ADA compliant and easily viewable. This gave a guide to when and where font colors and background colors could pair.
Alt-text
Users with visual impairments, those using text-based web browsers, and/or situations where images fail to load need to have access to alt text. Alt text conveys the content and context of an image to users who may not be able to view it.
Font Family & Size
Lexend Deca is used for the headers and sub-headers. Lexend Regular is used for paragraphs. These fonts have shown to significantly improve reading-proficiency.
Lexend is a collection of seven font families. These fonts "were designed with dyslexia and stuggling readers in mind, but Bonnie Shaver-Troup, creator of the Lexend project, soon found out that these fonts are also great for everyone else."
"Lexend", GoogleFonts, <https://fonts.google.com/specimen/Lexend+Deca>