Flint Clothing Website

Graphic: Flint Clothing Logo

Project Overview

Objective

This project involved designing a website user interface for a sportswear clothing line that includes apparel for men, women, and children.

Research

I performed a competitive analysis and user observations to learn more about the potential users of Flint Clothing’s website. Based on my findings, I developed two personas for use throughout the design process.

Solution

Based on my research findings, I developed a clothing website that allows users to easily compare multiple products and features a streamlined checkout process.

My Role

My responsibilities included creating task flows, sketches, and a high-fidelity prototype of Flint Clothing's website. I also conducted usability testing of the prototype and make adjustments based on user feedback.

Personas

Michelle

Bio

24-year-old female working in the healthcare industry. Enjoys outdoor activities such as quad-riding and walking on trails.

Goals

To be able to compare different clothing products and find the perfect fit.

Frustrations

Not knowing what size best fits her body style.

Walter

Bio

42-year-old male who is married with two children and works as a VP in the banking industry. During the winter season, his family likes to visit their local mountain resort to partake in skiing and snowboarding. When the weather is warmer, Walter enjoys running and participates in his city’s marathon race each year.

Goals

To be able to find and purchase clothes quickly and efficiently. Also likes to read reviews from other individuals who have bought the product to get their feedback.

Frustrations

Time-consuming or confusing checkout process.

Task Flows

Image: Flink Purchase User Task Flow
Image: Flink Purchase User Task Flow

Sketches

Image: Sketch of Flint home screen
Image: Sketch of Products/Search Results screen
Image: Sketch of Product screen
Image: Sketch of Checkout screen

Wireframes

Image: Wireframe Flint Home screen
Image: Wireframe of Product Results screen
Image: Wireframe of Product Comparison screen
Image: Wireframe of Checkout screen