REI Product Detail Page
Background:
While I was on REI’s mobile team, they used a company called Usablenet to serve the mobile version of their website. Usablenet’s proprietary technology consumed and reformatted the full-site code to provide a layout optimized for mobile devices. Their team had initially designed the mobile version of the page which poorly represented our brand and didn’t include key features that users wanted.
My role:
User experience, visual design
Before: This version of the product page was created by REI’s mobile web vendor. Their spacing and formatting choices throughout the page interfered with scan-ability and did not provide a clear visual hierarchy.
Process & details:
We knew from observing users that the brown content dividers were often misinterpreted as buttons (since they don’t go all the way to the edge of the screen). Customers also expressed frustration in having to swipe through product images without previews. The lengthy product descriptions looked like unstyled HTML lists; the layout of the action buttons was unsettling, and one of our most valuable assets—customer reviews—was almost completely undiscoverable.
Before jumping in and solving the known issues, we wanted to make sure we had the context needed to address any other features that our design may have been lacking. The three of us started by independently gathering samples of mobile product pages from competitors and other retailers, then completing an audit of features on REI.com's full-site product page.
Here are some examples of mobile product pages that we gathered across the spectrum of digital retail and REI.com.
We started by gathering and reviewing mobile product pages across the spectrum of digital retail and inventoried the content and features of our full-site page.
Once we completed our independent analysis, the three of us came back together to share our findings and compare the full site to the existing mobile design. In addition to adding thumbnail images and user reviews, we identified several refinements in the layout and visual styling that would both provide a more consistent experience and improve usability. After defining our goals and scoping the new features, we collaboratively whiteboarded the wireframes for our new product page.
Elishema, Melinda, and I collaboratively whiteboarded our new experience over several sketching sessions. Customer reviews required a few additional pages to simplify browsing and sorting.
I mocked up high-fidelity versions of our screens and, after refining them through peer-critique, we took a prototype in-store to test our design directly with customers. We replaced the nouns in our action buttons with icons so they could appear on a single line and were excited that all participants understood their meaning. We also heard that when reading reviews for outdoor gear and apparel, the location of the person who wrote the review is especially important. Although we had already included that information in some places, we updated all versions the review tile to reflect this finding.
Screen 1: Our final design of the reviews tab included the aggregate snapshot and the top three most-helpful reviews (linking to a separate page to see all reviews). Screen 2: The full review page included user-submitted photo and video. Screen 3: We restored the tool-tips in the specs tab to explain technical or proprietary categories and added a new product viewing experience that includes video.
User-generated content was just starting to come into play, so we also made sure users that the mobile version included their photos and video, badging their review with special media icons. Also, many of REI’s products have twenty or more photos. Because page-load time is closely tied to conversion, we stuck with Usablenet’s plan to cap the number of photos shown on the page. But users still wanted a way to access all of them. In our design, tapping on a photo (or the + MORE thumbnail) takes users to a new photo and video experience where they can access all the REI and vendor provided photos and videos, plus zoom into high resolution images.
Our redesign allowed all the product action buttons to all appear on one line and we truncated the lengthy description tab to make the page more scannable. Our new media experience for photo and video restored access to all the content available on the full site.
Outcome:
Compared to our old mobile site, customers said our new design made it easier to know what is interactive and what isn’t, and expressed appreciation for REI’s attention to the details.
At REI, we sat and worked together in a cross-functional team including the Product Owner, Scrum Master, Business Analyst, User Experience and Interaction Designers, Copywriter, Front/Back-end Developers, and Quality Assurance Testers.
This work was collaboratively created with the following designers and copywriter:
Elishema Fishman, Melinda Salazar, & Laurie Pritchard