Tara DeAngelis
Experience Designer / Art Director

The Digital Library Experience

My Role: Utilize User Research, UX Best Practices, Up-to-date UI patterns to create WCAG approved Style Guide aligned with Current Brand Standards

Background

Winter 2018

The company's outdated digital library caused a lot of friction with users. There was an extremely low rate of use within the customer base. Some of the reasons for that was that many of the users wanted to download the content to listen to offline. It was surprising to learn that one of the favorite places for people to listen to spiritual audiobooks was on long road trips where there was no service. Even though users were able to download, the files were huge, and the tracks were not titled, so it was very difficult to track down the chapter you wanted to listen to.

At the same time, the company had gone through a brand refresh, and my team had put together a WCAG-compliant style guide that was aligned with our new fonts and colors. It was decided that instead of creating a traditional app, creating a multidevice app, that could be used on desktop, tablet or smartphone was the best choice.

Discovery & Definition
I took time to empathize with the users and understand the data.

Learning Library Design Improvements

User Problem Statement

Based on user research (and common sense) users need a way to easily purchase, consume content and track their progress on desktop and in-app.

The business goals & user needs I integrated into the design

  • Ability to download programs to listen offline.

  • Ability to be able see all courses in progress.

  • Ability to see how long the chapter is and how much you have listened to.

  • The navigation needs to match the desktop version and the shopify version.

  • Ability to read about the author and link to their author page with all of their products.

  • User wants to be able to see how much of the course they have completed, and how much time is left (timeline marker).

  • User wants to be able to see where they left off in their course and jump back in at the same spot.

  • Marketing needs to include a new releases section, and a rotating banner section, and a related items section.

Ideation

Questions I pondered...

"How might we make this content more consumable?"

&

"How might we make it easy for users to see what products were purchased, in progress, or completed?"

Prototyping

Low Fidelity Wires to High-Fidelity Prototype

Using wireframes as a starting point, I decided that using the material theme would be the best choice for our app because Google has trained humanity to expect certain UI behaviors. I wasn't looking to reinvent something that didn't need reinventing. We had an older population of customers so going with the emerging standard seemed like a good choice.

Learning Library Design Improvements

The bottom nav first iteration designs problems:

PROBLEM: Didn't give the user a way out. There was no way to hide the component.

SOLUTION: Added a close button so if they don't want to see what they were listening to anymore, they don't have to.

PROBLEM: It was easy to miss the RESUME button.

SOLUTION: Made it more prominent

PROBLEM: Too heavy of a dev lift to code the minutes remaining.

SOLUTION: Go with a standard time indicator, save the idea for the next phase.

Learning Library Design Improvements

I came up with some color-coded solutions to help users easily scan purchased items to help them choose what to listen to based upon the time they had available.

After it was complete and approved I sent it off to be developed. The rest of the pages were styled according to the style guide I created.

Results
WOWZA!
71.2%
Average Order Increase of almost 72 percent!
128.66%
Increased young adult revenue by almost 129 percent!
42.01%
Increased mobile revenue by over 40 percent in 2 years!