Shop sneakers
in a useful way

UX/UI

KICKSTER

share with ease

Discover the world of rare sneakers with Kickster, your ultimate sneaker hunting app. Uncover coveted kicks, purchase, reserve, or share them with fellow sneaker enthusiasts.

VIEW PDF
feature app screens

The Backstory

The Journey Begins With The Perfect Pair

Whether we wear or collect sneakers, we appreciate their design and craftsmanship. Many of us, I suspect, have a unique story behind each pair and devote countless hours to finding them. But how can we locate a pair that is exclusive to a particular brand?

Image of sneakers on hardwood floor

The Problem

They can be
hard to find

San Francisco is one of many sneaker hubs around the world. However, locating exclusive sneakers online or in a retail store is not always easy.

The Solution

Stay local
and share

Develop an app that users to buy, reserve, or share what they find. Bringing together enthusiasts and local merchants.

wireframe on chalkboard

Persona

Sneaker Fanatics: Who Are They?

Before designing the app, it was necessary to identify and create a user persona. This process enabled me to accurately determine the user's characteristics and needs.

persona_kickster_web
persona_kickster_mobile
callout_kickster

Information Architecture

Focusing on Content and Structure

The creation of a sitemap serves as a crucial link between the documentation and the ultimate design. Just as with every other element within this workflow, the content can be adapted to align seamlessly with the user's specific requirements.

sitemap for the appA sitemap to outline how the app will function (mobile)More in depth functionality

Wireframes

Paper Wireframes

Prior to crafting the wireframes, I sketched a rudimentary design to convey my concepts. The image displayed below illustrates the array of choices. Both the hand-drawn rendition and the digital versions played pivotal roles in shaping the user interface.

Sketch and Wireframes

From paper to digital

Wireframing software is widely available.  However, made with paper and pencil is a quick way to communicate your thoughts. These drawings on the following page demonstrate the possibilities. As a result, digitizing them became that much easier.

Some sketches of the initial wireframes.
check-out/followers
Some sketches of the initial wireframes and the final rendering (mobile)

Wireframes

Digital Wireframes

I took each sketch and refined the wireframes in Figma to align them with the app’s sitemap. Subsequently, I made further modifications based on user feedback.

Wireframes were created to demonstrate how the app will work.Wireframes were created to demonstrate how the app will work.
Round One Wireframes

The User's Journey

Guiding Users Through Every Step

After creating the wireframes, I was eager to see how the app would operate. So, I compared each user flow to the actual sitemap to prepare for user testing.

userflow #1 - onboarding
userflow #2 - shopping cart
Onboading
Sign-up > Brand > Color > Size selector
Userflows to demonstrate the steps necessary to complete a task (mobile)

Color Palette

Finding the right color

Inspired by Air Jordan sneakers, I selected three colors to represent the product, with each color's name reflecting this inspiration. For the typeface, I chose Gotham, a sans-serif typeface known for its boldness and recognizability.

The brand is represented by three colors: Raging Bull, Varsity Blue, and Retro 6.The brand is represented by three colors: Raging Bull, Varsity Blue, and Retro 6 (mobile)

Final UI

Ultimate Sneaker Experience

The UI elements, designed in both Figma and Illustrator, underwent multiple iterations before reaching the ultimate design. Each set of screens below showcases a distinct feature within the app.

Feature image to showcase app screens

Onboarding

Specify your preferences to find your next pair of shoes. Select a brand, shoe size, and color scheme, and the app will personalize your shopping experience.

Three screens to demonstrate the onboarding process - Final UIThree screens to demonstrate the onboarding process - Final UI

Shop with Ease

Add items to your shopping cart and proceed to payment. You also have the option to reserve items for in-store pickup.

Three screens to demonstrate the shopping experience - Final UIThree screens to demonstrate the shopping experience - Final UI

Social Feed

Connect with people who have similar interests and share updates about your discoveries.

Splash screen and onboarding screen featured images

Thank you

andrae.io

click to watch promo video
Feature image to showcase app screens
delete this one
Browse + Place Order
Explore > Product Info > Checkout > Pickup
in class researchdesign work in Figma