REI Mobile Campaigns
Backgound:
When I first started working on the mobile team at REI, any campaign that had Offer Exclusions went to a static page of unstyled HTML and was a total dead-end for users. All they could do was go back to the home screen—and try to figure out how to take advantage of the promotion on their own.
Before: When I started at REI, if user tapped an image from the slideshow, they were taken to this bulleted list of exclusions and details, but could not take any action (rendering the promotion pretty useless).
Before: When I started at REI, if user tapped an image from the slideshow, they were taken to this bulleted list of exclusions and details, but could not take any action (rendering the promotion pretty useless.)
I knew we could do better than this. We had the deep-links necessary to navigate to specific products and assortments from the slide show, so we should be able to provide the same functionality on the exclusions page.
My role:
User experience, visual design, front-end development
Process & details:
I volunteered to do some explorations and successfully coded adaptive mobile pages which enabled us to launch the first actionable promotion details screen. The business requirements of showing offer details and exclusions were still being met, but in a way that included branded visuals and presented users with a way to immediately take advantage of the offer.
After: I volunteered to code some richer offer-details pages that had more consistent branding and allowed customers to take direct action on the promotion.
After: I volunteered to code some richer offer-details pages that had more consistent branding and allowed customers to take direct action on the promotion.
Over time this initial effort evolved to support robust campaigns where custom landing pages were being built on our full site. In my role as Interaction Designer I shared ownership for the experience with the User Experience designer (who maps more closely to a User Research role at other companies). Other Interaction Designers at REI were just skinning wireframes provided to them by UX, but I took this opportunity to redefine our process. I started a practice of collaboratively sketching wireframes together. This way the Interaction and User Experience designers could hash out any differences and agree on an approach in advance. We would then present a unified design vision to our development team (and agree to test multiple variations with users if we had disagreements that couldn’t be resolved during sketching). This approach worked so well, other teams at REI tried to replicate this model in an attempt to reach our team’s velocity, quality, and through-put.
We started a custom campaign by first auditing the planned full-site experience, then meeting with stakeholders to discuss priorities before moving forward to collaborative whiteboard sketching and wire-framing exercises.
This way of working enabled us to quickly define reusable patterns for these new mobile campaign pages. We designed common elements and layouts that we were able to re-use for each offer. There were many promotions that started and ended each week, and we needed two different versions of the page to support our mobile website and native apps for each offer. In order to support the demand and turn-around required to make these successful, I was given access to directly deploy code and assets to REI.com.
Our final design for the mobile web version of the Labor Day Sale page, optimized for touch devices.
We knew from qualitative evidence in our user studies that even if users don’t take advantage of special offers on our mobile site and apps, just having parody with the home page of the full site helped customers feel more comfortable using our mobile properties. Users liked knowing they could use only the mobile app/website and not have to check the desktop site to stay in the know for special offers and promotions.
With the increasing volume and frequency of custom landing page promotions, we created reusable patterns and components that allowed us to quickly launch new offers and events.
Outcome:
I didn’t know at the time that speaking up to create a better mobile experience was essentially signing myself up to be on-call, at all hours of day and night—especially during the busy holiday season—but I was happy with the impact and results of my effort. When I left REI three years later, the mobile team had added two additional people to support the continued growth and velocity of these mobile campaign experiences. As a user of their mobile apps, I have been pleased with their continued commitment to evolve and grow the design and capabilities of these experiences even today.
The rapid nature of the mobile campaign support gave us ample opportunity to try new ways to capture the tone and voice of each offer, while maintaining our established patterns.
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, Nici Bissonnette, Melinda Salazar, & Laurie Pritchard