The Sweat Crew

Researching

From chatting with users who frequently shop online to users who are interested in purchasing customized clothing, the research process for this project required a more narrow focus than the Vancity Sushi project.

Research Goals: While the ultimate goal is to create a usable, responsive website for various screens, the other priority is to make the experience straightforward, accessible, and user‐friendly.

By keeping these goals in mind, the primary needs of the users and the company will be met.

Research Questions:

• How does a user feel about navigating the website?
• What challenges do users face when browsing the products and placing an order?
• What are some ways to improve the experience?
• How likely would users return to place another order in the future based on their experience?
• What are the unidentified pain points in the low‐fidelity prototype?

Research Findings & Pain Points

The User Research process started with looking for direct and indirect competitors. I wanted first‐hand experience understanding a user's process when searching for and ordering custom clothes.

My assumption before the research was that users would want a simple process to add design details based on the thought that there could be several components to specify for a custom order.

After learning about the competitors and potential users, I gained insight into the pain points of the product and process.

The 3 central pain points users commented on when shopping for customized items online are as follows:

1. Can't Visualize End Product: Some participants found it challenging to visualize the final product of a custom design when there were not enough sample reference photos.
2. Limited Selection: Some participants felt concerned about a limited selection of design styles, which led them to abandon their orders.
3. Long Shopping Experience: Having a simple checkout process is favoured by all participants as there are various components to remember during the ordering process.

In addition to the initial challenges previously outlined, these pain points provide a more narrow focus.

Identifying pain points helps designers like myself learn how designers to make custom ordering experiences more enjoyable, especially since a lot of details are needed to complete the order.

Competitive Analysis

As for the competitors, The Sweat Crew's business model overlapped with several direct and indirect local businesses but also differed in other ways.

Most local businesses focused on bulk custom orders for school jerseys, uniforms, and company-branded clothing. Other local merchants combined their custom printing clothing business with a department store.

Although The Sweat Crew also focuses on customized clothing, the e-commerce store focuses on a business-to-customer transaction. The Sweat Crew's competitors are more business-to-organization focused.

The primary weaknesses observed include the following:

• Lack of visual appeal for the average consumer
• Too many pop‐up windows overwhelm the visual layout
• Limited customization options
• Multiple windows are required for the ordering process, which takes too long to load on the page, therefore slowing the momentum of the shopping experience

Meet the Persona

The target audience and demographic for ordering customized clothing (that is not for bulk jersey or school uniform orders) fall under the 18 to 50 years of age bracket.

I spoke with 5 participants who fit this demographic to learn about who they are, their goals for life, and any frustrations they may experience when ordering online.

After gathering and organizing the participants' thoughts and feelings, I created the “Ann Byrne” persona to represent the target audience for this project.

Persona Summary for Ann Byrne

Ann is a busy part‐time employee and student. She needs a quick, simple, and easy online shopping experience. A user-friendly experience aligns with Ann's values of saving time and money when acquiring customized items, clothing, and shoes that reflect her unique personality.

The top goals and frustrations of this persona include the following:

Goals:

• Purchase affordable yet unique clothing, items, and shoes that represent her unique style
• Spend more time working on continuing studies to start getting experience for her career
• Save up on her own place and travel more after finishing school

Frustrations:

• “The web pages sometimes suck because when it reloads, your progress is gone.”
• “Online shopping should be quick… but it's difficult to trust sometimes.”
• “Sometimes there's too many options, but other times there isn't an option that fits what I need.”

User Story

User Story for the Ann Byrne Persona

The User Story for the Ann Byrne Persona focuses on part‐time employees and students who want to shop online quickly and easily so that they can spend more time on other enjoyable activities and responsibilities.

With a persona and user story created, the research process proceeded to learn more about The Sweat Crew's direct and indirect competitors.

Outlining the Journey

After gathering information about the users and the competitors, it is time to begin outlining the journey.

Although we can imagine how a user's journey may unfold, it's easier to identify obstacles, missing steps, and any other opportunities for improvement when we create a user journey map.

User Journey Map for Ann Byrne Persona

I approached the user journey map activity by focusing on the persona, Ann, and her goal to purchase affordable yet unique clothing online.

It is important to note that Ann wants to save time and money even while she shops for personalized items and clothing.

Problem Statement

Problem Statement for the Ann Byrne Persona

From learning about the primary target audience and The Sweat Crew's competitors, a problem statement for the Ann Byrne persona outlines the user's characteristics, needs, and insight to guide the design and user experience for The Sweat Crew's shopping experience.

Site Mapping

Before I started drawing wireframes, I gathered and organized the website content.

I thought about the sections needed to showcase The Sweat Crew's products while reserving space for resources users may look for during their shopping experience.

Once I culled the essential categories and sections, I organized them for quick navigation across all screens (as seen below).

Website Sitemap for The Sweat Crew website

Wireframing

With the sitemap in mind, I drew several variations of the homepage. I started by recalling that the persona, Ann, wants an efficient shopping experience.

Providing an efficient shopping experience means users want to navigate the website quickly and easily.

Having immediate access to a search button or bar, an account login, and an updated shopping cart may assist with quick navigation.

Pen & Paper Wireframe for Variations A and B for Homepage

Another approach to an efficient shopping experience is to display the products immediately.

In Variations A to E, I added additional image boxes to give users more opportunities to visualize the product (rather than only reading about it in the description).

In Variation F, I combined the most helpful components I sketched from Variation A to E.

Pen & Paper Wireframe for Variations C and D for Homepage

Adding Accordions to the quick links above the footer extended the mobile experience as many of The Sweat Crew's competitors and popular clothing brands like Nike support their mobile visitors by having as much top‐down information available to help users meet their needs and reduce abandoned experiences.

Another benefit and priority is to reduce the amount of endless scrolling experience for mobile users as a common complaint I discovered from the initial interviews was the discomfort of gesturing the thumb continuously.

Pen & Paper Wireframe for Mobile Screen for Homepage

Style Guide

During the prototype stage, I gathered inspiration for The Sweat Crew's brand and created The Sweat Crew's colour palette by drawing inspiration from Pinterest.

I browsed and saved images to showcase sweatshirts and reflect the “mood” of the targeted audience would be interested in (based on user research).

With a board of images, I started sampling colors that would display a contrasting yet visually appealing fashion aesthetic to reflect the brand while maintaining interest from the users.

Style Guide, Style Tile (or Sticker Sheet) for The Sweat Crew

As seen in the images and high‐fidelity prototype, the pastel green tone (#CCD8CC) softens the black‐and‐white theme on every page.

Although the design appeared practical initially, I later learned I overlooked a problematic aspect — the navigation experience. Through a moderated usability study I planned and conducted, I learned from real users' feedback ways to improve the experience by making the interface more intuitive.

Before diving into the key findings of the study, let's keep the goals of the study in mind:

• Determine the useful and useless components
• Identify new, overlooked pain points
• Create a list of areas to modify for an interruption‐free shopping experience

After chatting with the participants, here are the key findings from the moderated usability study:

1. The “How We Customize” section confused users (or wasn't simple to navigate the website).
2. “Dissolve” transitions confused users about where the user is on the web page.
3. Reviewing the updated visuals for the order would make it easier for users to follow along with the order process.

With the participants' feedback, I modified the original layout and design to resolve these pain points.

Here are two examples that significantly impact the user's shopping experience.

Homepage from Before and After Usability Study

Customization Ordering Page from Before and After Usability Study

Reflecting on the Challenges

I realized the practice of ideating for various screen sizes and understanding how to make the transition between screen sizes fluid to appear “responsive” was the true challenge for me.

From this project and the repetition of creating each of the screens for this project's Minimum Viable Product (MVP) iteration, I learned further to empathize with the user from my reflections on each of the top three challenges below.

Challenge 1: Design a responsive website for multiple screens

One of the most frustrating parts about online shopping from mobile and tablet devices is the non-responsive web experience.

Spending more time with my pen & paper to sketch wireframes for all screen types taught me to consider enlarging or minimizing sections as the user's screens get smaller.

Digital Wireframe for Tablet and Mobile Screens of the Homepage

Challenge 2: Design a responsive website for multiple screens

Ordering customized items, clothing, and shoes is complicated when users need to provide design details and image references all in one place.

With a straightforward ordering process, the user can feel confident and at ease when shopping, creating a positive impression of the brand's attention to the user's shopping experience.

Customization Step 3, revealing the product design

Challenge 3: Easy to navigate for a positive first impression

The dominant feeling users had about the first version of the low‐fidelity prototype was confusion.

To provide users with a more confident shopping experience, some sections were removed from the Homepage to include the essential components users want and need to start their ordering process.

Homepage for The Sweat Crew's website