Retail Product Explorer
Tools Used: Figma, Miro, Prismic, Obvi, Dovetail, Jira, Ceros, Airtable
Client: Herman Miller
Research Methods: Diary Study, Survey, Moderated Interviews, and Google Analytics
Role: Product Designer
Some background
When I joined the team, there was a proof of concept for the Retail Product Explorer, an in-store iPad app that introduces customers to some of Herman Miller’s best-selling office chairs. The Design and Marketing teams had spun up the concept quickly on Ceros a few months earlier. The proof of concept came together quickly to accommodate COVID-19 and our in-store shopping experience.
We were learning from stores that many customers were coming in to look at performance seating for their home offices. However, because of the dangers of COVID-19, customers weren't always comfortable, even with masks, working with a Sales Associate.
So we had a business problem on our hands
How might we educate customers interested in testing our products before purchasing without relying on Herman Miller's Sales Associates?
That's where the Retail Product Explorer comes in; we wanted to create a self-service digital experience where customers could learn about some of our best-selling office chairs’ Key Benefits, Adjustments, and Material options.
We built the proof of concept on Ceros, which allowed us to get it out into the stores to test, but the experience was not responsive and only really accessible from the stores with seating walls (like the one shown on the left).
Our users
We focused specifically on in-store shoppers, who were worried about working one-on-one with a Sales Associate where it's challenging to maintain a 6-foot distance and still learn how to adjust the chairs to fit their posture and body.
Setting up a Research Cadence
Once the proof of concept was live in the stores, I set a plan for some research. I wanted to start by understanding how helpful the iPad tool was for in-store shoppers, but because COVID-19 was very active, I opted to design a survey in Airtable vs. visiting the stores in person.
In addition to the customer's satisfaction with the experience, I was equally interested in how the iPad tool affected our Sales teams. I wanted to make sure we were designing with our internal employees in mind as well as our customers.
I designed a diary study to gather some insights for our Sales team and ran a pilot with our internal UX team. I piloted with the research tool Obvi but opted to use email communication for our actual study.
From doing the diary study, I learned that while this iPad tool could be a self-service tool for customers needing a more hands-off shopping experience, Sales Associates also used iPads as a selling tool. I heard about many times when they would be working with a customer and use the iPads to showcase different fabric, color, or material options and prices for the various configurations available. This finding was echoed in some of the survey responses as well.
I knew that this first relaunch release would be our MVP and that we would have time to iterate on this tool, but this use case was something I wanted to understand more. After our MVP launch, I knew it would be possible to visit some of the stores with COVID-19 restrictions easing up. I started to plan for some field research to understand at a deeper level this second use case we didn't anticipate.
“My experience was great as the store employee walked through all the various features and made it more interactive. It was nice to be able to see all the different functions and physically adjust the chair. ”
Building on a design system
While I was gathering feedback from customers via our survey as well as running the diary study with our store staff, I was working with a team of Front-End Developers, a Product Manager, and a SCRUM Master to build a web-responsive version of the iPad tool.
As we were thinking about what this new version of the iPad tool needed to include, I wanted to make sure we built the new Retail Product Explorer on our design system, Picnic.
Interested in reading more about our Design System? Explore Picnic’s public facing site or explore Picnic’s development site
The product team I was working with on this experience was devoted to building out this design system, but at that point, no products had launched using the system. The Retail Product Explorer seemed like the perfect place to start. I wanted the experience to be accessible to customers outside of the stores and in the stores. So we needed to build a responsive product that had a URL that was easy to remember.
I worked very closely with the Front-End Developers to select patterns that were already in use in our design system, and when there wasn't a pattern that fit the need, we worked together to design and build something that would be reusable.
Going from a Ceros prototype to our design system, I wanted to make sure we were using our system's fonts and type scale.
I wanted to use this relaunch of a responsive and more accessible experience to explore our animations in the tool. It was important to me that we use motion to entice shoppers to come over and engage with the physical chairs and iPads and use movement to tell the users where we wanted them to focus.
Connecting lines were animated in between the Benefit description and the image of the chair. This was included to help to draw the user’s attention to were a specific feature was located on each chair. If the feature or benefit was general, I choose not to include a connecting line.
Designing beyond the stores
It was important to me that with this new experience, customers would be able to take the experience with them when they left the store. There were multiple reasons for this:
1. I wanted users to be able to quickly pull up the experience on their phones, via a QR code, just in case they weren't comfortable touching the iPad in the store
2. If a customer did purchase the chair they tested in the store, I wanted them to have the freedom to easily re-access the Product Explorer so they could watch the Adjustment videos post-purchase or reference the Key Benefits of their newly purchased chair.
3. I wanted Sales Staff to be able to remember the URL and access it from their devices or direct a customer to the tool, even if the iPads weren't available.
However, the iPads on the seating wall needed to stay fixed with the chair associated with the digital experience. To solve for both the in-store experience and a take-home experience, we built two modes; a Kiosk mode and a personal device mode.
Kiosk Mode
Personal Device Mode
For the personal device mode, I designed a new page that would serve as an index page. Users can access different chairs from the page, explore the various key benefits, see how to make adjustments, and play around with the available options per chair.
A few examples of concepts and interactions I was exploring before settling on our final index page design.
The release
We had started working on this new and improved experience at the beginning of 2021. We soft-launched this experience one store, one week at a time, to catch bugs early and often. We have currently released to 3 stores with already great success. We are already thinking about what's next for this tool and starting to plan for launches in new stores and stores internationally.
Want to see Retail Product Explorer for yourself? Check it out!