Select Page

REI

Problem

The Project was initiated because user feedback indicated users were overwhelmed by information and didn't know where to go to sign up.

Reading time: 4 minutes

REI is an outdoor retail co-op with a focus on outdoor adventures, education, and gear. Their membership page provides online outdoor retail and education for visitors. But with all the benefits, there are many calls to action.

Timeline

5 weeks

Role

IA, UX and UI designer of Co-op membership landing page design.

Tools

These tools were very helpful in tackling this challenge.

Macbook

REI Co-Op landing page as it exists today with lots of great membership information but too many calls to action

“Where do I go to sign up?”

– Prospective Member

Concept

As part of my SVC visual design and information architecture classes, I redesigned the REI member landing page to engage potential members and encourage them to sign up. The REI Co-Op responsive landing page redesign was a solo piece I worked on using paper prototypes, Photoshop, Illustrator, and Sketch to create. I selected this piece to showcase because it uses my outdoor photography as the background of this streamlined membership page with a clear call to action for conversion optimization. By the end of the 5-week project, I designed a landing page to provide an easy sign-up for Co-op membership with images that create a feeling of inclusion.

As I was reading Brad Frost’s Atomic Design, it led me to find a complete picture of the current site. I reviewed the current site information architecture by mapping the current global and contextual navigation models.

Discovery

These models played an important role in finding out how important each topic was to 5 users in closed and open card sorting. I synthesized this research to find key product categories. Following the Object-Oriented UX process Sophia Voychehovski uses to experiment ways each object relates to others I conducted object mapping for the REI global navigation content. As soon as those key product categories were identified I created a recommended global and contextual navigation model and continued on to competitive analysis and interviews.

Research

I completed competitive analysis looking at other outdoor retailers. The best examples showed clear communication with modular design. Many sites included curated outdoor imagery with precisely placed text overlay in their design. This worked to evoke a sense of awe of the outdoors while reinforcing brand identity and telling a memorable story. I conducted user interviews of 3 potential users based on their recent purchases. These interviews informed me about what would motivate them to buy a co-op membership. My process brought in these discoveries with potential users in mind.

Competitive analysis of other outdoor retailers using large images, text overlay, and modular framework on their pages

“Why should I join the Co-op?”

– Prospective Member

Motivation

What motivates people to sign-up? Trust in the product was very important to the users I interviewed. They had to trust their gear out on the trail to withstand the elements and get them where they need to go. Another motivator was financial independence. Users wanted to be sure they were getting the best benefits from a membership to work toward financial independence. The sense of belonging to something greater was an overarching theme with all users hence the large use of REI’s “It’s good to belong” slogan.

Sketching

One of the most challenging parts of this project was condensing so much membership benefit information. Another challenge was the time constraint. Class prescribed milestones each week helped to work through these constraints to be able to present to a board of designers in the final week. Sketching after user feedback focused on a clear call to action, minimal text, an outdoorsy and witty voice with a clean, minimal color palette.

Sketches focused on a clear call to action

Wireframes

Wireframes digitized the most effective sketches based on user feedback to create a clear call to action

 

High-Fidelity Testing

I utilized my own outdoor photography to create high-fidelity mockups for user testing. It was difficult for me to let go of a few of my favorite photos, but I learned to “kill my darlings” for the final photo that elicited the strongest response. Through testing with users, I found it was important to them to alter the background photo placement for text visibility. I tested over 30 display fonts with users to capture the fun, witty, outdoors loving display font for “It’s good to belong.”

High-fidelity mockups using my own outdoor photography to test with users

“I really like your third concept, where the white icons are on the dark part of the image. It makes it much more legible.”

– Prospective Member

Project Outcome

 I decided with feedback from users my third design was the most compelling. “The logo and tagline look great.” “I really like your third concept, where the white icons are on the dark part of the image. It makes it much more legible.” I moved forward with this design to strengthen icons, buttons, and use the custom color scheme. The outcome is a relaxing, sophisticated landing page inspired by REI’s mission statement. I edited icons with space reallocation to increase user visibility with the “Buy a Membership” call to action in the center. The outcome for the project was positive feedback from current members, potential members, our class, and design panel.

Learnings & Reflection

How users react to iconography surprised me. When testing the iconography, some users showed confusion about icons that I was very familiar with. This was good to know and swap them for more recognizable icons. I also learned that it’s best to kill your darlings early and keep moving. 

While using my own photography was a great experience, it informed me of some of my own biases I need to be aware of and keep in check while designing. 

– Self-reflection on the project

Results

I designed a page that targeted user motivations: financial independence and trust, and presented a clear way to sign up.

 

Pin It on Pinterest