Justified

MY ROLES

User Research

User Interface Design

TOOLKIT

TIMELINE

4 weeks, approximately 80 hours

BACKGROUND

With over 400 stores in 32 countries, Justified is a fictional store that aspires to make sustainable clothing accessible and affordable for all ages and genders. With success in retail stores, they want to make their mark in the digital world. The website will be an extension of the current brand & product offerings. As part of DesignLab’s UX Academy curriculum, I was tasked with the challenge of creating a responsive website for Justified.

THE PROBLEM

Consumers voiced the desire for the sustainable brand, Justified, to go online as many other stores have so that they can conveniently shop from anywhere and find sizes and styles that might not be available in store.

SOLUTION

In order to solve this problem, Justified wants to have a responsive e-commerce website and also modernize their brand and logo. The brand message they are going for is neutral, comfortable, modern and clean.

Market Research & Competitive Analysis

I conducted market research to understand the industry and how competition in fashion retail works. It helped provide valuable insights into demographics and recent trends in the e-commerce apparel space. Additionally, I looked at five fast fashion brands that sell affordable clothes for both men and women. I researched both direct and indirect competitors to get a better understanding of their strengths and weaknesses and where opportunities may be for Justified.

1:1 Interviews

I recruited three participants who are frequent online shoppers to conduct 1:1 interviews over video call to dive deeper into potential user’s online shopping habits, motivations, needs, frustrations and pains.

The key findings of the interviews were: 

• User friendly and clear navigation is very important for their enjoyment of using the site

• Bad customer service, difficult shipping/return policies, poor quality photos and inconsistent product sizes are all major pain points for consumers

• Users enjoy shopping at a company that has a larger world mission, helps validate their purchases

• Consumers want trendy, affordable clothes that they can find quickly and efficiently on the website

Empathy Map

Following the series of interviews, I created an empathy map of a potential customer from our target audience who is likely to visit Justified. The purpose of this is to get into the mind of the person, try to understand their personality and how they would interact with Justified’s website.

To do this, I synthesized interview findings to extrapolate relevant information allowing me to discover the users potential wants and needs when shopping online.

User Persona

After creating the empathy map, I now had a reference point for the user persona by focusing on an empathic approach.

With the data gathered from market research, I generated a persona using the statistical knowledge I gained to represent a certain type of user for Justified. I flushed out user traits, and defined the goals, needs, and frustrations for the ideal Justified online shopper.

Let’s meet Cassie, a UX Designer in San Francisco. She’s always on the go and has minimal free time. She likes looking trendy and shopping at companies that value important causes like sustainability and equality.

Goals, Defined

To make Justified stand out in the market, we need to offer good quality and consistent products that are affordable. As the competitors are typically only in one locale, expanding globally will give Justified a competitive edge.

As well, creating a brand where users feel comfortable shopping is important to maintain brand loyalty. In order to do this we need to be transparent about our global initiatives and create a simplistic and intuitive interface.

Product Roadmap

I put the solutions I brainstormed into a list of product features to create a comprehensive product roadmap. These features were sorted into four categories, including Must-Have (P1), Nice-to-Have (P2), Surprising and Delightful (P3), and Can Come Later (P4) features.

They were sorted based on how well they can help achieve business goals and user goals. The Product Roadmap not only infuses the project goals into our product, but also ensures we prioritize the most important features in the development cycle, such as mentorship and community capabilities.

Site Map

Based on my product roadmap I created a site map to plan the navigation of the site. The simplicity of the overall structure aligns with the company goals to reduce cognitive overload when users look for content.

When a user hovers over the navigation features in blue, they will be able to click into any of the sub categories and begin exploring.

User Flow

Creating a user flow is valuable in understanding how a user moves through a website. The task for the user flow is to purchase a pair of women’s jeans from search to checkout.

I chose this task because at the very least, the site needs to be able to allow users to complete the main task of finding and purchasing an item in order for the business to make money.

Developing this path helped me determine how many pages are needed, what order they should appear in, and what components are required for the user to complete the task successfully.

Wireframes

Thinking back to Cassie, our persona, she has two main needs:

1. Being trendy without having much time to shop

2. Shopping at companies that value important causes

With this, I designed pages that highlighted not only clothing, but the sustainable stance Justified stands for. These three pages are:

• Homepage

• Browse category page

• Product details page

The browse page in particular highlights Cassie’s need to shop quickly and efficiently. I included numerous filters and sorting mechanism so users can find exactly what they are looking for.

Wireframes: Responsive

After iterating on various layouts designs, I created an interface that aligned with Justified goal to be modern.

Creating different wireframes for a laptop, tablet, and mobile device allowed me to fully flesh out my design decisions. Each element was considered when constructing these wireframes which ultimately helped set the standard for the rest of the process. 

UI Kit

After creating the wireframes, I moved onto the UI Design and Brand Development part of the process. As Justified wants a modern, clean and comfortable feel I kept that at the forefront when designing the logo and implementing the color palette.

I started by sketching out logos and then digitized them. The logo I chose best represented Justified’s sustainability initiatives. For the color palette, I decided to go with green, blue, and light grey for a refreshing feel.

Final UI Designs

Cassie, our persona, requires a few key needs to be solved for Justified to be valuable for her. These needs are:

• Quick and efficient shopping experience

• Obtain trendy clothes for affordable prices

• Supporting a company that has a large purpose

I built out different processes to 4 different pages to ensure Cassie’s most basic needs are being met:

• Homepage

• Hover navigation menu

• Browse category page

• Product details page

The homepage highlights popular fashion trends and describes the sustainable efforts Justified stands for. The browse category page highlights Cassie’s need to shop quickly and efficiently by using various filters to find a product.

Conclusion & Reflection

Continue to work on responsive mobile and tablet prototypes to reflect iterations from desktop website. Test, iterate and repeat all platforms until launch.

This was my first full UX Design project which allowed me to dive into the whole process from research, to design, to testing and iteration. I chose to challenge myself with a brief that wasn't automatically interesting to me, so I could practice the real world process of designing for different types of products and removing my biases and assumptions from the equation.