UI Challenge
About the challenge
UI Challenge - The North Face
Design an order form for the North Face®.
An order form is a document that buyers use to order products from a store. It can be a form, a restocking document, etc. More generally, it is an order form.
Scenario
A buyer who works in a retail store (Decathlon) has to order The NorthFace® product for the winter 2020 season. He has to order 5 women's jackets, 8 beanies, 3 travel jackets and 13 Women T-Shirts.
The order must arrive at the Decathlon warehouses in September 2020 to be able to send them to the stores.
Lately, she has had problems clearly communicating to the warehouse which products are going to arrive and when they will arrive.
Objective
Have a simple and effective way for a shopper to order multiple products from The NorthFace®. Design on one screen (or several if there are interactions) an order form for The NorthFace®
About this UI challenge, it was part of an internal initiative, where the goal was to work on my UI skills.
Role in the project
My role in this initiative was UI designer.
Biggest challenges
-
Follow UI best practices such as:
-
Horizontal & vertical spacing
-
Grids
-
Font sizes
-
Information architecture
-
Build an style guide from scratch
-
Iconography
-
-
Redesign a redesign form from The North Face
Chosen solutions
I analyzed key strengths from various sites, including navigation, checkout process, order form, information architecture, and search functionality.
At the time, I used The North Face’s website as a reference to create the style guide, focusing on colors, typography, icons, logos, and imagery.
Screens from The North Face site
Outcomes and lessons learned
In the end, I had the opportunity to strengthen my UI skills. I learned the importance of spacing between elements and capturing the essence of a site during a redesign. This experience also helped me pick up new tricks in Figma. Moving forward, I’m excited to keep practicing and eventually dive into creating complex style guides and even full design systems.