Understanding the User

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users are busy individuals and wish to spend their free time with family and friends, so they prefer to simplify tasks as much as possible. However, many custom printing websites are overly saturated with other products and services which often distracts and confuses users when navigating through the website and slows down their progress. Ultimately, this makes the overall custom printing process difficult and time-consuming for the user.

User Pain Points

Starting the Design

Sitemap

Challenges with the website user flow and unfamiliarity with navigation bar tabs were two primary pain points for users, so I used that knowledge to create a sitemap.

My goal was to make well-thought-out information architecture decisions that would improve user flow and provide straightforward familiar navigation bar tabs. I choose a hierarchical and sequential structure, in order to make the website user friendly.

Paper Wireframes

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 the user flow by providing a tab and a clickable button to begin the custom printing process; navigation bar tabs that are specific, familiar, and make sense to users; keeping the layout clean and simple helps users stay focus on their task.

Usability Findings

To create a low-fidelity prototype, I connected all the screens involved in the entire user flow from beginning the custom printing t-shirts process to the end of the ordering process.

View Custom Printed T-Shirts low-fidelity prototype

The low-fidelity prototype was used in an unmoderated usability study wth five participants. Below are the major findings revealed by the usability study:

Refining the Design

Mockups

Based on the insights from the usability study, I made changes to the fabric color, style, fit, and size page. I reorganized the page's layout, added more negative space, and added contrast color. This allowed users to visually feel at ease while making their selections.

Based on user feedback, in order to help users feel confident that they are making an informed decision when choosing the best printing techniques for their t-shirt for their needs, I added brief descriptions under each printing technique on the Homepage.

Accessibility Considerations

Mobile Screen Size Variation

I included considerations for mobile screen size with a flyout menu, in order to offer users an alternate option. I chose mobile screen size because users mostly access information on their mobile phone when a desktop or laptop is not available.

Refined Designs

During the usability study, I noticed two major issues that baffled users on what steps to take and interrupted the users' progress when they tried to upload their artwork. Below are notable changes I made after the usability study.

In the interaction panel, trigger "Delay Time" was increased. The action was changed from "Transition" to "Auto-Animate". This change allows to view the screen easily. A brief description is added to inform users on what is happening and what to do in case an error occurs.

In the interaction panel, trigger was changed from "Tap" to "Time" with a 2 second delay. The animation duration was increased. This correction makes the transaction to the next page smooth and automatic, so the user wil know what happens next

High-fidelity Prototype

My high-fidelity prototype has the same user flow as the low-fidelity prototype. It included some design changes which were made after the usability study and suggestions from my peers.

View the Custom Printed T-Shirts high-fidelity prototype