The North Face
The North Face is a company with exploration and innovation at it's core. They seek to inspire people to aim for extraordinary dreams and to get outside and explore.
So what do you do when you know that search is your most engaging feature for users yet the experience is lacking? Together we redesigned the experience—we improved search, created a more personalized experience for users, and completely revamped the visual system.
Sole and lead designer
Too many type styles
In addition, there was also a design problem to solve. The North Face app had gone through a few designers' hands and over time a lot of design debt had accumulated. The application has a pretty restrained feature set and still there were 11 different type styles being used. I could tell at a glance that a few styles could be removed as they were close in size or weight. I reduced the type styles used in the app to just 5 styles.
The North Face dashboard allows users quick access to check-in at outdoor or retail locations to earn VIPeak rewards points. Additionally, the app recognizes the user's location and offers up a weather report and a header image which changes throughout the day to offer morning, noon, or night inspiration.
Shop by category
Users can shop by category from the shop screen. I worked on subtle parallax effect using branded images from The North Face which helps to add visual reinforcement for the category and add intrigue while they scroll.
Personalized product recommendations
We introduced a new feature into the app, called 'recommended for you,' which offers up personalized product recommendations to the user based on their browsing history, past purchases, and favorite products. Below are a few design iterations.
I put these different variations through some quick-and-dirty usability tests, each test with 5 different users, in order to land on our final version at the end. See the winning usability results here.
When it comes to the interactions, it's important to design each screen thoughtfully for the content that lives within while also ensuring there is continuity across the application as a whole.
Search as you type