REI Styles & Patterns

The Expert Advice (EA) website is an online educational and editorial program offered by REI Co-op. The EA website recently underwent a series of redesigns and platform migrations, in an effort to drive greater growth, visibility, and usability of the online experience. Working with a cross-divisional team, I partnered with devs, UX designers, visual designers, and project managers to design and implement visual and interaction improvements to the site.

my role — UI/UX, front-end dev, art direction
my tools — Sketch, CMS platforms (Hippo, CQ, Wordpress), Adobe Creative Suite
the team — devs, UX designers, content producers, project managers

a new platform and web experience

Faced with the evolving needs and goals of our users (both internal and external), I served on a cross-divisional team that researched, designed, and built a new internal publishing tool in tandem with a new online web experience.

In partnership with the dedicated UX team, I developed early wireframes and prototypes for the website refresh. Teamed up with devs, I participated in the migration, activation, and testing of new functionality within the new tool. The redesign and migration efforts resulted in a more modern, accessible, and user-friendly experience for both our end-users and internal contributors alike.

elevating the visual library

In addition to the larger redesign efforts, I also drove the visual design and overall layout with each new or revised page.

As the online library grew in scale, the EA team reached into more technical and nuanced topics. Through art-directed photography, custom illustrations, videos, and infographics, our design team of two produced simple visual design solutions that served to inspire our users and illustrate information that was often complex in nature.

interaction + motion

Ever eager to ideate and iterate for the continuous improvement of the experience, I pushed into a more interactive and dynamic space by implementing new functionality in the form of animations and shoppable images.

RAINY WEATHER LAYERS

HOT WEATHER LAYERS

patterns + standards

Drawing from the pattern library and brand standards in use at the time, our design team established best practices for the use and adaptation of those elements on Expert Advice pages.

Across all digital experiences tied to EA, we adjusted or created new patterns and usability guidelines (spacing, buttons, CTAs, tables, iconography, pull quotes, and more) that would better support the editorial and educational use of those pages. This often required the use of custom code.

style guides

With large batches of work that focused on a specific activity or topic, we developed more in depth style guides that included color, illustration, typography, and motion. Each of these units would offer a distinct look-and-feel as the user navigated from page to page. This strengthened the page-to-page experience within the unit and maintained cohesion with the larger brand style and interaction standards.

high traffic page improvements

a new Digital Design System

In late 2019, REI adopted a new Digital Design System (DDS). As with the digital pattern libraries of the past, the new guidelines were developed with an e-commerce focus first. This presented interesting challenges and workarounds for the editorial/educational Expert Advice pages.

After studying and learning the new guidelines, I worked creatively within them to move our pages into compliance with the new DDS. In a collaborated effort between devs and UX leads, we drafted actionable design solutions for the continued growth of the DDS and EA pages.

innovative improvements

Serving as an Innovation Ambassador during Innovation Days events, I worked with a diverse team of developers, motion designers and visual designers to identify new opportunities to enhance and modernize the Expert Advice web experience.

Over the course of two sprints, the team developed lazy load video functionality that resulted in a 75% improvement of page load performance on our test page. This functionality proved invaluable when the EA team needed to convey a complex concept through the use of motion. Leveraging this new capability, the EA team developed a large library of training and mountaineering pages that relied heavily on lazy load videos. This large body of work would not have been possible without the efforts of our Innovation Days team.

current state