Custom t-shirt website design
Project over view
The product:
This website is for ordering customized T-shirt.The people who wants to add their own styles and designs.this website offers variety of design options.
Project duration:
January 2022 to May 2022
The problem:
Available websites having lack of branded product so customers concern about quality of the product and many website they have fixed minimum for orders & there is no much options for no minimums.
Responsibilities:
Conducting interviews ,paper and digital wireframing,low and high fidelity prototype,usability studies,accounting for accessibility,iterating on designs and responsive design.
The goal:
An efficient website to order branded good quality products and no fixed minimum for orders.
My role:
Generalist,Involved in the process of creating this website from the beginning to end.
Understanding the user
User research:
I conducted user interviews which I then turned in to empathy maps to better understand the target user and their needs.I discovered that many target users find difficulty to order good quality branded product and most of the time custom t-shirt website has their fixed number for minimum which frustrated many target users and blocking them to order online.
User painpoints
1.Quality 2.Order 3.Process 4.Experience
Most of the t-shirt website Most of the online website has minimum The existing website Online shopping
doesn't have good branded product. fixed number for orders this limit stops offer less design options . websites don’t provide
people from ordering online. an engaging browsing
experience .
Persona &Problem statement
Problem statement
Joe is a software engineer who attends lots of parties with friends
who needs an efficient website to order customized t-shirt
because he doesn't have to concern about the quality of the product.
User journey map
I created user a journey map of joe’s experience using the website to help identify possible pain points and improvement opportunities.
Starting the design
Sitemap
Users have difficulty to order branded product so I included shop by brand option on the home page.And people can easily navigate to the design page from homepage it makes navigation more easy and smooth.
Paper wireframes
Next I sketched out paper wireframes for each screen in my website keeping the user pain points about the product,navigation and checkout flow in mind.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy
Digital wireframes screen size variations
I changed screen size from desktop to mobile version by moving navigation bar in to navigation menu on the top left corner and moved logo to the center. Reduce the size of the images and placed the easy navigation icons on the footer
Low fidelity prototype
To create a low fidelity prototype,I connected all of the screens involved in the primary user flow of adding an item in to the cart and checking out.
At this point,I had received the feedback on my designs, about things like placement of button and page organization.I made sure to listen to their feedback and implemented several suggestions in places that addressed user pain points
Usability study findings
1.Home page 2.Cart 3.Customization
Users look for contact information Struggle to edit and change the Users weren’t satisfied
and live chat options product on the cart page. with lack of design option.
Refining the design
Mockups
Based on the insights from the usability study, I made changes to improve the site’s home page by adding contact information and live chat to expert
To make cart more intuitive I added edit,delete options.
Accessibility considerations
1.Headings 2.Landmarks 3.Screen readers
I used headings with different sized I used landmarks to help I designed the site with alt text
text and different colors for clear users navigate the site, available on each page for
visual hierarchy including users who rely on smooth screen reader access.
assistive technologies
Refined design
Final design for desktop
Screen size variations
I included consideration for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
Desktop
Mobile
High fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study.
Going forward
Takeaways
Impact:
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear hierarchy.
What I learned:
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user.when coming up with design ideas and solutions.
Next steps
1.Testing 2.Ideation 3.Edge cases
Conduct follow up usability Identify any additional areas of Consider edge case scenarios
testing on the new website. need and ideate on new feature. for the website.