I had the incredible opportunity to be one of the lead designers for REI’s iPad App. This is the first mobile experience I worked on from concept all the way through to App Store availability. Before REI’s website was responsive, we had performance analytics and usability audits that showed how REI’s website was performing poorly on tablets.
User experience, visual design
Process & details:
My teammate, Elishema Fishman, was the driver for the initial feature set. After Elishma’s preliminary research, she and I met to look at the possible feature sets. One of the business requirements was that it would have all the shopping functionality of our phone apps, but we were given the freedom to explore other functionality for the core experience. REI’s mission is to inspire, educate and outfit for a lifetime of outdoor adventure and stewardship. To that point, our mobile experiences focused mostly on the 'outfitting' part of the mission, and we wanted this new experience to represent the 'inspire' and 'educate' pillars.
Most of REI’s activity-related materials are separated into different areas on the site. If a user wants to read Expert Advice articles about rock climbing, then find a class at a local store, they’d have to go all over the place. For our iPad app we wanted to have the specific activity be the hub of our navigation model and bring all our gear and offerings together. This would also allow us to do a seasonal content roll-out.
Through our established process of collaborative sketching (see REI Mobile campaigns for more info) we created wireframes for key areas of the app. In addition to aggregating our existing content by activity, we also wanted to introduce a platform for users to post and ask questions of other members, and create their own meetup-style outdoor events. These features could all be introduced later on REI.com, but we were excited to launch this new way for co-op members to interact with each other on iPad. With a solid idea for the overall concept and features, we created an interactive prototype and took our ideas in-store to get feedback from customers.
Once we were confident our concept was both viable and useable with customers, we created high fidelity mockups to get final buy-in from management and stakeholders. Once our plan was greenlit, we started to work with our backend developers to understand the concept and start building the underlying platform.
After a few development sprints, it became clear that REI didn’t have the level of investment required to create the community features at the core of our experience. Rather than throw away months of design work, we made a case to pivot the app to focus on the shopping experience, since that was the original business driver for funding the project. In addition to these development challenges, Elishema left the company to accept another job. While I was onboarding a new designer to the project, Apple announced iOS 7—which dramatically changed the visual-style norms of the operating system.
Amidst the challenges of all these moving targets, we refocused our effort on refactoring the features from our shopping apps for the tablet experience, taking advantage of the additional screen real estate.
Similar to our process for REI’s mobile Product Detail Page (PDP), we started our design sprint with a competitive analysis of other tablet experiences for all kinds of retail. Then we collaboratively sketched versions of the view until we’d accounted for all the features and content on REI.com and our phone apps. We knew that tablet-users tend to be on their devices more in the evenings, and use them while doing other activities, like watching TV. In order to support a more casual browsing experience, we added the ability to swipe horizontally between products without having to go back to the product grid.
As we moved closer to completing the shopping design, our team started working two days a week on-site with our development partners at Deloitte Digital to expedite and streamline the collaboration needed to build and release the app.
The Find in Store feature (shown above) allows users to check if the chosen size and color of a product is available at an REI location near them. This action is initiated from the PDP and lists all REI stores by distance from the user. It can also be filtered to show only stores where the product is available or has limited availability. We were able to use the space available to combine three screens from the mobile app into a single view. Not only can users to see a list of stores and a map with inventory levels, they can modify the size/color of the product without changing context or screens.
Through research, collaborative sketching, and testing with customers, our perseverance resulted in a design which showcases our products with all the extensive information and the expertise customers have come to expect from REI. It closed the gap with our tablet users for years before REI completed their responsive redesign of REI.com and ultimately decided to stop supporting the iPad experience.
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, Max Eichbaum, Nici Bissonnette, Dave Ballantine, & Laurie Pritchard