RESHNA KARTHIK - Custom t-shirt

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.