Matterport product page

Elevating product details to improve the purchase experience

Matterport Product Page design screenshot

My role

Product designer

My responsibilities

Product design

My methods

UX research, UX strategy, UI design

Matterport's existing e-commerce platform strategy was focused on getting the customer through the purchase flow as quickly as possible. This meant that important details customers needed to make decisions were missing, creating an opportunity.

Based on user research results and customer survey data, I designed a new product page to help increase customer education by elevating product differentiators and product relationships.

Context

Improving the e-commerce UX strategy to meet customer expectations

Matterport Product Page design screenshot
Current product detail experience

A critical piece of most e-commerce strategies, product pages are well-known to help increase buyer awareness and foster greater purchase conversion. Matterport's existing e-commerce platform strategy was focused on getting the customer through the purchase flow as quickly as possible and lacked product detail pages.

The current design adopted a product details modal rather than a product details page. This meant that important details customers needed to make purchase decisions were missing, which created an opportunity for further exploration and research into what problems the customers were facing during their purchase decision-making process.

Process

Understanding user needs to create effective solutions

Matterport's e-commerce business strategy broadly focused on actions to help customers complete e-commerce transactions. To provide design support for this strategy, I followed three design phases: research, discovery, and design.

Research

To help understand which areas to focus on, I worked with Matterport's UX research team to design and moderate user interviews. Over the course of two weeks, we interviewed 10 customers and synthesized these key takeaways:

  • Some customers reported not enough product information with the current modal experience
  • Nearly all customers complained that there was no easy way to find additional product details
  • A handful of customers completed purchases directly from sites like Amazon and B&H because they did a better job of explaining product details
  • Many users were unaware of some of the other products Matterport sells

I also reviewed customer survey data to identify any e-commerce specific feedback. Not unsurprisingly, I found similarities between what we observed during user research and what was reported directly by customers where they shared their frustrations with the purchase experience.

Discovery

Equipped with research results, I went about investigating how other e-commerce sites use product detail pages (or if they followed a similar strategy to Matterport and didn't use them). As part of this discovery process, I performed a content audit and noted different types of content I found. This was important for two reasons: 1) identifying patterns and 2) establishing benchmarks to measure designs against.

Matterport Product Page content audit discovery screenshot
Product detail page competitive content audit

Using the competitive content audit, I drew up a flow diagram to help me better visualize the types of content to target in my design.

Matterport Product Page FigJam discovery flow
Product detail page FigJam discovery flow

I also used this time to work with product management and engineering cross-functional partners to involve them in the process and better understand any challenges or issues that might affect the design.

Design

Leveraging the research and discovery work, I started the design phase by trying to answer a question: what would a Matterport product detail page look like? My first task was to create a content hierarchy, a UX technique I've used before to help me establish the page's story. I then took the content hierarchy and created a wireframe.

Matterport Product Page content hierarchy
Product detail page content hierarchy
Matterport Product Page content wireframe
Product detail page content wireframe

With my initial page design structure established, I then designed the UI for the page, using Matterport's Supernova design system to ensure consistency with colors, type, and components such as buttons.

Matterport Product Page UI design
Product detail page UI design

Outcomes

Practicing user-centered design and strengthening cross-functional collab

At time of writing this case study, this design has yet to ship. However, some positive outcomes were achieved with this project:

  • User research and resulting analysis played a critical role in the final design
  • Cross-functional partnership between product, engineering, and design strengthened, establishing a blueprint for future collaboration
  • Completing this project was an important first step in re-evaluating Matterport's e-commerce strategy to serve customer needs

Reflection

More user research and design iteration

While I'm satisfied with the design process for this project, I would have liked a larger sample size in the earlier user research work. I also want to test the design with users to gauge whether or not it's successful as a solution to the problems uncovered in the research phase. As is always the case with design, it is never done and the next iteration should incorporate learnings from the next round of user research. Finally, I want to create a version of this design for Matterport's SaaS plan that creates parity between the two types of Matterport's product portfolio.

University of Redlands web design class — teaching web design to a new generation of students using Figma

Esri cart flyout — integrating a familiar e-commerce pattern

Currently Reading

Backyard Starship

J.N. Chaney

Currently listening

Fisher Island Sound - BER-ABQ Version

Beirut

See listening log

Copyright ©2022 Waylon Baumgardner. All rights reserved.