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