Jet’s Value Proposition
About
How might we explain to our customers that Jet is a marketplace that provides savings through operational efficiencies?
Goal
User’s goal: to understand the value that Jet could provide as a shopping platform.
Technology’s goal: to create a more sustainable and scalable platform.
Business’s goal: to provide a clear reason to shop at Jet in order to acquire more new customers and allow for bigger baskets.
My Role
·Concept definition
·UX Lead
·UX Design
·Visual Design
·Production Design
Credits
UX Design Direction: Miguel Fernández
Visual Design: Jessica Anerella , Pablo Dodda
Research: Ben Babcock
Prototyping: Russell Calder
The challenge
As Jet changed its business model and decided to move away from being a membership club, the design team was challenged to explain the company’s value proposition: The ability to provide "Smart savings" through a number shopping decisions across the experience.
Smart Savings:
Jet finds operational efficiencies around the e-commerce logistics and translates them into savings for its customers.
Customers can save in Jet by:
- Opting to pay by debit instead of debit
- Waiving the right to free return.
- Buying items that ship from the same warehouse.
Research
After conducting an extensive research a few weeks after launch (surveys, in-person Testing and site analytics) we identified customers had three main issues with Jet’s shopping experience and value proposition.
1. Customers had a hard time trusting a new and unproven company as Jet.
2. Customers who bought at Jet did not repat after their 1st purchase .
3. Customers did not understand the actual value of “extra savings”.
In order to iterate in a fast manner with “real” data the design team, with the help of 2 developers, managed to build a “sand box” version of Jet’s production site. This allowed us to test multiple versions of the experience with real customers as they navigated through key shopping decisions.
Design Iterations
After multiple months and multiple iterations of the experience, we had already a comprehensive list of validated findings and solutions.
1st Finding:
- Customers began to understand how they could get value until they had added a couple of items to the cart.
Design solution:
- A persitent cart was designed to show how prices were going down in real tim as customers shopped.
2nd Finding:
- Customers had a problem doing the math and figuring out how much the items really cost.
Design solution:
- Show lowest final price in real time across the experience.
3rd Finding:
- Customers had a problem making all the savings decisions along the journey and did not understand how much value they could get.
Design solution:
- Provide all relevant controls to lower prices before adding to cart. Click to interact with prototype->
4th Finding:
- Customers were missing how prices were going down in real time.
Design solution:
- Provide guidance and celebrate value with animations.
The solution
After a few more iterations, we decided on the final interactions and translated them to a complete story across the experience.
3. We exchanged all language around savings and showed lowest possible price in real time.
4. We provided control over how low the prices could go and used familiar colors to show value.
5. We showed value where it mattered (at the moment of adding to cart) and we celebrated it with color and animation.
This is how it looked when we put everything together:
Building the solution
As the design process was providing solutions, we began to work with the development team to build the experience into a responsive site and an iOS and Android application. Since most of the customers begin their journey on a mobile device, we made all final design and development decisions for mobile and scaled from there.
Results
As we launched this new experience as an A/B test we conducted another round of quantitative research which found that:
- 8-10 customers understood Jet’s value proposition
- 8-10 customers said Jet’s prices were lower than other sites
- 6-10 customers said they would be willing to purchase at Jet
The qualitive data team, in turn, determined that this had translated into:
- Higher order size
- Higher order value
- Higher average savings
- Higher revenue per visit
In summary, our customers were actually finding value and having fun with the experience we had designed.
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.
Jet’s Reorder Experience
About
A revamp to the replenishment experience on Jet’s native apps.
Goals
User's goal: to complete the entire household shopping trip in 30-60 seconds from the comfort of the couch.
Technology's goal: to create a modular system that could be used at any part of the app.
Business' goal: to increase Average Order Size and repeat rate.
Main Responsibilities
UX Direction
UX Design
Visual Design
Production Design
Opportunity
It had been more than a year since Easy Reorder had been launched on both native and web platforms, and had not evolved since then. As most of Jet’s customers buy within the grocery and household categories the replenishment journey is core to the experience .
A quick research which involved a usability evaluation highlited as key issues:
1. Customers had problems discovering the reorder hub.
2. Customers had problems identifying the items they had purchased before.
3. Customers had a problem with the amount of time needed to repurchase the same items over and over.
Process
In order to solve these issues we followed a design sprint methodology that combined research, prototyping, testing and design into 2 weeks . After a research analysis, that included in-person user testing, competitive analysis and journey mapping, we concluded the main problem for the cusotmers was:
- Customers find it time consuming to buy all the items they need often.
As a solution we set our goal:
- I want to complete an entire shopping trip in 60-120 seconds from the comfort of my couch.
Based on the insights from the research and competitive analysis, a group made up of a product designer, a front end developer and a designer began brainstorming and sketching solutions together. We sketched on our own and as a team. This excercise then proved to be valuable as all the team was aware of the design principles we had agreed to follow:
1. Easier ways to discover replenishment items.
2. Easier ways to replenish an item.
3. Easier ways to replenish a list of items.
We aligned on two design directions and quickly built two prototypes to validate our hypotheses.
The first direction, which proved to be closer to solve the customer’s problems, was a modular system of reordering solutions introduced along the journey.
Interact with the prototype->
The second direction was a set of different hubs that provided the solutions in a more focused manner.
Interact with the prototype->
The feedback we gathered from the prototypes clarified for us that the replenishment journey involved more than the reorder hub. It’s a customer’s mindset, and as such, the entire journey has to be thought through in order to solve the need. We went back to the drawing board and aligned on the solutions for each part of the journey focusing on the three design principles.
![]()
Outcome
OutcomeAs we got to the implementation phase we decided to overcompensate and allow for replenishment from every part of the shopping experience. We prioritized the development of four key features:
1. Ability to shop entire past orders.
2. Ability to highlight previously purchased items.
3. Ability to add multiple items to cart at once.
4. Ability to easily navigate through previously pruchased items.
Results
As all the designed features get built, the entire replenishment journey get’s easier and shorter to complete. Usability evaluation and analytics showed that:
1. the average time to buy a list of repurchased items had decreased by 1.2 times.
2. The amount of replenished items increased by 1.5 times.
3. The amount of visitis to the reorder hub that involved an addition to cart almost doubled.
Refinery29 Mobile Web Site
About the project
35% of Refinery29 users are getting to the site through mobile devices. It's estimated that in 2014 the number is going to be above 50%. The current Refinery29's mobile platform is not flexible enough to iterate and find new monetization strategies.
Goals
To create a single, elegant, responsive experiences of Refinery29 editorial, advertising and social content that removes the friction of funnels for the user and enables richer and more frequent advertising opportunities for brand partners.
User goal: to stay within the context of the experience whenever possible, and only remove that context when she decides to (1) navigate to a new type of content, (2) navigate to a hub or topic page or (3) tap on an internal hyperlink.
Technology goal: to create a mobile web app that performs in all critical aspects like a native app.
Business goal: for advertisers to have the ability to (1) display banner ads and (2) experience increased, more predictable engagement with brand integrated content.
Main Responsibilities
Concept definition
UX Design
Visual Design
Previous Site
Sketching
Wireframes
Wireframes V02
Paper Prototype
Navigation Flows
Visual Definition
Axure Prototype
Visual Definition V02
Live Site
Refinery29 Newsletters
About
How the redesign of Refinery29’s newsletters drove to higher click thru and the company’s first Webby Award.
Goals
User’s goal: to
quickly scan Refinery29’s newsletters and click on the stories based on what relates to them.
Technology’s goal: to create a scalable modular sytem that allowed editors to create new email templates without technical support.
Business’s goal: to drive traffic to the site (to read or to purchase)
My Role
·UX Design
·Visual Design
·Production Design
The challenge
As Refinery29 had relaunched it’s brand indentity and website, the marketing team decided it was a great opportunity to redesign all the emails they sent to the readers:
-
Welcome emails
-
Editorial Emails
-
Dedicated Sponsored Emails
-
Shops Emails
![]()
Research
After conducting research that included stakeholders interviews, competitive analysis, email analytics and layout A/B testing, we algined on solving for three key insights:
1. Inconsistency on branding across all emails.
2. Inability to read emails on mobile devices.
3. Difficulty of manually building the emails by the editors.
Analysis of our current templates
Mobile comparison of our emails on vs. competitors
A/B testing on Layout and CTA’s
Design
Because I was working with content, I decided to approach this challenge as an editorial problem. The first thing I decided to work on was the grid layout. This helped us:
-
Figure out the type of modules we could design.
-
Understand how we could design a responsive template.
- Make sure we had space for the advertising banners.
Based on this criteria we decided on a 680 grid that could a 300*600 banner, allowed for a good number of modules based on a single shape, and adapted to 320 mobile screen size.
Since we had just launched a new experience, we decided to design the modules based on what we had built for the website.
Because the main elemets of the modules were the image and the titles, we made a conscious effort to identify the web safe fonts that translated our editorial style.
And we then designed a number of modules that would fit the grid and could host the diversity of the content the editors were adding to the emails.
The solution
Once we had the grid and the modules we put together a couple of example emails based on the templates the editorial team had requested.
Welcome Emails
Editorial Emails
Results
The marketing team decided to launch each of the the emails as an A/B test comparing them to the previous templates. The result was overwhelmingly positive in terms of Click Thru on each of the new modules we had designed (some times up to 60% increase), specially on mobile devices (up to 80% increase). It cut by half the amount of time needed to build the emails. It also allowed Refinery29 to win its first Webby Award in 5 years.
