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.
User experience, visual design
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.
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.
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.
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.
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