Anime Tees
Project Overview
Anime Tees is a shopping website offering affordable T-shirts designed for anime enthusiasts. The website primarily caters to a younger audience, particularly those aged 10 to 25, including school and college students, making the shopping experience fun and trendy.
Duration: May 2024 - July 2024
Role: UX/UI Designer
Project Type: Website
My Responsibilities
- User research
- Competitive analysis
- Paper and digital wireframing
- Lo-fi and hi-fi prototyping
- Conducting usability testing
- Design iteration
- Applying accessibility guidelines
- Responsive design
The problem
Most websites provide a wide range of options, but they aren't focused on a specific niche, which can be confusing for users.
The goal
Create a website that offers T-shirts with a straightforward user flow and intuitive navigation, ensuring a fun user experience.
Understanding the User
User Research
I conducted user interviews and surveys for my research. Initially, I assumed that Anime Tees would be similar to other shopping websites. However, after gathering insights from the interviews and surveys, I discovered that the website should have a playful layout emphasizing the specific anime genres it features. Additionally, it needs smooth payment options for regular users, special offers for students, and pre-order options for select designs.
Pain Points
Options
Too many options when browsing for an item
Experience
Traditional websites require numerous clicks, which can confuse users.
Interaction
Current websites feel dull and unengaging for the younger generation.
Payment
It's essential for users to have seamless payment methods.
Persona: Troy Miller
Troy is studying to be a software engineer who wants to buy authentic anime t-shirts with ease.
User Journey Map
I have created a user journey map for Troy’s experience focusing on the pain points and improvement opportunities.
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 to the cart and checking out.
At this point, I had received feedback on my designs from family and friends about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
Starting the Design
Sitemap
The sitemap shows the flow of the website mentioning menu and submenu associated with each option. This is prepared by keeping user experience in mind.
Paper Wireframes
Next, I developed wireframes for my website, taking all the pain points into account. The images on the right illustrate the progression from the initial concept to the final wireframe version.
Usability Testing
These are the main findings from the usability study:
Study Type: Unmoderated usability study
Participants: 3 participants
Length: 20-30 minutes
Bag
There is no way to go back to the list from where item is selected.
Share merchandise
There is no share button to share the item with anyone.
Wishlist
There is no quick access to wishlist.
Save Payment and Address button
It doesn’t show any message to confirm that address or payment method is save.
Mockups after Usability Testing
Wishlist
Based on the insights from the usability testing, I made changes to improve the site’s flow. One of the changes I made was adding the quick access to wishlist. This allowed users more freedom to add items in their bag without going through a complicated process of getting wishlist from profile saving them few clicks.
Breadcrumb
To make the shopping experience easier for users, I added a breadcrumb which takes back user to the previous steps and makes item selection process better for user.
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, as well as several changes suggested after usability test.
View Prototype
Accessibility considerations
Navigation
I have added breadcrumb to make sure that user can access any part of the website from any page.
Headings Hierarchy
I have used clear hierarchy of headings with simple and understandable text.
Color Contrast
Maintained a neutral color contrast for the text to ensure it is clearly visible against the colored background.
Takeaways
Impact:
The target users reported that the design was easy to navigate, more engaging thanks to the images, and showcased a clear visual hierarchy.
What I learned:
I discovered that even minor design adjustments can significantly affect the user experience. The key lesson for me is to prioritize clear navigation and concentrate on the actual needs of users when developing design concepts and solutions.