Creating a
responsive website
for a clothing brand.

 
 
 

‍The Challenge:

Create a ecommerce responsive website where Ball is Life can sell their products online.

Goals & Objectives

Design a responsive E-commerce website that is easy to use and that allows customers to browse through all products and make the shopping experience easy, quick and enjoyable.

BALL IS LIFE

Created in 2005 as a brand highlighting basketball players on its platform, Ballislife has grown from a “Mixtape” outlet to respected basketball apparel, media and event management company.

My Process

Timeline

3-weeks

Role

UX Researcher & Designer

Skills

Competitive Analysis, Survey, Interviews, Card Sort, Sitemap, Userflow, Usability Tests

Tools

Figma, Illustrator, Photoshop, Sony Vegas,  & Userbit App

1. Empathize

 

To really understand the E-commerce users I first had to empathize with the target user. In order to do that, I began by uncovering frustrations and pain points.

Competitive Analysis

I began by completing a competitive analysis. I collected all of Ball is Life’s main competitors and then moved into looking at similar retail companies that ran successful and profitable e-commerce websites.

Interviews

To better understand the wants and needs of those who shop online for clothing. I developed an interview script and conducted user interviews with participants who related to the persona profiles I created. I conducted interviews remotely. With all the research I got, I was able to identify the some wants and needs for the target users and what motivated them to shop.

  • Number of interviews: 5 total (3 women, 2 Men)

  • Age: 20-30

  • Interview duration: 10-15 mins

  • Customers shop online at least three times a year.

  • Shopped online for clothing within the last 30 days.

Key Findings

  • Users need an easy to navigate website

  • Users need alternative ways of paying

  • Users want a way of finding size fit (size chart)

  • Users need a good variety of clothing options

  • Users need size variety

  • Users need alternative ways of paying (PayPal)

  • Users want free shipping and returns

  • Users want reliable reviews

  • Users care about personal security against fraud

Persona Development

After gathering all the data from the research process, I worked on creating a user persona to identify the target users on a personal level. Shawn was the main persona from my research findings. Shawn needs Different styles, affordable clothing , responsive customer service , and easy checkout process.

2. Define

 

Research Plan

After all the research in the “Empathize” phase, I was able to collect data that helped me start defining the project. I wanted to look for information that would help me find the user and stakeholders needs. In order to define the product I mapped out the overlapping user and business goals.

Card Sorting

With the project goals established, I conducted an open card sort to get a sense of how users categorize clothing, and accessories. Using Userbit, I asked them to arrange 27 items into categories of their choosing to get a sense for how users talk and think about these items. After the conduction of the card sorting exercise, all the participants created a total of 13 categories. The Similarity Matrix below shows the results of the online sort and provides a quick visual read into how participants grouped cards together most frequently.

Key Findings

  • Participants mostly categorized items based on type of clothing. 
  • Five or more of the participants (out of ten) created this similar pattern when sorting items into categories.

3. Ideate

 

Site Map

Based on the card sorting exercise and interview findings I was able to categorize my groupings effectively into a site map. The goal was to move forward with a navigation process that would be easy and familiar for the user to use.

Interaction Design

Before moving the design phase, I identified the main flow that the user will follow by creating a task and user flow. I started creating the user flow by thinking of an experience my primary persona might encounter when shopping online.. These tools allowed me to ensure that the information was organized in a way that is intuitive to the user.

Sketching

Based on the site map created as well as the user flow, I began with some quick hand-sketched concepts for the Ballislife home page. I wanted to make sure that I included all the key findings that have come out of my research and card sorting results.

4. Prototype & Test

Mid Fidelity Wireframes

My next step was to create a clickable prototype using Figma. I focused on creating two different scenarios that a user might go through, each with a task to complete. Before conducting the testing, I set to create a usability testing plan and checklist that included all of the information and goals I was looking to achieve.

Mid Fidelity Test Objectives

  • Identify any points of confusion for the whole process of purchasing an item.
  • Get feedback from participants on the sites usability.
  • Observe how participants navigate throughout the the site.

Mid Fidelity Tasks

  • Locate T-Shirts from the navigation bar.
  • Add T-shirt to cart.
  • Navigate to the home page

  • Find trending clothes in the footer

  • Find the shopping cart and check out

High Fidelity Wireframes

After creating the mid-fidelity wireframes for multiple pages, I created and frequently updated higher-fidelity wireframes with the UI patterns and components used in the UI Kit.

Final Tasks

  • Locate T-Shirts from the navigation bar.
  • Add T-shirt to cart.
  • Navigate to the home page
  • Find trending clothes in the footer
  • Find the shopping cart and check out

View the prototype on Figma

A total of 5 participants were able to complete this usability test, 3 women and 2 men. The participants range from ages 20 to 30 and they all shop online for clothes at least twice a year. All test were conducted virtually using Zoom and its screen sharing service.

5. Next Steps

 

With more time, I’d like to ideate further and develop more pages until I build a full site design. Get in touch with ball is life and work on designing the website.