REI iPad App
Background:
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.
My role:
User experience, visual design
An exploration for rebranding REI’s Outlet business. To connect with the audience, I used modern lifestyle photography and amplified the heritage aspect of REI’s brand, rather than focusing solely on the featured product.
An exploration for rebranding REI’s Outlet business. To connect with the audience, I used modern lifestyle photography and amplified the heritage aspect of REI’s brand, rather than focusing solely on the featured product.
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.
This affinity diagram shows our idea to have our primary navigation focus on activity, allowing all of REI’s editorial material to appear side-by-side with user-generated content and product.
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.
Elishema and I collaboratively drew these wireframes for different content types in our app. Once users have selected an activity, they can easily switch between articles, classes and user-posted events and forums.
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.
Elishema and I testing an experience with a potential user in Seattle’s flagship store.
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.
These high-fidelity mockups were used to get buy-in on the final app concept to management and stakeholders.
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.
Comparison of how I adapted our iOS 6 product grid to the new, flat-style and mono-line icons of iOS 7.
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.
The initial whiteboard sketch, a higher-fidelity wireframe, and final mockup of the Product Detail view where users learn about and purchase specific products.
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.
Development specs I created to show all variations of our PDP action rail including sizes, spacing, colors, and behavior.
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.
Final mockup of the Find in Store view, which enables customers to see if the product they’re looking at is available in-store.
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.
Final mockup of the Shop Brands page displays logos of featured and popular brands, plus an alphabetical list of all brands carried. Brands can be filtered using the text field above the list.
Outcome:
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.
Final mockups of the store detail and product grid views with category navigation collapsed.
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