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.
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.
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.
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.
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.
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.
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.
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