REI Product Detail Page

REI digital retail mobile product detail page redesign, shown across four iPhones, UX interaction design Courtney Comfort

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

REI digital retail mobile product detail page, mobile vendor version of page shown across four iPhones before the redesign, UX interaction design Courtney Comfort

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 missing entirely.

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.

REI mobile product page process image showing screenshots of other mobile retail sites and REI's full site product page, UX interaction design Courtney Comfort

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.

REI mobile product page process, whiteboard wireframe sketchs, UX interaction design Courtney Comfort

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.

Selected features from the REI product detail page redesign including the review overview, user-submitted review content, and Spec tool-tip, shown on three iPhones, UX interaction design Courtney Comfort

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.

Selected features from the REI product detail page redesign including updated action butons and product details tab, and new photo and video experience shown on three iPhones, UX interaction design Courtney Comfort

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 FishmanMelinda Salazar, & Laurie Pritchard

© Courtney Comfort 2018     ///     mr.courtneycomfort@gmail.com
© Courtney Comfort 2018    ///    mr.courtneycomfort@gmail.com