The Wardrobe

A Responsive Design for an e-commerce clothing company

Product Scope: End-to-end mobile application.

Task: Design an responsive design for an e-commerce clothing store.

My Role: Research, Persona Mapping, Sitemapping, User/Task Flows. Sketching, Wireframing, Prototyping, User testing.

Project Timeline: 2 weeks/ 80 hours

Design Goal

Design a responsive eCommerce website that is easy to use and that allows customers to browse through all products and filter by size, color, style, and others.

The goal is to update their outdated logo to a more modern and neutral aesthetic to attract the digital audience.

Background

The Wardrobe started back in 1994 as a clothing store targeting an audience looking for cheap clothing for any occasion. Their main idea is to make any type of clothing accessible to everyone.

The Wardrobe is very successful offline. They have over 400 stores around the world in 32 countries. They decided to invest in digital and want to create a responsive website and update their logo.

Process

For this project, I followed IDEO’s Human-Centered Design Thinking process to ensure that my design decisions are backed by research and user feedback.

Empathize

How

Research Ramp-Up, User Research, User Interviews, Competitive Analysis, and Persona Mapping are all important aspects of conducting thorough market research.

Why

By utilizing various research techniques, we seek to understand and empathize with the user's needs, frustrations, and goals.

Design thinking is a human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.
—TIM BROWN, EXECUTIVE CHAIR OF IDEO

Research Ramp-up

Research Ramp-up Findings

Next, I did primary research to gain insight into the people who like to shop online. My goal was to better understand Users’ expectations, wants, needs, and pain points when shopping for clothing online. I conducted a survey and User Interviews.

Survey Findings

About 50% of Users like to shop for clothes both in-store and online; 25% shop exclusively online
Price, style, material, and color, matter more than brand
Size, warranty, return policy, assembly, ratings & reviews, and sustainability are also important to users
A most common method of researching clothes was searching on Google, followed by using social media and talking to friends & family

Interview Findings

Major concerns about buying clothing online include getting an item that does not fit, and not being able to easily return an item
Frustrations include wasting time shopping in-store and not finding what they had in mind
Shopping can feel overwhelming, and a large investment of time and energy
Delivery to door, movability, and ability to return items matters a lot when buying online

Define.

Following research, I synthesized my research findings in order to better understand users and their problems. I dug deep into my observations and findings, developing user personas, empathy maps, and a feature map to summarize and communicate all my research findings in a human-centered way.

Why

To leverage all previous research to define high-level goals and identify priorities for Home Cook's features.

How

User Persona Mapping
User Interview
Feature Roadmap

User Interviews

I gathered my information for my research plan and I conducted user interviews to understand users’ goals and pain points.

Persona Development & Empathy Mapping

How

Sitemap
Card Sorting
Task Flow
User Flow
Wireframe Sketches

Ideate

Why

With my personas and must-have features defined, it was time to ideate and visualize how The Wardrobe can come to life

Sitemap

Using Miro, I created a sitemap for The Wardrobe. Starting with the navigation menu and working my way down, referring to my "must-haves" on my feature roadmap to ensure all the features are there.

User Flow

Using Whimsical, I created a User Flow for The Wardrobe. Starting from the user search for a particular product to the checkout process.

Card Sorting

Using Miro, I created a Card sorting map for The Wardrobe. I Included the Participant’s expectations, needs, goals.

Task Flow

Using Whimsical, I created a task flow for the main functions the website should have.

The Task: Users search for the product, select Size and go through the purchase process and checkout.

Wireframes Sketches

I began preparing to sketch out my wireframes. I referred to my sitemap and task flows to guide me on which screens to sketch. After defining the key pages and their content, I did some initial sketches exploring layouts for The Wardrobes homepage

Design

How

Brand Logo
Style Tile
Mood Board
UI Kit
Responsive UI Design
Applying UI design to wireframes

Why

Because Online shopping is a visual experience, I decided to work on the UI design of The Wardrobes website prior to prototyping and conducting user tests. In this stage, I developed The Wardrobe’s visual identity.

Logo Sketches

After wireframing, I designed The Wardrobe's brand identity based on the company’s goals.

The Wardrobe’s logo design process began with sketching, and then using Adobe Illustrator, I made vector logos of a select few and paired these with various wordmarks to see which combinations best fit the brand identity I was going for.

Logo Sketches

Black and white logo design sketch ideas

Logo Design Ideas

Digitalizing Logo Sketches

Black and White logo design ideas

Mood Board

Next, I created a mood board on Pinterest that reflected a number of brand adjectives I identified.

Brand Style Tile & UI Kit

Next, I made a brand style tile and a UI kit to show the final logo design, typography, and color palette I’d be moving forward with for The Wardrobe’s Website. With the visual styles defined, I applied these UI design choices to the wireframes, creating high-fidelity responsive UI designs. In addition, I made a UI kit with all UI components and styles currently in use, for the more streamlined design and development of The Wardrobe’s web pages!

Digitizing Wireframes

Guided by my sketches, I jumped back on the computer to make some responsive wireframes for the key pages of the website. At this stage, I was using a grid layout, thinking about typography, choosing an icon set (Material Icons), and overall UI design.

UI Design

With the visual styles defined, using my UI Kit, I applied color, branding, and photos to the wireframes, creating high-fidelity responsive UI designs.

Prototype

How

Click-through prototype using Adobe XD

Why

With the high-fidelity wireframes ready to go, the next step was to test my assumptions for the task flows. I worked directly in the Adobe XD file to create a click-through prototype with basic interactions/animations.

Testing

How

Usability Testing
Affinity Map

Why

With my prototype up and running, it was time to validate and test my product and make any necessary revisions.

User testing

Next, I conducted user testing with 5 total participants, 2 of which were individuals that I interviewed for this project, The user testing sessions were over a video call.

Objectives

Test ‘The Wardrobe’s website to search and find a product without any trouble.

Goal

Observe the participant’s interactions and take notes.
Determine any problem or confusion they experience as well as success. Ask for participants for feedback after every scenario

Scenarios

Find an item
Add to favorite
Test Filters
Check Out process

“I like asthetic of the website and the user interface”
“Is there anyway I can look, Mens collection?“

Affinity Map

After reviewing my transcripts, I made an Affinity Map on Miro by extracting quotes and arranging them into sticky notes. I sorted the notes into different categories such as Wins, Pain Points, and Patterns and Suggestions, and color-coded them based on the tasks they referred to. This exercise helped me to organize my notes and transcripts, and identify any recurring patterns in my successes and, more importantly, concerns.

Goal

Observe the participant’s interactions and take notes.
Determine any problem or confusion they experience as well as success. Ask for participants for feedback after every scenario.

Affinity Map Findings

Overall, the user testing sessions were a success. Every participant was able to complete the tasks easily and any suggestions or concerns were mainly on how to make things more clear, improve on something