Skip to content

E-COMMERCE REDESIGN

Level:

Student training

Timeline:

Two weeks

Team:

Solo Project

Role:

User Experience Designer

Software:

Sketch, UX Tweak, InVision Studio, Zoom

Tools:

User Research; Market Research; Information Architecture; Wireframing, Responsive Design; Prototyping, Usability Testing

The Challenge:
With conditions arising due to the global pandemic, a local sporting goods shop can’t service its customer base or reach new potential customers because its website lacks the functionality and organization of an e-commerce site.

Solution:
To remedy this I utilized a number of tools to define user expectations, prioritize goals, and created a more relative information architecture. 

Results:
The process yielded an interface that was easy to understand and use. It also offers features that meet user expectations whether shopping in-person or online. 

Empathize

In the discovery phase I utilized various tools to could help me gain an
understanding of the problem I’m trying to solve. 

Affinity Mapping

The cardsort study synthesis revealed what services and features were desired.

Comparative and Comparative Analysis

As survey was taken of comparable local and national sporting goods stores and the features
they offered to assess how the redesign could compete within the market.

Feature Inventory

Comparative Analysis

DEFINE

User Personas

Two personas for the most ideal users were developed, and the problem defined. 

User Flow

A user flow was created for each persona.

Information Architecture

I reviewed the click streams for top competitors, their website structures and came up with a possible site map for the redesigned site.

Card Sorting

Task Analysis

The Checkout Process

Elements Analysis

Analyzing the Results

IDEATE

Sketches

To kick off the ideation phase I started with hashing out screens for
the new redesign, focusing on a single user flow.

Wireframes

Using the Sketch app I created wireframes as well as mobile device responsive layouts.

From left to right: home page, home page with dropdown menu, category product list, product profile, product cart, transaction confirmation

Home page screen responsive layouts

Prototype

Usability Test Plan

Going into the usability study, a plan was devised to moderate users through a specific user flow.

Live High-Fidelity Prototype

The final prototype was created using InVision Studio and demonstrates the 
clickstream for each usability study. 

Next steps

  • Conduct further usability studies to address viewport margin and device types
  • Test additional user flows
  • Conduct heuristic evaluation

LATEST POSTS

DRUGGED DRIVING

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla
Read More

NORTH CAROLINA STATE UNIVERSITY SEASON TICKETS

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla
Read More

Impetus epicurei cu eum, et illud officiis splendide ius, has virtute volumus adolescens ea. 

#tag