Project Background

Inspiration

Humankind is a large international clothing retailer specializing in affordable clothing for men, women, and children. Their past success has been built upon an in-person shopping model and reputation for excellent customer service. They wish to evolve their brand for the future with a new visual identity and e-commerce platform.

This project was completed as a self-initiated study. Humankind is a fictional retailer that I created for the purposes of this exploration.

Role

UX Research, UX Design, UI Design, Brand Identity

Objectives

• Create a fresh visual identity that is approachable and modern, while remaining neutral enough to have broad appeal
• Design a responsive website targeted to a wide-ranging user base
• Maintain core brand attributes while expanding the sales model to include an online purchasing experience

Research

Goals of the research focused on the following questions:

• What are the most common pain points for users in the well-established space of clothing shopping online? 
• What motivates users to choose one brand over another when shopping online?
• What features do online shoppers find contribute to a positive experience?

Methodology

• Competitive Analysis
• Industry Trend Research
• One-to-One Interviews

Competitive Analysis

Industry Trends

Looking at the retail clothing industry as a whole, a few key trends stood out:

• Shipping speed and cost and user reviews heavily influence purchases
• Concerns about fast fashion are growing among consumers (carbon footprint, short life of clothing, recycling of used clothing)
• Integrated experiences for online/in-store gaining popularity
• Use of social media influencers continues to grow
• Collaborations with designers, celebrities, and other brands continues to see increases
• Flexible payment options, customization, and AR/VR/Voice search options are trending in the e-commerce space overall

Interviews

Conducting one-to-one interviews helped me empathize with real users and learn what factors influence their decisions most when buying clothing online in today's increasingly virtual marketplace.

Define

Provisional Persona

As part of this limited scope project, I developed one provisional persona based on the characteristics of the group of users interviewed.

Project Goals

‍

Task Flow

The below task flow maps two possible paths to purchasing the same item.

User Flow

Having spoken with parents as well as a teen during interviews, I found the dynamic of purchasing within a family unit intriguing. Though this was not something they consciously related directly to their shopping experience, I noticed that it played a part in each user's story.

This sparked the idea to create a sharing feature as part of the 'saved/favorites' flow that is common to to digital products of this type.

Site Map

Filtering and categorization were consistently mentioned in interviews as an important feature to get right for users. To inform the site architecture, I conducted a manual card sorting exercise with three participants in their 40s and 50s, in addition to researching the site structures used by a variety of competitive retailers.

Design

Wireframes

Visual Identity

The brand attributes guiding the design of Humankind's visual identity included:

• Trustworthy
• Approachable
• Good quality at a great price

Rounded edges mixed with a fresh and bright color palette portray a modern yet accessible feel.

UI Design

Full color mockups, including responsive samples for tablet and mobile.

Features

Essential features were built throughout the design, supporting ease-of-use and addressing functions that online shoppers most value.

Delightful details, such as the My Closet feature, bring unexpected value for customers, while supporting various business goals from increased purchase opportunities to building overall customer loyalty.

Testing and Iteration

A mid-fidelity prototype created with InVisionApp was used to test key features with users.

Successes: 

• Participants successfully navigated tasks through varying paths
• The Closet was found overall to be interesting and easily understood
• Header images caught attention on the homepage and the product page - depending on the user’s goals this could distract them; business goals and user behavior would need to be considered together here to choose whether they should be less prominent than they currently are
• 3 out of 4 participants commented on liking the site overall. Described as "clean" and "appealing", liked the color and the amount of color used. 2 participants said that they “would want to shop here”
  

Opportunities for iteration: 

• Increase icon contrast for quick view and save features
• Change heart icon to a hanger, change Closet button to a hanger icon in navigation
• Have Closet follow scroll in the prototype, and/or find another way to indicate item is added
• Improve confirmation of actions taken on the site - indicators that an action was successful such as adding to closet
• Navigation menu drop down - modify transitions to signal changes more clearly

‍

Next Steps

For this project I hoped to improve upon the online clothing shopping experience by including the features that users find most helpful and adding new or less ubiquitous features that could contribute to a positive evolution of the retail experience online.

For future iterations of this product, I would focus on adding features to further personalize the shopping experience and bring users steps closer to the the positives of in-store shopping. Adding virtual try-on technology, building out more saving and sharing options, and creating programs that speak to causes that consumers care about - such as reducing the environmental impact of fast fashion - are all ideas that would be ideal for further exploration.