T-Shirt Website Redesign
Shirts by Mike is an e-commerce website that sells t-shirts for young people based in the United States. Shirts by Mike wants to know if anything should be changed to make the site look and function better for their customers to increase their sales. For this project, I was tasked with making UX/UI improvements to shirtsbymike.com to improve the site's looks and functionality for its users. I will explain each step of this UX design process and its improvements that will benefit their customers. Finally, I will show my final design mockup and interactive design.
This project will include:
Assumptions
User Research
User Interview
Problems and solutions
Sketching
Wireframing
Prototyping
User Testing
Using these artifacts I was then able to construct a series of high fidelity design mockups for a new and improved website and mobile app for shirtsbymike.com.
Target Users
Age 16-35
Residents of the United States
Online learning program students
Lifelong learners
Values community
Playful
Desire to feel connected to the community
Assumptions
Users are unhappy with the existing lack of functionality.
Users would like to be given brief, organized, and intuitive navigation features.
Providing product details and customer reviews are crucial to influencing users to make better purchase decisions.
Competitive Analysis
Empathy Map
I developed an empathy map for Ellie Stevens. This allowed me to further understand my user’s pains and gains, as well as seeing her state of mind when she shops for clothes online, so I can better translate user quotes to a clear redesign goal.
Journey Map
This journey map helped me analyze how Ellie Steve’s interacted with shirtsbymike.com. I focused on what she is concerned about, how she felt, and what frustrations she encountered through this experience. As a UX designer, creating a journey map helps me to develop a better understanding of my users and allows me to see a product from a user’s point of view. It also helps me focus on user’s pain points to find a better solution to solve problems and achieve better users’ goals.
User Story
Problems and Solutions
After user research, I analyzed the shirtsbymike.com website and made a list of issues with the original design. I then figured out solutions to solve these pain points, and with this in mind, began my redesign of the new and improved shirtsbymike.com website and designed their mobile app.
Original Homepage
Pain points:
There is no search bar for users to search for products.
The navigation section is missing and it’s hard for users to know where to go next.
No indication if displayed products are for men, women, or unsex.
The product list takes up too much room on the homepage and looks overwhelming. Nothing draws shoppers’ attention or brings special insight.
The footer doesn’t contain enough support information such as “Customer Service”, “About Shirts by Mike”, etc.
Overall key features are missing and the homepage doesn’t deliver positive usability to shoppers. A clunky or non-intuitive search experience will frustrate users and make shoppers feel lost. The entire interface looks outdated, boring, distrustful, and doesn’t catch the shoppers’ attention.
My Solutions
Add a search bar. The search bar is often the first interaction a user has with a website. Adding a search bar is essential and it feels like a natural human experience that can quickly guide shoppers to what they’re looking for.
Build a navigation bar. Navigation is a very important key feature that helps orient shoppers within the website. Providing visible and easy-to-use navigation with parent product categories motivates shoppers to take action on where to go next, rather than getting lost.
Add structure for a smooth shopping flow.
A hero image that grabs shoppers’ attention
An area with the main shopping section
Add additional sections such as “Best Seller” and “Big Sale” can act as a trigger for customers and promote urgent shopping motivation.
Remove the T-shirt and the tank top shopping list from the homepage and put them on separate pages.
A footer with important and additional information regarding the Shirts by Mike company, customer service, and its products.
Include the price underneath each product, so shoppers can see how much it cost.
Move the product lists to separated pages in order to reuse this space for product promotion sections.
Make changes for a better UI.
Explore a new color palette that better matches Shirts by Mike’s branding and tone.
Use modern style fonts that increase readability.
Create a new hero image that better matches the branding and delivers a better first impression to shoppers.
Original Single Product Details Page
Pain Points:
There is only one display image that doesn’t show enough details about the T-shirt.
The title or description doesn’t indicate if this T-shirt is for men, women, or unisex.
The product description is too short and doesn’t provide enough information regarding this shirt.
There is no size guide to help shoppers know if it will fit them.
There are no customer reviews to help shoppers before making a purchase decision.
The “add to cart” CTA is missing and the shopping cart on the right top is confusing.
The shipping and return information is missing and makes shoppers feel worried.
My Solutions
Provide more display images that show the details about the T-shirt, so shoppers are given an idea of how the product looks and increase their confidence when buying clothes from shirtsbymike.com.
Change the product title to include if the t-shirt is for men, women, or unisex.
Provide a more in-depth description that better helps shoppers understand the product.
Provide a size chart to help shoppers to measure their body in order to select the right size of the product.
Include an “add to cart” CTA button and make it stand out on the page.
Provide shipping and return information to help shoppers understand the policy before purchasing a product.
More Development
The catalog page. I added the ability to sort and filter results. I added star ratings below each product so users could sort by price or rating. I also added a heart icon on the top right of each product image giving users the ability to add favorite products to their wishlist.
The contact page. I chose “email” us as the primary contact option. I also added FAQ, phone number, live chat, and the company address as secondary ways to get help. I focused on making the hierarchy clear and understandable so customers could get the help they need by making all of the contact options easy to find on the page.
I used the website redesign content as a reference when developing the mobile app for shirtsbymike.com. My development goal was to provide a good user experience for users who prefer shopping for clothes on their mobile devices.
I followed the main theme of the shirtsbymike.com website when developing the following
Home
Navigation Menu
Men’s Catalog
Individual Product
Contact Us
Checkout was split across multiple steps
Shipping Information guides shoppers to fill out shipping details
Billing Information guides shoppers to fill out the payment method and credit card billing information.
Review Order allows shoppers to review and confirm the items ordered, shipping, and billing details.
Order Confirmation confirms that the order has been placed and displays the order summary, order number, order date, shipping, and billing details.
Redesign Summary
Identifying major pain points that users are experiencing when they use the product is essential to my redesign process. It helps me understand users’ problems and provide adequate solutions that address the issues before I begin work on the actual redesign process.
I also developed and designed additional pages that provide a more engaging and completing shopping experience for shirtsbymike.com users. The mobile version UX design process helped me practiced how to keep the design consistent as the website version and logically organize the content in a small mobile space.
Sketches - Website
Sketches - Mobile App
Wireframes - Website
Wireframes - Mobile App
User Testing
After created the high-fidelity wireframes, I conducted an interview and invited three users for the user testing. The user testing helped me identify what parts went well, and what parts need to be improved before the actual design started. Here is the summary of the interview notes.
Pros:
The navigation is clear, well-organized, and directly guides different users to achieve their shopping goals.
The search bar is really helpful for users to search for items they are looking for.
The users feel trustable to shop when they see the “Free Shipping”, “Quality guaranteed” and “Easy Return” labels on the homepage.
The layout of the sections is well-organized and present clearly. The structure is logical; the promotion sections are eye-catching and bring inspiration to users.
The individual product page includes the display images, star ratings, product details, size chart, shipping, and returns policy, which is really helpful for users to a better understanding before making a purchase. It also gives users the confidence to shop for the products.
Users like the customer review section and believe this is a very necessary feature to help them know how other customers think about an actual product.
Users like the “ product you may like” section and want to be given more products to take a look at.
The checkout process is clear, easy, and smooth with three simple steps. It delivers all the key information shoppers need to fill out and review.
The contact page clearly shows the options Shirts by Mike provides to their customers. Each option is well-organized and easy to view. Users think the FAQ feature is useful for them to look for a comment question and answer.
Cons:
On the individual product details page of the mobile version, users suggest adding a “enlarge” icon on the display photos.
The checkout process includes three steps; users wonder if there is a guild to show how many steps it takes for them to complete a checkout process.
Users wonder how fast a purchased product will be delivered and want to know an estimated delivery time.
On the navigation menu, users would like to add a “setting” section to manage their accounts.
