ROLE

UI/UX Designer

LOCATION

Remote

BRIEF

Create user personas based on user interviews and design the user flow, interface visuals and interactive prototype app that will help consumers buy high demand sneakers through sneaker bot software.

fresh new body
for a sneaker bot

Snatch's main vision is for any consumer to use our app and be able reserve any rare or high end sneaker that will come out in the future without having any technical background on running online bots. Snatch takes care of the technical struggles so you can just shop.

The challenge

Sneaker bot is a complicated piece of software designed to buy shoes really, really fast. The product is meant to be used by consumers that want to buy high demand sneaker releases. During these releases, users with bots can sometimes purchase shoes in only a few seconds so the main vision was to create an app that will provide consumers ability to browse and shop or reserve new releases really quickly because these sneacer releases are limited edition so not everyone can be able to buy them.

Design Deliverables

The project flow went through five main phases before it was sent to the development team.

In the early stage of the project research, the focus was on collecting data from potential users where I was provided with information from user interviews in order to create user personas.

After the user personas were created the next step was to make the right approach to the user flow where the users will be able to easily navigate through app in order to reach their primary goal.

In sketching the low fi wireframes process I was able to have an overall idea of how the app would behave and look like which helped me to create high fi wireframes with more details regarding to the element positioning and app usability.

Choosing the right type of fonts, colors, shapes and imagery helped me to create user interface that moves through out the app in consistency and simplicity.

In the final stage, I created a basic prototype of the app with simple animations that would serve as a base point of the user interaction with the app and its behavior.

  • User personas

  • User flow

  • Wireframes

  • UI design

  • Prototype

Approach & Solution

Before starting this project the client provided me a research document with information about the potential users of the product.

The contents of the document were interviews of persons that were already using similar products.

Based on the general information about what the users liked/disliked while using the product I was able to create user personas that will serve as a guidance in the next steps of the process.

User Personas

Jasper Collins

Entrepreneur

28 years old

Lives in his own 2.5 rooms apartment with his girlfriend.

He is a manufacturing entrepreneur focused on creating products with unique style aiming towards high end market.

He is very successful so his finances are on high level. When he has free time he attends fashion events and enjoys in shopping with his girlfriend.

Wants & needs:

To keep up with the trends and likes to wear unique products. The fastest way to get what he wants.

Frustrations:

Lack of free time to enjoy what he loves to do the most, shopping. Missing out a chance to buy unique products in retail shops because they are sold out very fast.

Monique Willson

Flight attendant

23 years old

Lives alone in her 2 bedroom apartment.

She is almost never home as her job requires her to travel a lot.

She is a flight attendant working for a private air company that serves wealthy clients.

For now she enjoys her work as it brings her a lot of money. In her free time she likes to hang out with her friends, go clubbing and of course - shopping.

Wants & needs:

To buy expensive brands and items she can afford. Get her hands on unique and rare merchandise.

Frustrations:

Lack of free time to go in retail shops when new limited releases are on. Not being able to buy what she wanted.

User flow Diagram

Before I jumped to designing the user flow I studied the user personas and processed their pain points, wants and needs in detail as well as how other similar products on market work.

This resulted with some questions that needed to be answered:

  • How often do our users use the regular e-commerce apps?
  • What are the most common regular e-commerce app features?
  • What do other sneaker bot apps look like and what is their user flow?
  • Which of the standard e-commer app features can be removed in order to create even faster user flow?

After deep research of similar products I had a better vision of how the user flow should look like. In order to find out how often do our users use the regular e-commerce apps I had to contact the client and ask them to conduct a research with the same people they used to interview in the user research process. The provided answers confirmed my assumptions. Our users spend a lot time on regular e-commerce apps trying to buy the limited product editions but without too much succes as these apps have a slow and uncertain process of putting users in waiting rooms where it is uncertain whether in the end the users will buy the product. Based on this I decided to leave out some of the more standard e-commerce app features related to finalizing the product purchase such as "add to cart" and "save for later". Instead of having an add to cart option the users can immediately buy the product from the browse screen. This saves a lot time and taps and makes the purchase even faster. If users want to buy multiple items they can quickly get back from purchase confirmation screen to browsing screen and continue shopping.

Having on mind that the purchase/reservation needs to be very fast the user is able to view and purchase certain product in few steps in order to reach their goal. First time users that aren't registered have to take minimum 7 steps in order to purchase/reserve item while regular users have to take only 5 steps in order to do it.

Wireframes

The wireframing process consisted of three steps:

  • Low fidelity wireframes (hand drawn sketches)
  • Medium fidelity wireframes
  • High fidelity wireframes

Interface design

Let’s dive into the branding of the product, and how to present it both graphically, and in feeling, starting with name and concept. The concept in essence is to be a digital display case, showing the products in the best possible light, and to be a hub for new releases. The goal is to make everything feel cohesive as if it is one wide page of which a user only sees a narrow slice at once.

Speaking of visual language, I’d like to keep the app consistent with branding and style similar to the Nike and Adidas sneaker shops, moder and clean. In this vein, the typography does most of the heavy lifting. The typeface I’ve chosen is Avenir Next LT pro, a very versatile sans-serif font.  Lastly, I want to use a monochromatic palette using using black, white, and a light gray for all UI elements, and let the product photography inject color into the visuals.

Prototype

The transition between pages is very simple, just a slide of content on and off the screen. Most of the user and app interaction is with drag and tap gestures which makes the whole buying/reserving process even easier. I chose to go with this flow after a lot of research of similar apps and the fact that this app wil be used by same personas. Instead of drop down selectors ,in a brainstorm session with my client which is actually the developer that will create this app, the decision was made to go with the picker style selectors for products, brands and shoe size. This resulted in a very constant and liquid flow of the app which looks and behaves very smooth.