New Look
Denim Fit Guide
Denim is a key business focus in which the denim fit guide plays an instrumental role. Updated bi-annually, the denim fit guide showcases the old favourites as well as new and trend led styles to customers. With over a dozen denim fits, it was crucial to relay valuable information to the customer in a digestible and systematic manner.
The Problem
After looking at the performance of the previous denim fit guide it was clear that the primary focus for the redesign of the denim fit guide was for customers to make informed choices on their purchase. For this, we needed to address the convoluted user journey and shoppability of the current denim fit guide.
10
separate pages for information on a single denim jean fit
4
visits (maximum) to the individual fit guide pages
4
ranges weren’t included in the previous guide
Customer Feedback
We scheduled a customer feedback session on the previous denim fit guide to understand the the needs of the customer. The main take aways from the customer feedback session were that the customers preferred to see visual representation of the jean in order for them to understand how the jean would fit on their body type and shapes. Another key concern from customers was that although they would find the fit guide useful, they were unaware of how to navigate to the fit guide from different entry points.
The Solution
1. Simplicity is key
The primary solution was to simplify the information on the number of fits which needed a clear information hierarchy and architecture.
2. Less is more
To address to problem of confusing user journey it was important to eliminate any unnecessary clicks and create a denim fit guide with one page where customers are able to shop from the fit guide.
3. Accessible entry points
We had to ensure clear entry points to the denim fit guide from Newlook.com, this included assets on homepages, a prominent area on the navigation bar and call-outs within the product pages.
The
Foundations
The approach to designing the denim fit guide is based largely on the principles of atomic design. A methodology that involves breaking UI down into its basic components, which can then be combined into larger molecular structures. The principles established when creating the foundation were also used across other marketing collateral to ensure consistency on all assets for the denim fit guide.
Issues Resolved
1. Eliminated unnecessary clicks to individual pages and designed one page denim fit guide where all information on the fits can be accessed.
2. Categorised each denim fit into groups of similar styles (i.e. skinny, super skinny) and introduced short descriptions to aide in the decision making process.
3. By positioning groups of similar styles next to one another customers are able to compare the distinguishing features of each type of denim fit.
4. Creating more inclusivity within the denim range by featuring denim fits from petite, curve, tall and maternity.
Mobile
First
As majority of Newlook.com customers access the site through a 320px mobile phone, it was imperative that we design with mobile first in mind and prioritise the experience on mobile.
One of the challenges when designing for mobile on this project was ensuring all information fitted on a small screen size. Taking that into consideration, we worked closely with the copy team on maximum character count and refined the design of the page to ensure the best mobile experience.
After hours of research, planning, designing and development, we were proud to launch the new fit guide to the Newlook.com customers. The efforts of various teams have resulted in a denim fit guide was a light, informative, easily navigable, digestible and systematic.
Social Media
In order to ensure that the denim fit guide reaches a greater audience, I created the concept for how the fit guide would be showcased best on Instagram stories. I followed the same information hierarchy as the fit guide and created a group of videos to coincide with the styles of denim fits.