Supreme App Redesign

Chenhao Li
NYC Design
Published in
7 min readMar 28, 2018

Project Background

_____________________________

Project:

Supreme App Redesign

Self-directed

School Project

Instructor:

Cornelius Quiring

Client:

Supreme

Client Background:

Supreme is an American skateboarding shop and clothing brand established in New York City in April 1994. The brand caters to the skateboarding, hip hop, and rock cultures, as well as to the youth culture in general. The brand produces clothes and accessories and also manufactures skateboards. Its shoes, clothing, and accessories are sold extensively in the secondary market.

Why do I this project?

I am a big fan of Supreme. It is also my most favourite brand. For me, every Thursday morning is an excited “challenge”, because new products of Supreme will be released on Thursday morning, and some popular items are usually sold out within five seconds. However, the mobile app of Supreme always gives me a “Bad Experience.” So, I decided to redesign the app for Supreme.

What is the Bad Experience?

Supreme released this app four years ago. The latest software update was two years ago. They just fixed some bugs, so we have been using an “old” app. For the current era, this is incredible. Overly simple UI design(or No UI design) often makes some newcomers overwhelmed. For me, I always found the product was sold out when I did some operations, and when I wanted to select another product, it is also sold out. Time is often wasted on switch screens and checking product status.

Supreme App current version

Let’s Start!

___________________

The Brief:

For this self-directed project, I wanted to redesign the mobile app that I could relate to and understand why it’s effective for Supreme and their customers. Simple and effective UI design was my core standard. And how to integrate the style of Supreme is also a challenge for me.Concept & Research:

Examples of Several Apps

The important part of my research included researching and studying several Apps. Some of the Apps that I used continuously for reference during the process were: END., HBX, OVO, StockX, and Frenzy. When I was looking, I made sure to reflect on aspects I liked from each app. Through the process of researching and using these apps, I discovered that these apps both have a menu bar(or burger menu) to classify the products. And customers could see many products on the same screen, and they could check the price and status.

Concept and Roughs

According to my research, I tried to analyze some weaknesses of the Supreme app which are the source of the negative experience. And I wrote some ideas as to what needed to be changed, what needed to be solved, and what needed to do in this process.

For the round 1 roughs, I started trying to create a menu bar for the app, just like other apps did. And the grid is also the most important part of any UI design. And displaying products on the same screen can also make the UI design look tidier than browsing multiple pages.

The Feedback:

I was able to get the feedback when I showed these concepts and roughs to my instructor Cornelius Quiring. He said:

Supreme’s app does need to be updated and improved, but the reason why Supreme can be successful and supreme because it always does something different from other brands. For the redesign of this app, my advice is to maintain your concept and try to use the Supreme style, rather than do some “normal” things that other apps will do.

The feedback of my instructor provided me with a new idea to redesign Supreme’s app. So, I started to study in depth of Supreme style.

Supreme Online Shop Desktop Version

Through the research on the Supreme website desktop version, I found some of the unique styles of Supreme. Supreme will not put all products on the first page, but they will enlarge some of the product features in the picture, and then arrange them in order to show the montage art style. For fans who understand Supreme, they can quickly enter to the product page. For new customers, they can also access all product pages. While browsing the product, they can also see the status of the product. This makes the app more efficient.

I drew some roughs and started to digitize these sketches

Home Page

First, on the home page, the page is divided into three sections, top logos, new products and categories. The top logo and clock are used to remind people of different time zones just as what Supreme have done on their website. In the new product section, I used a big image which is the Supreme style to show some items that will be released this week. There will be a countdown in the top right corner. Once the countdown is over, all the new products for this week will pass the slideshow to show out. If this product is sold out, the image will also show sold out. Customers can quickly find the product what they want to buy by sliding the screen, and they can check the status at the same time.

Categories

I didn’t use a bottom menu or burger menu for this app. Instead, I used the drop-down menu on the homepage for the categories. In the same way, I also used the Supreme art style to process the categories menu cover. When you click on the drop-down menu, the products in this category will appear and display the status. This approach greatly improves the efficiency of the customer in browsing the products; they can choose to view one by one or to view by the Categories.

Product Page

For the product page, I did not make some changes; I just put the purchase options on the bottom of the screen. Customers can click on the image to choose different colours and styles, view the introduction, and add the product to the cart. If this product was sold out, the purchase option would show the sold out. If you successfully added the product to your cart, your cart status will appear in the upper right corner.

Cart and Check out page

For cart and check out pages, I tried to simplify the pages as much as possible.

I created this app based on my Supreme experience and other Supreme fans suggestions. The overall solution was to create the app more effective for all Supreme customers. I believe this redesign solution can solve some problems for Supreme and their customers. If you are interested in my Supreme App redesign, the InVision prototype is available at the link below:

Redesigning Supreme App was exciting for me. It was a valuable experience to do the UI/UX design with my favourite brand. As a Supreme fan and a graphic designer, I was happy to use my skill and experience to improve the Supreme App. I also thank my instructor, Cornelius Quiring, and other Supreme fans for helping me to complete this project.

You did a good job of updating the Supreme app and made it useable. The flow from page to page was well thought out. -The feedback from Cornelius Quiring

--

--

Chenhao Li
NYC Design

Beijing & Toronto | Humber College Graphic Design Student | ChenhaoLi Design