Lit T-Shirt Company – UX Project

Project Overview

The product: 

Lit Studios is a small indy print shop, that does small volume custom shirts. User can upload their own designs or simply create a custom shirt with pre-made art and fonts.

Project duration:

September 2023 to November 2023

The problem: 

Users who want to create a small volume of custom shirts but at a reasonable price.  

The goal: 

Provide services to this creative group of individuals.  Provides services for single shirt print, small volume, or limited run. 

My role: 

UX Designer, designing an app for “Lit Studio” from concept to delivery.

Responsibilities: 

Conduct interviews, paper and digital wireframing, low and high-fidelity prototyping, usability studies, accounting for accessibility, and interacting on designs. 

Understanding the User

User research: summary

The research done in the following section includes a diverse group of creative people that share interest in creating small-volume customs shirts.  These include individual creatives, fashion designers, or small businesses that have limited-run shirt prints.

The research done included interviewing users about their interest and needs involving custom shirt design.  This involved monitorized interactions with the users and collecting the feedback after they use the prototype app. The research only took a few minutes and participants were thanked for their time. 

Low-volume print run:

Creatives that have a hard time finding a shirt print shot that can do low-volume orders. 

Complicated web pages:

Current shirt print shops offer too many options making the web pages complicated to navigate. 

Hidden cost:

Current shirt print shops’ web pages don’t offer pricing upfront or simply charge a lot for low-volume orders. 

Personas

User Journey Map

Starting the design

Paper wireframes

The main focus of the app is to have an easy and seamless way to order low-volume custom t-shirt.  I like the approach of the Jackbox game call Tee K.O. When the user completes the game, they have the option to purchase a custom shirt with the design they drew during the game.  

Storyboards

User Flow

Digital Wireframe

I want the layout to give an easy and linear engagement for the users. Simply, click, do the basic action then move along the line. 

Since the web page is supposed to have very-low engagement. The menu continues to have limited options. 

Low-fidelity prototype

The low-fidelity prototype connects the users to a linear flow. View preview at Lit Gallery Custom Tee’s Shop

Usability study: findings

Conducted two rounds of usability studies.  The first round helped refine some of the flow issues in the application.  The second study helped identify some accessibility issues. These issues were addressed and resolved.

Round 1 findings

  • Users want to purchase one or a few custom shirts with ease. 
  • Easy to navigate webpage as a conveyable belt. 
  • Easy to upload a custom design or create one on the platform. 

Round 2 findings

  • Easy to complete task
  • Easy to see pricing and check out.

Refining the Design

Mockups

While the design has not changed much since the original designs, there were minor changes to the call-to-action buttons.  Originally the “Select” word was the call to action, but later decided to make the entire sentence the call to action. 

High-fidelity Prototype

The high-fidelity prototype features a desktop and an app-based flow.  View the “T-Shirt” Lit Studios Custom Tee’s shop

Accessibility Considerations

Some of the original button designs were hard to select.  They were too small, or hard to click on. 

Users with mobility impairment were having issues selecting the smaller text and icons due to shaky hands. 

Going Forward

Takeaways:

Impact: 

The app makes it easy for users to create a custom Tee for single or low-volume orders. These can be used for personal use or business purposes. 

One quote from peer feedback:

“I like how streamlined this app is.  Simply go down the line like a burrito shop and get your custom Tee”

What I learned:

Minimalistic designs might seem like an easy option, but it’s very hard to do.  

Next Steps

Make updates for accessibility to the application and keep that in the forefront.

Conduct more user research to make sure the previous issues have been addressed and make sure new issues have not arisen.

https://www.figma.com/proto/imvZfmMqsjhEnQQ9aBTxwM/T-Shirt-Project-with-Images?type=design&node-id=212-310&t=IiLYPv3EUZguwK2v-1&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=220%3A131&show-proto-sidebar=1&mode=design