Jet’s Redesign
About
Jet’s visual design has evolved in order to adapt to the customers needs and the brand’s strategy.
Goals
User's goal: to connect, recognize, understand and navigate Jet’s experience.
Technology's goal: to create a system that allows for easier and faster implementation of new designed features.
Business' goal: to align brand, creative and UX/UI design to ensure that the experience is cohesive and impactful.
Main Responsibilities
Project Lead
UX Direction
UX Design
Visual Design
Production Design
Credits
Visual Design Direction: Rick Rodriguez, Paula Guzmán
Visual Design: Robin Man, Jessica Anerella
Challenge
As a follow up to the work of establishing Jet’s value proposition, quanititave research showed there was still room for improving the design of the shopping experience:
1. Customers had a problem of trusting and connecting with Jet’s shopping experience because of the quality of its visual design.
2. Customers had a hard time performing certain tasks because the visual patterns were not clear enough.
Process
As the project lead, the first thing I did was to approach the creative director and brand lead to create a workforce that would set the vision for a renovated visual desing. As a team, we aligned around our Brand Values but clarified what they stood for.
The second thing we did was an audit of our experience which showed four main issues:
1. The font’s we used were not clear enough and did not allow for the range of uses the experience required.
2. The way we used color througout the experience was not consistent.
3. We used multiple shapes in different forms and sizes to denote same call to actions.
4. We needed a consistent POV for branded imagery.
After conducting a competitive analys and initial round of visual explorations, with the entire UX and creative desing teams, we managed to aling in three main foundational principles:
1. Accessibility
2. Efficiency
3. Clarity
Outcomes
After a couple of iterations on the explorations and directions, there were 2 main outcomes:
1. A new custom typeface (Bloomfield) that allowed for all the multiple needs in terms of copy and prices the Jet experience required. We gave special attetion to how prices would display.
2. A set of templates of key pages that combined the design principles and the new typeface.
In order to align the rest of the company, we organized a “showcase” event were everyone in the company could feel and play with the new design in all the devices. We encouraged everyone to provide their feedback. The event aroused the excitement on employees and executives who helped us champion the project moving forward.
As a fast follow, we implemented the new desing in Jet’s Home page and the Back to School experience. This allowed us to gather 2 quick finidings:
1. Design elements needed to be put into a system that supported design at scale.
2. We had to reach a balance between the boldness and clarity of our principles.
As a foundation for the design system, we decided to follow the atomic design framework. This allowed us to gather the confidence as we decided bigger elements in the experience like new templates.
As a quick way to implement some of the design elements into the production site, the front-end team developed a quick version of the style guide to be used in new built features.
The first category to fully use the new design system was the “home experience”. This allowed for us to gather customers’ and developers’ feedback before we rolled out to the rest of the experience.
Designing for Jet 2.0
As Jet changed its strategy and focused on a more premium customer, the design had to evolve to express the new brand message:
1. Tailored experience
2. Unique Assortment
3. Personal Service
Becasue we had a design system, most of the decisions were made at the atomic level which then affected the larger elements. This allowed for a faster iteration and implementation of the new design.
Since the main category for the brand relaunch was grocery, we used it as a model for how to approach the design of the experience.
Results
As we keep iterating, we track NPS comments to capture the sentiment our customers express about the design of the experience. Overall, the feedback has been positive but there are still areas for improvement:
1. Customers appreciate how the look and feel of the experience is elevated.
2. Customers appreciate how clean the site looks and associate it with ease of use.
3. Customers express how the experience feels localized and relevant.
