O'Reilly UI/UX/UXR 16/18

I built, mentored, & grew from the ground up a fully remote product and UX/UI design team. My team and I built O’Reilly Media’s first ongoing usable design system, user research, and inbound practice for its SaaS learning platform, Safari.

Year
2016/18
Client
O'Reilly Media
Project
UI, UX, UXR & Design System
role
Director of Product Design & UX

Challenge

How might we lower our design and tech debt and give our cross-functional product design team more freedom to ship great products and features fast?

Solution — Design System = 10x Shipping Speed

We reimagined and redesigned O'Reilly's learning app "Safari" over time by quickly shipping, learning, and iterating on pilot apps using the brand-new design system coded in React that we built from the ground up in less than six months. Eighteen months later, we increased shipping by 10x, grew the team by 6x, and cut down most of our tech and design debt while increasing brand equity.

Approach

We start with visual Brand/UI and Research, perform a component audit (define core materials needed), hold an analysis workshop (build consensus around best-of-breed design patterns), define design principles (guide the work), and then prioritize the materials to be designed by the acute problems our customers (proto-personas) have expressed.

O'Reilly — Home screen

In less than 12 months we shipped a host of new features. Users could now take live online training classes, create playlists, read and organize their books and videos, follow along with instructors, or search for that Python code snippet.

O'Reilly — Reader App

The first part of transforming a textbook company is focusing on the reading experience. Now you can read with ease and power. You can catalog, sort, share, save and or tweak your settings on this multi-platform re-design of Safari's reader.

O'Reilly UI/UX/UXR 16/18

O'Reilly — Self-Assessments App

Users can learn as they go, growing their skills and staying ahead.

O'Reilly — Learning Playlists

Just like Spotify but for learning materials. Available online and on the mobile iOS App which we designed.

O'Reilly — Native Mobile iOS App

We knew our audience couldn’t possibly learn everything from 9 to 5. With our native iOS and Android apps they could save and take their learning on the go, outside of work.

Challenge

How might we identify opportunities to drive customers attending our live events to to our online learning experience?

UX Insight Research — Interviews & Customer Journey

We used a "Hopes & Fears" wall and conducted 1:1 Contextual Inquiries at our Strata Conference in NYC. We aimed to understand what average O'Reilly conference attendees were thinking, feeling, and doing — unearthing opportunities we didn't even know existed. Furthering the research done at Strata NY, we wanted to understand conversion events more. So we mapped a conference attendees' journey pre, during, and post-event on Safari. We identified gaps, weaknesses, and redundancies in the trial-to-subscription conversion customer journey across B2C touch points. We identified opportunities by exposing gaps and weaknesses in the customer's journey..

UXR Generative Research — MVP Wireframes

Because the onsite tutorials at O'Reilly events were being presented in Safari, attendees naturally wanted access to Safari. So they could follow along. We believed attendees would take Safari back to work if given free access to Safari as part of their ticket price. They would use and evangelize it to their teams and learning and development leaders. It turns out, after doing some MVP tests of clickable wireframes, we were right.

UXR Evaluative Research — MVP

Based on our generative MVP learnings, to optimize our events to nurture leads, we knew the event experience needed an upgrade. We needed to get attendees to the proper sessions and signed up with Safari to get the most out of those sessions. So we streamlined and created a new event app and site experience. We covered the basics with browse, search, and save features, enabling attendees to save sessions and event schedules easily.

Results

Launched→ 1 Design system conceived of, made the business case for, built in React, and launched.

Launched→ 1 Newly redesigned Safari Learning SaaS platform launched.

Launched→ 2 Mobile apps launched, 1 for iOS (4.7 rating on app store) and 1 for Android→ 10x Increase in shipping velocity in less than 1yr. Download the O'Reilly App for iOS

Awarded→ for the first time ever, a Top 20 Online Learning Library by Training Industry.

Team Shoutouts

Product Designers→Jonelle Chandler, Mike Boutté, Stephanie Hall, Scott Cook, James Touhey, & Courtney Bradford
Lead UX Researcher→
Stefanie Owens