Embedded Files
Project Overview
The Product:
BesTees is an online fashion boutique with HQ located in metropolitan Boston. They sell trend-inspired clothing, and allow users to customize clothing orders by creating custom prints. The users are given the option to upload images and/or add text messages to the clothing. BesTees offers a small spectrum of competitive pricing. BesTees targets users who have a life milestone event approaching, and who need a memorable gift option.
Project Duration: August 2021 to September 2021.
The Problem: Busy users want an easy way to create and order personalized gifts for life milestone events like birthdays, weddings, ect.
The Goal: Design a Responsive Website for BesTees that allows users to easily create and order personalized gifts for life milestone events like birthdays, weddings, ect.
My Role: UX designer designing a responsive website for BesTees from concept to delivery.
My Responsibilities: Designing with empathy and without bias. Planning & conducting user research, interviews, & surveys. Synthesizing & diagramming interview & usability study data to form insights. Composing wireframes, building design systems, & creating prototypes via Figma & Adobe Xd. Iterating on designs & progressing user research.
Understanding the User
• User Research
• Pain Points
• Persona
• User Journey Map
User Research
Summary:
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was: working adults who have a life milestone event approaching. This user group confirmed initial assumptions about BesTees customers, but research also revealed that life milestones were not the only factor driving users to look for custom gifts. Other user interests included casual everyday events, trends, or surprise events that made them seek out a way to create and order a custom gift.
Pain Points
Time: Working adults are too busy to complete a full DIY project from start to finish.
Accessibility: Platforms for ordering custom clothing are not equipped with many assistive technologies
IA: Text-heavy boutique websites with too many categories are often difficult to read and order from
Persona
Persona: Anna
Persona: Anna
Problem Statement:
The user, Anna, is a married buyers assistant that lives in a major city, who needs a quick and easy way to order customized shirts for a bachelorette party, because she wants a unique and memorable gift for a special life event.
User Journey Map
Anna’s Journey:
Mapping Anna’s user journey revealed how helpful it would be for users to have access to a dedicated boutique ordering website.
Starting the Design
• Sitemap
• Paper Wireframes
• Digital Wireframes
• Low-fi Prototype
• Usability Studies
Sitemap
Mapping the Design:
I made sure to consider the users journey when constructing the initial sitemap. My research suggested that most users would prefer to just browse and not have to sign in until they want to place an order, so I structured the site around that option.
Paper Wireframes
Planning the Design:
Taking the time to draft iterations of each screen of the site on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick action selection process to help users save time.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital Wireframes
Clarifying the Design:
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Digital Wireframes
Enhancing the Design:
Easy navigation and a chronological step bar that guides the users actions was a key user need to address in the designs, in addition to equipping the site to work with assistive technologies by including alt text.
Low-fi Prototype
Connecting the Design:
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was building and ordering a shirt, so the prototype could be used in a usability study.
View the BesTees
Usability Study: Findings
Testing the App:
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 Findings
Users want to order quickly
Users want easy clothing
customization options
Users want a shipping speed option
Round 2 Findings
The checkout process has no way to edit items
Users want to be able to re-order easily
Users want to be guided step-by-step when customizing
Refining the Design
• Design System
• Mockups
• Hi-fi Prototype
• Accessibility
Design System
Creating the Assets:
The food truck is an impulse-driven business model, so I designed art assets and chose colors that leaned toward a fun and friendly aesthetic.
I chose sans-serif industrial looking fonts that seemed fitting with a food truck "lunch casual" atmosphere.
Mockups
Optimizing the Design:
Early designs allowed for some customization, but after the usability studies, I added a more robust customization options list. I also revised the design so users see all the customization options in chronological order.
Mockups
Improving the Design:
The second usability study revealed the users frustration with no option to delete items from their order. To address this issue and streamline the ordering flow, I added an edit and delete button to the order summary screen. I also added a prompt screen to confirm item deletion.
Hi-fi Prototype
Finalizing the Design:
The final high-fidelity prototype presented cleaner user flows for customizing a shirt and confirming an order. It also met user needs for editing their shirt type, as well as more customization options for text.
View the BesTees
Accessibility Considerations
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Used icons to help make
navigation easier, and a chronological numbering system for step by step guidance through the design customization feature.
Used detailed imagery for clothing items to help all users better understand
the flow and allow them to better review custom designs.
Going Forward
• Takeaways
• Next Steps
Takeaways
Impact:
The Website makes users feel like BesTees really thinks about how to meet their needs.
One quote from peer feedback:
“The site made it so easy and fun to create my order! I would definitely use this as a go-to when I need to find a good gift.”
What I learned:
While designing the BesTees website, I learned that the first ideas for the site really are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the site’s designs. I plan to continue testing the site and add features for the BesTees company to also use the site for order processing.
Next Steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine how the site will function on the side of the boutique- will there be a separate process that they use to process orders on their end?
Let's Connect!
I really appreciate your time reviewing my work on the Crafty Corndog app!
If you’d like to see more or get in touch, my contact information is provided below.
e-mail: hillmcmail@gmail.com
website: www.hillmcl.art
Thank You!
Page updated
Google Sites
Report abuse