‹ Back to Projects

UNDEFEATED Mobile Redesign

This is a streamlined and intentional redesign of the UNDEFEATED eCommerce mobile platform.

Client: UNDEFEATED

Project: UX / UI Design

Details

In 2001, UNDEFEATED opened its doors on La Brea in Los Angeles. The LA boutique walls started of being populated with hard-to-find, limited-edition sneakers, but the shop's owners, James Bond and Eddie Cruz were onto something. UNDEFEATED is a streetwear staple not only in its founding city of Los Angeles but around the world. For 15 years, UNDEFEATED has solidified its footprint in the fashion world with its elaborate collaborations with Nike, New Balance, and Stüssy, just to name a few.


Challenge

Execution is everything! Less is always more, but without proper execution information can get lost and miscommunicated. My Redesign will take the already minimalistic style and revamp their mobile application.

Design Goal

1. Redesign UNDEFEATED mobile web application as a responsive e-commerce mobile experience that is aesthetically pleasing and intuitively allows users to shop and read the content.

RESEARCH INSIGHTS

User Persona Shamir Brown

Shamir Brown is a Creative Director who's in search of a mobile experience that reflects the high-end streetwear reputation of UNDEFEATED that is also easy to navigate. As a native Chicagoan, he's interested in his style and needs a mobile platform that caters to his creativity and on-the-move lifestyle while providing a streamlined experience.

Check out, his User Journey below.

Site Map

After analyzing the pain points when making a meal, I prioritized, simplified, and restructured the information to create a sitemap for FreshPicked.

Styling

Inspired by previous ad campaigns, I utilized UNDEFEATED's traditional Olive Green and Vivid Orange. While maintaining a minimalistic design for the website, Grey and Black were used as secondary colors. I ended up creating the following style tile as the basis for my UI.

UI Design

Once the user opens the app, they are prompted by the Login/Register Page. This feature has been popularized by social media platforms such as Instagram, Facebook, and Twitter to capture users. This action can be canceled for casual browsing.

I replaced the product landing page with a Dashboard/ Home Page, allowing users to view new arrivals from their favorite brands and editorial content. This expands the scope of the app creating a more immersive experience for users, enabling brands to better curate and showcase their brand story to consumers in addition to selling products.

The spacing between the content Features Page has been eliminated and the editorial titles have been placed directly over the associated content eliminating any content confusion.

By adding a toggleable two-column scrolling grid, I increased the amount of content that the user can view. In addition, this Creates a less cluttered and digestible viewing experience.

Implementing a horizontal scroll to view the various related products help maximize screen real-estate by reducing clutter and simplifying the discovery process.

Within the Cart Pages, the pricing has been moved below the product allowing for larger imagery and product info. The Bag Icon becomes orange when populated, so it remains a focal point as the user shops and browses the platform. Once tapped, it brings you to the Cart Page.

Next Steps

1. Extra Features

I would like to include a dark mode, allowing users to browse comfortably at night and/or in low-light environments.

2. Testing

I will conduct usability testing to evaluate the efficacy of the application process and its functionality.

Research • Discovery • Innovation