Sweatshirt.
Sweatshirt. is a fictional online store that lets you customize sweatshirt. A typical user is between 17-30 years old. The site allows users to customize their own or use a template for customization.
Embedded Files
Project Overview
P R O B L E M
Consumers need a way to properly visualize their custom designs.
G O A L
Design an website that allows users to easily browse through and customize their sweatshirts, by having a live customization preview and making the website simple and intuitive.
R O L E
UX Designer designing a website for Sweatshirt. from conception to delivery.
R E S P O N S I B I L I T I E S
Conducting user interviews, paper and digital wireframing, low-fidelity and high-fidelity prototyping, conducting usability studies, and iterating on designs.
Understanding the User
U S E R R E S E A R C H
Summary: Empathized with users by conducting interviews and creating user journey maps. A primary user group identified through research was working young adults who want to customize items for themselves and for gifts to others.
P A I N P O I N T S
Expectations not met
Users are sometimes surprised with what they end up with because they don't have a visual on how the product is going to look like.
Cluttered websites
Most websites that customizes items as gifts tend to be cluttered because of the sheer number of products. It makes it hard to navigate and overwhelming for users.
P E R S O N A
Emina is a 25-year old teacher who needs a way to easily personalize gifts for her friends. She wants to make sure that there are no errors when customizing the sweatshirt and that they come on time.
U S E R J O U R N E Y M A P
Emina's user journey map showed instances where she would get frustrated in the process. It also revealed how helpful it would be for users to have a live customization preview to help them visualize the final product.
Starting the Design
P A P E R W I R E F R A M E S
Initial wireframes were drawn on paper. Each page had numerous iterations to see which layout would best fit the project.
D I G I T A L W I R E F R A M E S
Simple Homepage: There is a clear call-to-action button on the homepage. It tells you what the website can do for you and start the sweatshirt customization process.
Live Customization Preview: On the sweatshirt customization page, you can see all the options that you can customize on the sweatshirt. To the left of the product customization and description, is a live preview of the sweatshirt.
U S A B I L I T Y S T U D Y
One round of usability study was conducted to figure out if the designs were working for the users. The usability study was tested on the low-fidelity prototype and guided the succeeding design iterations.
Findings
Users want the ability to have the sweatshirts gift-wrapped for easy gifting.
Some users were confused by the 'sweatshirt inspiration' page. The page is not intuitive enough and the purpose was not clear.
Some users also want a visual on how the sweatshirt would fit on a model.
L O W - F I D E L I T Y P R O T O T Y P E
The low-fidelity prototype shows the primary user flow of customizing a sweatshirt and completing the order.
Refining the Design
H I G H - F I D E L I T Y M O C K U P S
Sweatshirt Inspiration: Renamed 'Sweatshirt Inspiration' to 'Sweatshirt templates', for clearer messaging. All templates have accompanying text like the price and 'Use Template' to make the purpose of the page and its contents clear.
Gift-Wrap Feature: Some users wanted the option to gift wrap the sweatshirts. I've revised the design on the Cart page to allow users the gift wrapping option.
Sweatshirt Visual: Added additional images on the sweatshirt customization page where users are able to view the product on different models and perspectives.
H I G H - F I D E L I T Y P R O T O T Y P E
Findings from the usability study were implemented on the high-fidelity prototype.
Going Forward
T A K E A W A Y S
1 In future designs, I would try to add and experiment more with texture and depth. Doing so would make the page more dynamic and engaging.
2 Creating sticker sheets or design systems are extremely helpful in keeping all elements on brand.
N E X T S T E P S
Usability Studies
Usability studies are extremely helpful in determining if the design is working as intended. Another round of usability study using the high-fidelity prototype would be helpful.
Add More Features
Next phases of the product could include shipping the sweatshirts to different addresses, drag and drop sweatshirt designer, and a reviews feature.
Email me at margavancena@gmail.com / Connect on LinkedIn
Margaret Avancena. Made with ❤️ on Google Sites!
Page updated
Google Sites
Report abuse