In 2013 REI used an external vendor to provide a mobile web experience on m.rei.com. In the interest of moving towards a responsive design for the whole site, REI created the Multiscreen Goes Mainstream agile team to do research, designs and prototypes that would inform design decisions for future iterations. The redesign of the mobile site was the first manifestation of that work. While a full responsive redesign was not the outcome, REI was able to create an adaptive m.rei.com site based on much of the work the multiscreen team did.
The small team of myself, 1 visual designer and 1 front end developer sketched, wireframed, prototyped and tested designs for navigation, search filters, footer, header and landing pages. We did an exhaustive survey of ecomm mobile web experiences and in store testing with REI customers, iterating on designs and prototypes as we went along. The final prototype we created was the foundation for the site that is used today (as of 9/2015).
The launch of the REI owned mobile site saw a marked increase in conversion over the vendor owned version, having improved search and findability (there were also a large number of development improvements around performance and stability!) as well as excellent customer satisfaction feedback.
Screen shot of the final header and navigation (taken 8/2015).
We iterated on several versions of search refinements and filters. We would then make quick wireframes or clickable prototypes from them and put them in front of REI customers, ideally getting feedback once a week.
Wireframes were also used when we needed to get feedback from other interested parties across the various REI divisions.
A designer would iterate on the visual design before I would put them into a clickable prototype to bring into a store to get user feedback. We would be looking for both design and usability feedback when we would store test.
A screenshot of the final product (taken 8/2015).
Sketches and wireframes for the footer. You can see in the white board photo that we had leveraged research and designs we had done for a full responsive redesign.
Screenshot of the footer (taken 8/2015).