Custom Tee's
A community project to provide easier access to custom print apparels.
Roles
Deliverables
Project Specifications
This is a concept project where I assumed the following roles:
• UXR Designer
• UI Designer
• UX Designer
Interaction Design: Low and high-fidelity interactive prototypes for key tasks on desktop, mobile, and tablets.
UX/UI Design:
• Competitive analysis
• User surveys
• Site map
• Personas
• Low-fidelity wireframes
• High-fidelity mockups and prototypes
• Usability tests and findings
Duration: 4 weeks
Tools:
• Adobe XD
• Photoshop
• Illustrator
• Miro
Overview
Custom Tee's is a traditional silk screen print shop that offers custom made apparels that are shipped straight to your door. Unlike most print shop, Custom Tee's rely on traditional silk screening process while maintaining high quality and standards.
Problem
Custom Tee's doesn't have an online present and wants to be part of the growing technology. Online base printshops require minimal purchase and uses press-on designs or low grade printing to create shirts. Digital printing can be costly with heavy machinery and doesn't always provide the same quality.
Recommended Approach
Create a custom website that provides quick service to desktop users and mobile users while providing easy useability and accessibility.
Research
My research with competitive analysis started with analyzing the various options to place custom apparels. I then went to the local mall to see similar retail stands and shops to create comparable. I developed user surveys and questionnaires to help understand users journeys and their pain points.
User Pain Points
The following pain points were commonly noted:
• Minimal Orders - Competitive audit determined that majority of these print shops required a minimal purchase.
• Long Lead Time - depending on quantity, it can take up to 2 to 3 weeks to receive an order.
• No Customer Builder - The design process can take several days before seeing first proof.
• Quality - Users complained about fitting due to different materials which made it difficult to purchase the correct apparel size.
User journey map
Here is the user journey map of Robert's experience trying to order custom t-shirts and possible pain points along with improvements.
Sitemap
In order to create the website, I laid out the basic flow of the web page to allow users to easily navigate through the site. This would help me develop a simple, yet effective, way for consumers to place their orders online.
Paper wireframes
I created a very simple layout to showcase the various header, hero, and product information. I included a wireframe for mobile to provide optimization when viewing on a smart device.
Low-fidelity
Here is the low-fidelity design created for two responsive sizes.
Usability Study
To make the products page appealing to more users, I provided more options.
High-fidelity
Here is the high-fidelity design including the custom builder.
Accessibility
To ensure accessibility for all users, the following were taken into consideration:
Takeaway
• By creating a tool to visually see the end product gives user a reassurance and comfort to move forward with their purchase.
• Accessibility should be a top focus while designing for all users which will allow more consumers to access the website.
• Optimization allows for all types of users to visit whether they are on a mobile device, or a desktop computer.