User Research

To start, I asked myself a few initial questions. Who is our primary user? What kind of goals do they have? Why would someone want to use this website? After interviewing five participants, it was evident that the goals they wanted to accomplish fell within similar categories; being able to easily customize clothing to fit them properly & supporting a sustainable clothing brand.

The interviews conducted gave me a better understanding of the usability of the website in its beginning stages. I created an affinity diagram to categorize similar themes to further develop actionable insights.

AFFINITY DIAGRAM

Meet the Users

Name: Simon

Age: 29

Occupation: Pro Gamer

Simon is a pro gamer who also likes to read when he’s not gaming. Recently, he’s gotten into a book series that has a unique symbol associated with it. He’s been looking everywhere for merch that is subtle but still means something to him but hasn't had any luck. He would love to be able to combine the book’s symbol with his gaming logo to make a hoodie unique to himself.

Name: Bella

Age: 40

Occupation: Yoga Instructor

Bella is a yoga instructor who loves her dog, Boba. Bella loves to go shopping but often finds the crewneck sweater and sweatpant selections in store never fit her properly. The sweaters are either too cropped or too long and can be bothersome during her yoga sessions. Other times, even if the sweater is the right fit, the design is something she wouldn’t wear. Bella wants to be able to customize the length of her sweaters and wants to add a cute design of her dog that she would love to wear.

Competitive Audit

I completed a competitive audit to identify the strengths and weaknesses of both direct and indirect competitors. This helped to determine elements that worked well on their websites and any parts that needed to be improved. I used these results to continue to revise the design of CUSE’s website to better reflect the users needs and improve the user experience.

The majority of the features between competitors were quite similar, however, some opportunities I noticed that could be applied to the CUSE website include:

• Providing audio versions or screen readers

• Having the ability to customize the length of sweaters

• Providing colour options that are more neutral and pastel.

Information Architecture

I created a user flow of what the customizing and ordering process would look like on the CUSE website. This allowed me to see how users can navigate through the website and ensures that the site’s look, functionality, and content is clearly illustrated.

Paper Wireframes

Sketching out different variations of the paper wireframes for the homepage allowed me to focus on addressing the user pain points of customization, interaction, and navigation. For the homepage, I prioritized using large images as well as other clear labels to help users navigate and customize their orders easily.

PAPER WIREFRAMES

Since CUSE’s customers access the site on a variety of different devices, I sketched additional designs for different screen sizes to make sure the site was fully responsive.

Digital Wireframes

As I moved from paper to digital wireframes, it was easier to see if my designs could address user pain points and improve the user experience. Prioritizing useful button locations and visual elements on the homepage was one of the strategies to make navigation easier for users.

Images of products are placed near the top of the homepage for easy browsing

Easy access to the design lab

Assumptions & Observations

Assumptions were determined to identify what was accurate and what wasn’t. I interviewed a sample of five participants when conducting research during the first design sprint.

The first assumption was that users would use the CUSE website to customize clothing that would fit their needs, including the colour, design, and length of the product. 60% of participants I interviewed agreed. They stated that they would use this website mainly for the design lab to customize a product that is unique to them.

Another assumption was that users would require labels and other information to get started on using the design lab. Most online shopping websites don’t have the ability to customize products so this would be a new feature to many users. 80% of participants I interviewed agreed and stated they had no idea where to begin and was confused with how to customize their product.

I made sure to keep these assumptions and observations in mind when designing the CUSE website.

Iteration

The feedback from the usability study was incorporated into high-fidelity mockups. The high-fidelity mockups connected the primary user flow of browsing, customizing, and ordering from the website.

Users wanted to be able to customize their own clothing. However, users were confused on how to use the design lab and how to get started. The use of labels can help guide new users to customize a product.

Users wanted a quick and streamlined checkout process. However, users weren’t able to easily copy the shipping address information into the billing info field. It would definitely help save time to have the ability to use the same address for both shipping and billing information.

Challenge 1

User-Friendly and Creative Design Lab

Creating a design lab that is user friendly can encourage more users to use and order from the website. Labels were included on how to get started and how to customize the products. This allowed users more freedom to customize the product if they want to or to simply add the original product to the cart.

With all the customizations listed in the cart page, users can easily confirm their order quickly, leading to a faster checkout process. To make the checkout flow even easier for users, I added a check box that allowed users to use the same address for billing and shipping.

While online shopping has become more popular to use, many users are unfamiliar with online customizations. To help users easily navigate through the CUSE website, recognizable iconography, detailed imagery, and clear labels are used.

Style Guide

CUSE’s signature look combines different shades of green to convey the feeling of calmness and comfort to our users. Green is also commonly associated with nature, freshness, and the Earth, which connects back to one of CUSE’s value, sustainability. The main typeface for the website is Muli. I wanted to select a sans-serif typeface that would pair well with the rounded button styles, as well as the black/white contrast in the website.