How to relaunch an e-commerce giant in 120 days using InVision

When Walmart acquires your company, you might expect your day-to-day to change. But somehow, apart from a blessedly brief moratorium on in-office happy hours, e-commerce website Jet.com retains its fast-moving startup edge more than two years after being absorbed by a retail giant.

One example: Jet.com was able to relaunch in six months and roll out a brand new design system in the process.

We sat down with Rick Rodriguez, a Senior UX Manager at Jet.com, to get some inside stories about Jet.com’s relaunch—including tales of a new design system, building trust with senior leaders, and what it takes to “win New York” with a digital shopping experience tailored to urbanites.

Inside Design: What does your day-to-day look like at Jet.com?

I’ve been here for two years now. I help lead a UX team of seven full-time designers and a small team of outside contractors. I’m also tasked with operationalizing design and process within our team, and with the Product and Tech teams. In my “spare time,” I lead our design system efforts, known as JDS (Jet Design System).

[Jet.com was able to relaunch quickly thanks to a robust design system. Manage your own with InVision’s Design System Manager.]

Inside Design: You went through a major site relaunch last fall. How did that come together?

The relaunch was an opportunity to rethink the Jet.com business, but also a great moment for the design team. The company came together to relaunch the website, and we took our chance to integrate ideas already in the works, namely, six months of preparation and groundwork for a design system. We wanted to share a more systematic approach with the tech team for basic things like fonts, colors, spacing, etc. 

So at first, we invested time in researching system needs. That included poring over endless articles, podcasts, videos, and attending a Design Better workshop led by Nathan Curtis. We tried to understand the how’s and the why’s of having a system. We worked through features, did the full audit of established patterns, and thought through what they mean for Jet. 

Establishing a partnership with our Tech leads was crucial to having them lead the technical execution. With the help of a superstar Sr. UX/UI Designer, Paula Guzman, I led the design side. We considered components to use and the reasons behind them. It was important to have that partnership with Tech, because a design system is a communication tool. It should enable non-designers to have design conversations with confidence. 

Tech leaders were very much on board with it. It was a lot of work during the launch, but developers have definitely jumped on board for JDS. They’ve even taken what we built together and cleaned it up as a speed-boost project following the launch. They’ve since made JDL (Jet Design Library) to complement JDS – a clean version of code for our component library that was 100% dev led. 

If you walk around the office you’ll hear developers talking about JDS during the workday. They see the value.

Inside Design: How did the new design system affect the relaunch?

Everything happened so fast. It took our parent company over a year to relaunch their site. We relaunched Jet.com in 120 days. 

We did the audit, made the designs, and finished Jet Design System 1.0 before the relaunch project. JDS 1.0 ended up getting absorbed into a new iteration for the relaunch. In September 2018 The new Jet.com + JDS greeted the world.

Now, our site management team is able to create their stories on Jet.com using JDS components. They have eleven different modules to choose from: product carousels, storytelling heroes, content blocks, and so on. 

We tried to keep everything in JDS small and succinct, based on atomic design principles. We showed our teams that the modules are flexible, and how to plot them into a page template. Everybody understood it and adopted it. 

Inside Design: That’s amazing. A lot of design system rollouts aren’t so well-received.

Well, there was a lot of confusion at first—“What is it? How do I use it? Why do we need this?” The friction was felt by both the people who had to use the system and the people who had to design it. 

At first, people saw it as a constrained environment to design in, when they’d usually just eagle-eye it. But that restriction is where the creativity comes from. You’re shifting to think in terms of components, and working within the system rules. 

As they started to adopt it, they saw the power in it. The biggest win was the UI toolkit. Using plug-ins like Craft, our team was able to drag and drop JDS symbols to create an entire landing page, with a hero, carousel, text block, etc. All the spacing, scale, and symbols were already done. 

That was when they started realizing they could spend less time on things that aren’t really impactful, and more time on what matters—the execution of a story versus the execution of a layout. 

Inside Design: How has the acquisition by Walmart affected UX at Jet?

We’ve become laser focused on the urbanite’s experience. Walmart’s footprint is mainly in rural and suburban America, and their digital marketplace is built for that population as well. Their app is geared toward people who drive themselves everywhere—things like same-day order pickup, and curbside grocery pickup on the way home from work. 

We’re building experiences for urban and metro areas. That’s why our first mandate is “Win New York.” If we do that, we’ve come a long way to our goal, and can look to scale in other cities.

Inside Design: How does the customer experience look different in NYC?

The city dweller lives differently, so the shopping experience is very different. They walk. They take trains. They live in 4th-floor walk-ups. And then there’s the NYC weather, hot and humid in the summer, and such hard winters you can’t step out without a coat. How does that affect someone carrying bags of groceries? 

So we look at delivery. And there are so many details that affect an urban delivery person. You’ve got flights of stairs. And how does a delivery person interact with a doorman? And do they leave the order on the stoop, behind the door, somewhere else?

We started with extensive ethnography research. We made trips into people’s homes and explored their spaces, took photos. It was so cool to see their habits and the reasons they do what they do. 

We embodied all of it into Jet. No one else is really going at that same mindset—the small space, apartment and city dwelling, and what that means for grocery as well as non-consumable shopping. When time and space are at a premium the way they are in New York City, every design decision we make matters to our customers and to the business..

Inside Design: How did you get to that place, where senior stakeholders from other teams trust that Design has the expertise to drive new initiatives? 

It comes from doing our homework as design leaders and managers. We believe in the advocacy of design enabling business, like design leader Stephen Gates says. It’s from learning and reading, so that we can speak their language. You don’t go to another country and expect people to speak your home language. For design leaders that means going into the board room and realizing dollars and cents mean something. 

Jet Design System is a good example of speaking in dollars. We could show that we saved “X” developer hours per sprint after implementing a design system. But sometimes it’s harder to quantify. So we do our best to be aware and respectful of costs, including how we budget people’s time in meetings, design exercises, etc.

Then you have to prove it, show research and analytics, the data behind the decisions we make. Eventually the pattern becomes obvious, “Design said this would happen, and it happened, so we might want to listen to Design.” That’s always our goal.

A lot of the credibility we have now is thanks to our former head of UX, who moved on recently. He always said, “We have to deliver and over-deliver, and that becomes what Design is known for. We show our value with every request and every meeting. Then there will be a day when, if we can get involved early in the process, Design can have a big impact.” 

When we relaunched the Jet.com site last fall, that was our moment. It was a design-driven effort from start to finish. 

Inside Design: That’s another great example of showing value. How does that show up in the rest of the org?

One of the biggest changes was when we started using modified design sprints. We used the tools from the Google style five-day design sprint popularized by Jake Knapp. Jet sent two product managers and me to a Design Better workshop led by Jake to kick off the learning process. We took what we learned from that and ran with it, mobilizing multiple sprints within weeks of the workshop. 

People have seen a lot of value from that. I’ve made cross-collaborative relationships by inviting a marketing person or a finance person to a design meeting. It becomes really clear what design thinking does for those who aren’t designers. 

We get the most curious solutions and ideas from the most unlikely places. InVision is always part of that, getting ideas out of people’s heads and into something real. We work through solutions, and then there’s a point when you ask, how can you get this idea across? That’s when we pull out InVision to show the design to everyone.

There’s no other team at Jet that can take an idea and make it look real the way our team can. That’s a power we have to respect. Making it look real can be a hindrance if people jump on it and say, “Let’s build it!” without looking into the cost, or the feasibility. We have to be responsible with that power to keep their respect.

But it can also be a force for good. During the relaunch, for example, I can’t begin to explain how much work we did in InVision. 

We had this master prototype. Sort of like a mirror of the staging environment, but more visually powerful. We’d take our final hand-off designs and add them to the master prototype in parallel with the new Jet.com site development. This allowed developers to see our vision in detail, and it helped other teams to see key features like search, category pages, new components…

People got so excited every time we pulled it out in a meeting. It created a huge buzz factor, so much momentum. You hear about the things being built, but then you see it and see the progression of it, and it becomes real. 

We knew what each of the new pieces were, and yes, we could just put it into staging, but people don’t understand what they’re seeing in a staging environment, or what’s going on behind it. We were already doing these prototypes anyway, so we just had designers handle a category or feature each, and pull it into periodic company-wide demos.

That was how we gelled as a UX team and with the whole company. Everyone got behind the project at demo presentations and product updates in this massive prototype of the future state. Jet cares about how we work, but we also care how we present ourselves as a brand to the world.

With tools like InVision, we were able to not only visualize our concepts but eventually realize them. The process was as collaborative as you could get. I firmly believe it’s the only way we were able to make the Jet.com relaunch happen successfully.