top of page
Sneaker_Store_Hero-BG.png

Designing
AN Online Store

Sneaker_Store_logo.png

Overview

Sneaker Store connects to young, fashion-conscious individuals through a premium brand experience featuring the best selection of authentic, sport-inspired sneakers. We define this premium experience through our products and the presentation of our brand.

​

Buying from an online store has never been easier. Users are tired of the complex and unintuitive navigation systems in traditional online stores, so we provide a breath of fresh air with our sleek and dynamic experience. Our modern and clean design and smart filtering options are the major drivers of our success.

The Problem

Users don’t have the time or ability to visit physical stores and would rather buy their goods on the go or from home. Customers prefer convenient ways to perform various tasks that don’t take much of their time. 

The Solution

To solve this problem, I designed a native app to meet the needs of Sneaker Store’s customers. With so many online sneaker stores, it will be great to have an app that gives its users a customizable experience with their needs in mind.

My Role

Competitive Analysis

Wireframes

UI Design & Prototyping 

Usability Testing

Illustration/Icon Design

Competitive
Analysis

I made it a priority to conduct extensive competitive research and analysis to identify what solutions exist, what’s working for others in the market, and where we might be able to improve.

Nike

Sneaker_Store_Competitive_Analysis_01.png

Nike

Sneaker_Store_Competitive_Analysis_02.png

Nike

Sneaker_Store_Competitive_Analysis_03.png

Nike

Sneaker_Store_Competitive_Analysis_04.png

Finish Line

Sneaker_Store_Competitive_Analysis_05.png

Finish Line

Sneaker_Store_Competitive_Analysis_06.png

Footlocker

Sneaker_Store_Competitive_Analysis_07.png

Footlocker

Sneaker_Store_Competitive_Analysis_08.png

Footlocker

Sneaker_Store_Competitive_Analysis_09.png

Footlocker

Sneaker_Store_Competitive_Analysis_10.png

Champs Sports

Sneaker_Store_Competitive_Analysis_11.png

Champs Sports

Sneaker_Store_Competitive_Analysis_12.png

User Stories

User Story One

As a customer I want there to be a variety of payment options, so that I can choose the payment method that suits me best.

User Story Two

As a frequent customer, I want to see recommendations of products I find like
so that I find items I might not on my own.

User Story Three

As a customer, I want to have access to advanced filtering options so that I don’t have to browse through a lot of products to find what I’m looking for. 

User Flows

For this case study, I focused on User Story One.

Success Criteria

Choosing preferred payment method

Task List

1. Home Screen

2. View Sneaker Details

3. Shopping Cart


4. Check Out

5. Payment Options

6. Add Payment

Entry Point

Home Screen

​

7. Payment Added Successfully

8. Submit Payment

​9. Successful Payment!

Requirements From User Story

Payment Options

Add New Payment

Complete Purchase

Sneaker_Store_User_Flow.png

Wireframes

After developing user flows, I began sketching ideas and creating low-fidelity paper mockups. Then I refined sketches into mid and high-fidelity wireframes.

Low-Fidelity

Low-fidelity wire frames drawn on paper

Home

Recommend Sneaker Details 

Sneaker_Store_Low-Fi-01.png
Sneaker_Store_Low-Fi-02.png

Shopping Bag

Sneaker_Store_Low-Fi-03.png

Check Out

Sneaker_Store_Low-Fi-04.png

Add Payment Options

Sneaker_Store_Low-Fi-05.png

Add Credit Card Info

Sneaker_Store_Low-Fi-06.png

Checkout (Updated Payment)

Sneaker_Store_Low-Fi-07.png

Successful Payment

Sneaker_Store_Low-Fi-08.png

Mid Fidelity

Mid-fidelity wire frames designed in Sketch

Home

Sneaker_Store_Mid-Fi_01-Home.png

Recommend Sneaker Details 

Sneaker_Store_Mid-Fi_02-Recommend-Sneaker-Details.png

Shopping Bag

Sneaker_Store_Mid-Fi_03-Shopping-Bag.png

Check Out

Sneaker_Store_Mid-Fi_04-Check-Out.png

Add Payment Options

Sneaker_Store_Mid-Fi_05-Add-Payment-Options.png

Add Credit Card Info

Sneaker_Store_Mid-Fi_06-Add-Credit-Card-Info.png

Checkout (Updated Payment)

Sneaker_Store_Mid-Fi_07-Checkout-Updated-Payment-Info.png

Successful Payment

Sneaker_Store_Mid-Fi_08-Successful-Payment.png

High Fidelity

I recruited three users to perform the task of adding a Master Card as their preferred payment option. Overall I received positive feedback with only minimal pain points.

​

Positive feedback:

  • The users felt the design was pretty straightforward.

  • The buttons were clearly recognizable.

  • The task of adding the credit card was clear.

  • Two users commented that having everything to fit on the screen was very helpful.

  • It was a nice touch of adding a product photo with payment confirmation.

  • All the users were excited to see what the final product will look like.

  • One tester liked the idea of having a store specific to only sneakers

​

Constructive feedback:

  • Adding a numb badge to indicate the number of items in the shopping bag.

  • Adding an X (cancel) with secondary screens.

  • When user testing, it would be a good idea to include bottom icons with the mid-fidelity design.

High Fidelity

High-fidelity wire frames designed in Sketch

Home

Sneaker_Store_Hi-Fi-01.png

Sneaker Details

Adding to Bag Transition

Sneaker_Store_Hi-Fi-02.png
Sneaker_Store_Hi-Fi-03.png

Sneaker Details with Filled Bag


Shopping Bag

Sneaker_Store_Hi-Fi-04.png
Sneaker_Store_Hi-Fi-05.png


Check Out

Sneaker_Store_Hi-Fi-06.png

Add Payment
Options

Sneaker_Store_Hi-Fi-07.png

Add Card Info
(Blank)

Add Card Info
(with Keyboard)

Sneaker_Store_Hi-Fi-08.png
Sneaker_Store_Hi-Fi-09.png

Add Card Info​
(Filled Out)

Checkout
(with New Card Info)

Sneaker_Store_Hi-Fi-10.png
Sneaker_Store_Hi-Fi-11.png

Successful
Payment

Sneaker_Store_Hi-Fi-12.png

Final UI

Final UI was further refined in Sketch and I applied Sneaker Store’s branded style guide.

Sneaker_Store_iphone12_screens.png

Home

Sneaker_Store_Final_UI-01.png

Sneaker Details

Adding to Bag Transition

Sneaker_Store_Final_UI-02.png
Sneaker_Store_Final_UI-03.png

Sneaker Details with Filled Bag


Shopping Bag

Sneaker_Store_Final_UI-04.png
Sneaker_Store_Final_UI-05.png


Check Out

Sneaker_Store_Final_UI-06.png

Add Payment
Options

Sneaker_Store_Final_UI-07.png

Add Card Info
(Blank)

Add Card Info
(with Keyboard)

Sneaker_Store_Final_UI-08.png
Sneaker_Store_Final_UI-09.png

Add Card Info​
(Filled Out)

Checkout
(with New Card Info)

Sneaker_Store_Final_UI-10.png
Sneaker_Store_Final_UI-11.png

Successful
Payment

Sneaker_Store_Final_UI-12.png
Sneaker_Store_macbook_pro.png

Home Page on Desktop

Style Guide

​

Sneaker-Store-Style-Guide.jpg

Final Takeaways

Roadblocks

Overall, I really enjoyed working on this project because it offered a lot of learning opportunities and a lot of room to be creative. The roadblock that I encountered was testing my mid fidelity wireframes. I noticed that users find it easier to perform tasks when a design is fully flushed out. Moving forward, I need to give more detail or communicate that the design is still at its rough stage. However, two of my users had no issues because they assisted with past user tests. 

What I Learned

I learned that building a solid UI library will make the design process move quickly. I find that font weights and sizes don’t vary too much on mobile. Typestyles can easily translate to multiple projects. Finally, designing in black and white and not applying color until after user testing speeds up the design process.

What I Would Do Differently

Even though it wasn’t required for this project, my design process should always include personas. This will give the design some personality, especially at checkout. To speed up this process, I can create a reusable persona template and modify based on the project specifications.

bottom of page