No dead ends, only solutions
Case Study
Context
Sharpen design prompt as part of the Google UX Design Certificate: “Design a flow for ordering personalized sweatshirts.”
Project Overview
The Project:
As part of the Sharpen brief "Design a flow to order personalized sweatshirts", we created a new website that allows users to personalize sweatshirts in a simple, creative, and interactive way.
The site offers several features, including sweatshirt personalization assisted by artificial intelligence.
Project duration:
The project lasted from November to December 2024.
My role:
As the sole UX designer on this website project, I took on a generalist role that included various responsibilities.
The problem:
It can sometimes be difficult to offer or buy yourself original sweatshirts.
Users want to personalize a sweatshirt quickly with an original result in order to give or receive a unique, aesthetic, and affordable gift that brings joy.
Voici des captures d'écran du début et de la fin du flux utilisateur.
Responsibilities:
Here are some of the responsibilities I handled:
-
User research
-
Competitive audit
-
Information architecture
-
Visual design
-
Wireframing
-
Usability testing
-
Prototyping
The goal:
Design a website for Sweet Sweat that allows users to easily and quickly personalize sweatshirts.
Understanding the user
-
User research
-
Brainstorming ideas
-
Competitive audit
-
Personas
-
Problem statements
-
User journey map
-
User task and user flow steps
-
« Close-up » storyboard
-
« Overview » storyboard
Research: Summary
There were four main steps:
-
User research: Through interviews and empathy maps, the research helped identify the needs of users who wanted to quickly personalize sweatshirts with a creative, original, and aesthetically pleasing result.
-
Competitive audit:We analyzed the strengths and weaknesses of four competitors and identified gaps.
-
Usability testing: Conducted at the lo-fi prototype stage.
-
A second test: With the same users.
User Research: Summary
After a brainstorming session, we conducted interviews and empathy maps to understand the future users of our website and their needs.
Our research identified the primary user group as people aged 18 to 35 who want to personalize clothing online.
We took into account that some users had already personalized sweatshirts online, while others had never done so before.
3 out of 5 users had previously personalized and purchased sweatshirts online.
This research revealed additional needs, but we chose to focus specifically on AI-assisted personalization.
User Research: User Pain Points
1
Create an original sweatshirt easily
Users need to create and personalize sweatshirts quickly and effortlessly. However, creating an original and visually appealing design can be challenging.
2
Customization
​
Users should not only be able to generate a design, but also customize the sweatshirt’s characteristics.
3
Quick ordering
One of the challenges was to be able to create and place an order quickly.
The entire user flow needs to be fast and easy, ensuring the user doesn’t get stuck at any step—especially during the ordering process.
Brainstormed Ideas
-
AI generates a design based on a description provided by the user
-
Ability to choose between different font styles and designs
-
Option to hand-draw or upload one’s own creations, and even enhance them with AI
-
Automatic adjustment of the design or text to fit the sweatshirt size
-
Recommendations based on user preferences
-
AI can generate slogans
-
AI can adapt ideas based on current fashion trends or past styles
-
Ability to publish a design on social media
-
Voting system or peer advice on designs
-
Gift packaging customization
-
Design contest with voting, winner receives their sweatshirt for free
Competitive Audit
-
Objective: Compare the user experience of each competing website
Persona: Clara A.
Problem Statement:
Clara is a loving and creative young woman, but she hesitates when it comes to choosing a personalized gift for her boyfriend. She needs a simple and inspiring website to personalize a sweatshirt for him because she lacks creative ideas. She wants the process to be fast and easy.
User Story:
As a young woman looking for a gift for my boyfriend, I want to be able to quickly personalize a sweatshirt with an original result so I can give him a unique, stylish, and affordable gift that will make him happy.
Persona: Amadou D.
Problem Statement:
Amadou is looking for a simple and quick way to create personalized sweatshirts and sell them through his online shop.
He finds current platforms too complex or limited in personalization options and lacks tools to easily preview the final product.
User Story:
As a young entrepreneur passionate about streetwear and the automotive world, I want to be able to easily create and sell custom sweatshirts with original and professional designs to grow my brand without managing production and logistics.
User Journey Map: Persona: Clara A.
Goal: I want to offer him a personalized sweatshirt that shows I care about his geek culture.
User task and user flow steps
User Task: Use the website to personalize a sweatshirt using artificial intelligence.
User flow steps from entry point to task completion within the app:
-
Visit the website
-
Homepage
-
Navigate to Create with Artificial Intelligence
-
Enter keywords that match your expectations into the AI dialog box
-
Modify the size of one of the graphic designs on the front of the sweatshirt
-
Confirm the sweatshirt personalization
-
Click Add to Cart and complete the checkout process
« Close-up » storyboard
Scenario: Clara, a loving and creative young woman, is looking for a simple and inspiring website to personalize a sweatshirt for her boyfriend. Lacking ideas, she wants a tool that is quick and intuitive.
« Overview » storyboard
Starting the Design
-
Paper wireframes
-
Digital wireframes
-
Low-fidelity prototype
-
Usability study
Paper Wireframes
Here are various iterations of the homepage with screen size variations including desktop, mobile, and tablet formats. Due to time constraints, not every screen was sketched on paper. Iterations were done digitally after each design critique session.
1
2
3
4
5
6
8
7
9
15
14
13
10
11
12
6
8
7
9
1
2
3
4
5
15
14
13
10
11
12
6
7
9
1
2
3
4
5
15
14
13
10
11
12
Quelques éléments importants : 1 Tutorial ; 2 Create ; 3 Create with AI ; 4 Create with a stylist ; 5 Themes and ideas ; 6 Menu ; 7 Account ; 8 Language ; 9 Cart ; 10 FAQ ; 11 About ; 12 Shipping and returns ; 13 Social media ; 14 Featured carousel ; 15 Other highlights
Digital Wireframes
It was important for users to have access to different sweatshirt creation methods and to easily find design ideas.
Since then, the website design has continued to evolve.
Users will be able to create sweatshirt designs easily thanks to artificial intelligence.
Digital Wireframes
Digital mockup of the "Create with AI" page in different screen sizes (Web, tablet, and smartphone) before the first test.
Low-Fidelity Prototype
Here is the link to this low-fidelity prototype. It’s the version used for the first user test.
We invited users to focus on generating a sweatshirt design using AI and to complete the ordering process.
Usability Study: Settings
Type of study:
Unmoderated usability study
Participants :
5 participants
Location:
Istanbul, remote
Duration:
15 to 20 minutes
Usability Study: Results
I conducted two rounds of unmoderated usability testing with 5 participants (3 women and 2 men aged 18 to 35). Our goal was to determine whether the core user experience — creating, customizing, and ordering a sweatshirt was easy for users to accomplish.
Key performance indicators were Time spent fully customizing a sweatshirt using AI, Conversion rate,
System usability scale, User satisfaction
1
Saving in a library
Users couldn’t save their customized sweatshirts to a personal library.
2
Modify payment and shipping information
Users encountered difficulties during checkout, especially with entering payment and shipping information.
3
Signal announcing price change
Users encountered difficulties during checkout, especially with entering payment and shipping information.
Refining the Design
-
Design system
-
Mockups
-
High-Fidelity Prototype
-
Accessibility
Design system
Mockups
Users are now notified with a message when the price of their product changes.
Before the usability study
After the usability study
Mockups
Users are now notified with a message when the price of their product changes.
Before the usability study
After the usability study
Key Mockups
Users can now more easily add and edit their shipping address and payment method. They can also pay without saving their card details.
High-Fidelity Prototype
Here is the link to the high-fidelity prototype. It only includes the main user flow!
Accessibility Considerations
1
The font family used is Sans Serif, which makes reading easier for people with reading difficulties such as dyslexia.
We also paid attention to font choices and text styling.
2
The colors of texts, backgrounds, buttons, etc., were chosen to enhance emphasis.
This improves visibility for users with visual impairments and facilitates the user flow.
3
The chosen hierarchy will eventually support screen readers like TalkBack, which will be useful for users with visual impairments.
Conception responsive
-
Information Architecture
-
Responsive Layout Design
Site Map
Here is the initial site map. It has since evolved slightly.
Responsive Design:
The designs covered variations for mobile, tablet, and desktop screen sizes.
I moved the main menus downward to prioritize and highlight sweatshirt design proposals to inspire and encourage users to create their own.
Desktop
Tablet
Mobile Website
Going Forward
-
Key Takeaways
-
Next Steps
Key Takeaways
Impact:
The design aims to meet user needs — specifically the need to create and personalize sweatshirts.
Peer feedback excerpt:
"Using artificial intelligence makes it easy to create, and lets you generate designs again and again."
What I Learned:
While designing this website, we learned that research activities like usability testing and design critiques helped us overcome biases, broaden our perspective, and continuously improve the design through iteration.
Next Steps
1
Allow users to share their reviews and creations both on the platform and via social media, and plan additional usability testing to improve the experience.
2
Develop additional creation options, such as stylist-assisted customization.
3
Improve the app’s accessibility for users with disabilities.
Let’s Connect
Email: feyziocan.uxdesign@gmail.com
LinkedIn: www.linkedin.com/in/feyzi-ocan
Website: https://www.feyziocanuxdesign.com/
Thank you
Thank you for taking the time to explore my Sweet Sweat website project!
This is the second project I’ve completed.
There are certainly many possible improvements.
Feel free to contact me to share your thoughts and feedback.