Reaching higher standards at Jet.com

Jet.com reached our digital agency, Zemoga, to join their UX team and create the proposal of an Apple store located inside the e-commerce website. Zemoga had a long partnership with Jet in the area of web development, and they wanted to kickstart a relationship in the UX area with this opportunity.

My Role

I performed as UI/UX Team Lead. I worked with one of Jet's UX leads to define the experience and create wireframes. I was in charge of all the visual production, supported by another designer under my direction..

The Opportunity

After Walmart acquired Jet.com, it became the perfect place to sell the kinds of brands outside Walmart's regular sphere of influence. After all, Jet.com was highly positioned with young people in the urban areas they had a presence. Jet.com was the perfect place for a brand like Apple to have a store, and that store was the ideal foundation for a deeper relationship between Walmart and Apple. No doubt, this was a delicate engagement for those involved.

The Approach

We had to find an equilibrium between two different concepts. In one corner, we have Apple.com, where the user can be immersed entirely in the Apple experience, and the purchase process is just a part of that journey. In the other corner, we have 3rd party sellers, like Best Buy and Target. For these sellers, everything was about following the format of every other product in their stores. On these 3rd party experiences, the user had to arrive with a decision already in mind, search for it, and then navigate through a sea of repetitive SKUs, to see which one included what they wanted.

Just picture yourself, clicking an iPhone banner only to be taken to a search result list that shows a result for every possible configuration of iPhone available.

We also discovered that these specific results directed to product detail pages that had to be extra configurable (made in case the user clicked on the wrong product of the long list). However, having so much freedom to select components on the PDP led to a frustrating experience. Since the range of configuration of Apple products is not that open, the options were often unavailable (this was especially true on Mac products). Users had to go through all this process to find out if what they wanted was available or not.

The approach we defined was to guide the user into 2 or 3 critical decisions, presented in the order of importance we assumed the user had for each product. This solution would save clicks and limit the amount of information we throw at the user before the Product Detail Page while still showing these items' whole range of possibilities.

Laptops, which offer a decent amount of options, was one of the most delicate scenarios and with more decisions to take, so we organized the flow like this:

1. Maria reaches the Mac page in search of a new computer.
2. She wants a portable but powerful device for heavy graphics, so after seeing the different Mac offers, she decides to go with the MacBook Pro (first decision: product type).
3. Maria is looking for a big screen, so she clicks on the 15-inch option and without leaving the page, she sees the three different options for this size (second decision: screen size).
1. Yes, screen size had a higher priority on our decision tree. We assumed that users care a lot about ergonomics when looking for laptops, which helped to limit the range of options we display for their decision).
4. These three options only display processor, storage (and if it includes touch bar or not) along with their price. She decides for the previous generation but with more storage, which gives her a powerful but less expensive laptop (third decision: price). She hits Shop Now.

On the Product Detail Page there are lesser choices to make, mostly focused on how it affects the price, but the main decisions were made in a conscious way (reducing the need for random exploration) and on the same page (saving time and clicks).

Most products will offer simpler decision trees. Phones, for example, consist of selecting generation, followed by size. Colour and storage decisions are left for the PDP.

The Challenges

A group of very talented people maintained the front-end of Jet.com, and they were able to support its tidiness thanks to a strict system of well-designed components. We wanted to create a new corner on the Jet ecosystem that should feel inspired by the Apple brand. We had to find the equilibrium between the Jet rules and Apple's inspiration..

Thanks in part to Apple's legendary minimalism, we were able to transform existing Jet components and use them for the ideas we had in mind for Apple. This means that we not only save a lot of front-end time developing new components (just in time for a tight deadline), but we also managed to reconcile the language of both brands.

While we were designing the store, another part of Jet's UX team was working on the entire redesign of the site. One of the unforeseen challenges was to try to design our solution generational-proof. We didn't want to rethink the whole look and feel a few months later.

On a side note, after the Apple Store launch, Jet was so happy with our work that it increased the number of designers to the team I was leading. Our team worked hand-in-hand with Jet's internal team in the release of Jet 2.0.

The Solution

Here is what the first version of Jet's Apple Store looked like when it was released in Q2 2018:

The Result

Tim Cook, Apple's CEO, personally praised our solution. In the same way, senior Apple executives consider it a "gold standard experience in the US, if not the world," and expressed how Jet's Apple store was the absolute best among 3rd party sellers. The new Apple store was considered a success, and it allowed Jet.com to reach deals with other big brands like Nike.

The partnership between Jet.com and our agency (Zemoga) grew after the success of the Apple store. From a team of one junior UI designer and one lead UX designer (me) temporarily available for Apple's project, the team grew up to five designers (plus me as team leader) working fully integrated with Jet's UX team. After Walmart assimilated Jet.com, the relationship between the two companies kept growing. I had the opportunity to lead the team into big endeavours such as redesigning Walmart.com and restructuring their Living Design System.