My role:
UX designer
Duration:
September 2021 - October 2021
Tools:
Adobe XD, Adobe Photoshop
YourTees is a clothing store that offers exclusive custom-made T-shirts with a variety of prints. The user has the opportunity to choose T-shirts with custom prints or create a T-shirt in a T-shirt design studio. Buying such a t-shirt is a great idea to stand out, cheer yourself up, or give someone a unique gift.
My responsibilities:
Conducting interviews, wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Make the website convenient, attractive for the user, providing all the necessary information to make a decision to purchase a product.
Goal:
Most websites online T-shirt stores have an unattractive design, provide little information on the product, do not have product reviews and a clear dimensional grid.
Problem:
Today, given the global situation, more and more people are shopping online. People love to shop online: it’s convenient, fast, fun. But when it comes to shopping for things like T-shirts, users face a number of challenges.
Context
I have researched all the available sites for online t-shirt designs and the sales of exclusive t-shirts and noted for myself aspects that I could include in my concept and any missing elements that I could include.
I conducted interviews with users, which I then turned into empathy maps to better understand the target user and their needs. I found that many target users suffer from a lack of product information, pictures of actual products that differ from the ones they receive, wrong size grid. And also sites are missing a section with support.
User research
User interface:
Most websites have a confusing interface. They are not attractive.
Navigation:
Online store website designs are often busy, which results in confusing navigation.
Product description:
There is no complete product description, no customer reviews provided. Photos of goods are of poor quality.
What pain points were established:
The target audience of the store is people of all ages who want to have a custom-made T-shirt with an original print.
So after identifying the pain points and conducting interviews, I created Personas. Each persona represents the need of a large group of users. I have highlighted two user groups.
The users & Personas
Based on my findings, I outlined the main aspects that I wanted to include on the site. I split the data into different categories. Highlighted the main sections such as Design Studio, T-shirts, Templates, Help. Navigation forms were arranged to sort the T-shirts by gender, type, and template. The structure I chose was designed to make things simple and easy.
Arcitecture & Sitemap
Digital wireframes make it easy to see how a design can help eliminate user pain points and improve user experience.
Since I was designing a responsive website, therefore, also layouts were created for the mobile version of the site.
Making the home page structure clear was one of the key points of my strategy.
I also designed the T-shirt Studio Design page to show more of the site’s functionality.
The main key part of my strategy was to design a product card that would fully disclose all information about the product.
Wireframes
Lo-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the main user flow of choosing a T-shirt, looking through with the size grid, and adding an item to the cart.
Cart
After the users added the product to the cart, they could not view it.
Catalog
Users were not able to navigate to the catalog from the dropdown menu in the header.
I conducted usability studies with usability testing. Findings from the usability study helped me guide the designs from wireframes to mockups.
The main task of usability testing was to determine usability and possible gaps in design that could arise under the influence of bias and assumptions.
Sorting&Filter
The user couldn't filter any t-shirts, so I added an option to do this. After clicking Apply button user can view the results of his choice.
These were the main findings uncovered by the usability study:
Usability testing & Insights
Based on the results of the usability study, I made design changes.
The way I arranged the UI elements on screens made my design more accessible and aesthetically pleasing.
The way I arranged the UI elements on screens made my design more accessible and aesthetically pleasing.
I also thought through visual elements such as typography, color, iconography, and images and checked various references, colors, and typographic combinations to get the impact I wanted.
Mockups
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.
High-fidelity prototype
Final polished design
results:
This project is very close to me. I love to shop online and I love to wear T-shirts and the more original the better. My mission was to show that the process of choosing and buying T-shirts can be simple and fun. I paid attention to micro animations that show the user what elements he can interact with. In the future, I will continue to define user flow and focus on defining experiences more precisely.
Outcomes:
The most important takeaway for me is to remember who your end-user is and always focus on the user’s needs when designing. It is also important to remember that users can access the site not only from a desktop computer but also from mobile devices. Therefore, it is necessary to think over the design for such devices as well.
Results & Outcomes
