Making Design Within Reach for online shoppers

With so many people working from home these days, buying a proper office chair seems to be on every remote worker’s wish list. No office chair is perhaps more coveted than one from Herman Miller.

Back when browsing a brick-and-mortar store was the norm, finding the perfectly ergonomic chair called for an in-person showroom experience. But with the emergence of price sensitive direct-to-consumer websites and the rippling impacts of COVID-19, winning a consumer takes so much more than a brand name.

For one of Herman Miller’s brands, Design Within Reach (DWR), this meant redesigning their e-commerce website to not just showcase beautiful products, but also tailor the shopping experience to each consumer. “The furniture industry has historically been behind consumer startups,” DWR’s Director of Digital Design Eric Ishii-Eckhardt said. “To be on par, we have to offer more consumer-centric experiences.”

To tackle this redesign, the DWR team partnered with BASIC®, a branding and digital agency that works with companies like Google, Airbnb, Patagonia, Apple, and Beats by Dre. "To succeed, we have to work with people who’ve worked with the best consumer brands," Ishii-Eckhardt said. "Working with BASIC® gave us the best of both worlds—the e-commerce expertise of an agency and the in-house knowledge of the DWR team.”

A true agency partnership starts with a transparent process

Building a great relationship between a client and their agency is easier said than done. To ensure their relationship was rooted in trust and transparency, the DWR and BASIC® teams created a tightly integrated process. "Instead of separate workstreams, we established a partnership built around the idea of co-creation and leveraged different aspects of our teams’ expertise,” said BASIC® CEO Matt Faulk. “When it came time to design and build, we operated as one singular team.”

Operating as a singular team called for a more transparent way of working. “We were already struggling with design file collaboration among our internal product design team,” DWR’s UI Design Lead Ryan Ganss said. “Working with designers at a different company was going to add to that challenge. We needed to change our design tool so our two teams could actually work together in real-time. Figma was that change.”

Because Figma is built on the web, the DWR and BASIC® teams could access design files at all times. “Both teams were able to work in the same file without worrying about copying over each other,” said BASIC® Senior Designer Garret Schauteet. “This unlocked a whole new level of efficiency. With two teams based in different time zones, we essentially achieved 14-hour workdays. At the end of our workday, the DWR team can just pick up where we left off. We didn’t have to worry about handing off the latest version or updating links.”

Bringing the showroom experience to the web

The new DWR.com came to life after 110 hours of customer research and in-depth user testing with more than 200 participants. As more consumers make buying decisions entirely online these days, the goal of the new website redesign was to answer customers’ key shopping questions, replicating the experience they might have in a showroom.

“Using Figma prototypes for usability testing, we were able to run tests, iterate quickly, and keep moving forward,” UX Designer Raechel MacKenzie said. “We quickly gathered insights using an interactive website prototype that looked and felt like the real thing.”

The new website launched in early July 2020 with a fully responsive design and video chat to get in touch with sales associates. Since launch, DWR is seeing an increase in sales, as shoppers who use the new live chat functions are nine times more likely to make an online purchase compared with those who don’t.

“We typically anticipate a small drop after a big website release, but instead we saw an immediate lift in site purchase,” Ishii-Eckhardt said. “Internally, I’ve never seen so much positive feedback from all across the organization. I believe one of the reasons for this was the transparent process we ran. Along the way, I was able to easily share quick links to Figma prototypes with our CEO and other execs, so they were part of our journey.”

A design system that scales across multiple brands

But what makes the DWR and BASIC® teams proudest actually lies beneath the glossy redesign. “We used the DWR website redesign as an opportunity to create our first design system for all of Herman Miller brands,” Mackenzie said. “BASIC® helped to evolve and define the new art direction of the system. Building upon a shared core set of components, the two teams created a structure that would scale over time.”

For DWR, this new design system not only helps their developers implement repeatable components faster, but it now allows content authors to quickly build a page by simply dragging in pre-built components, editing images, and changing text—democratizing design across their whole organization.

“We now have a common design language for the Herman Miller family of brands,” Ishii-Eckhardt said. “With our asset libraries all in the cloud in Figma, we’ll be able to easily share and scale our design system with our internal and external partners around the world.”

As the Herman Miller teams set their sight on redesigning their other e-commerce sites, getting that coveted in-store experience from the comforts of our home will soon be just a few clicks away.

In the meantime, explore the new website at www.DWR.com.