Custom Tees
October 2022 - November 2022
The Problem
The Goal
Most online custom printing websites have complicated ordering processes and lack options when it comes to customizing a clothing item.
Design a Custom Tees website that is user friendly by providing better custom options and offering a better checkout process.
My Role
Responsibilities
UX designer leading the project from conception to completion.
Conducting interviews, paper and digital wireframing, low and high fidelity prototypes, conducting usability studies, accounting for accessibility, iterating and responsive design.
Understanding The User
I conducted user interviews and used empathy maps to better understand the user and their pain points. I found that many target users see that ordering bulk custom t-shirts online is a convenient way to represent a group or organization. However, many custom printing websites are confusing to navigate and are not always straightforward.
Pain Points
Navigation
Custom t-shirt websites are often too busy which results in confusing navigation.
2. Information Architecture
Confusing placements of important information like the fit guide and pricing impacts the users experience
3. General Experience
Most custom print ordering websites don’t provide an engaging experience
Starting the Design
Sitemap
Website navigation was a primary pain point for users. My goal was to make strategic information architecture decisions that improve website navigation.
Paper Wireframes
I sketched out paper wireframes for each screen for the website, keeping the user pain points about navigation, browsing, and checkout flow in mind. Stars indicate elements that will be used in the digital wireframes.
Because Custom Tees customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital Wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve user experience. Included is the screen size variation for mobile devices.
Low Fidelity Prototype
To create a low fidelity prototype, I connected all of the screens involved in the primary user flow of picking out a t-shirt, adding a custom design and checking out. View the prototype here.
Usability Study: Parameters
Study type: Unmoderated usability study
5 participants
Location: Houston TX, remote
Length: 20-30 minutes
Usability Study: Findings
These were the main findings uncovered by the usability study.
Cart
Once at the checkout screen, users didn’t have a way to edit the quantity of items in the cart
Checkout
Users were not able to easily copy the shipping address information into the billing info field.
Refining The Design
Mockups
Based on the changes from the usability study, I made changes to improve the site’s design page. One of the changes I made was adding the option to edit the quantity of the same item while on the design page.
To make the checkout flow even easier for users I added a order summary on the shipping information screen, so the user still has a visual on what they ordered.
Mockups: Original Screen Size
Screen Size Variations
Desktop and mobile screen variations.
High Fidelity Prototype
My high fidelity prototype followed the same user flow as the low fidelity prototype, and included design changes made after the usability study. View the hi-fi prototype here.
Accessibility Considerations
I used headings with different sized text clear visual hierarchy
2. I used high contrasting colors so the user has a clear indication on how to navigate the site
3. I designed the site with as little clutter as possible when navigating the site
Going Forward
Impact
Our users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
What I Learned
I learned that the smallest design change can have a big impact on the user experience. The takeaway here is to always focus on the real needs of the user when coming up with design ideas and solutions.