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.
Why scroll to the end to find out?
INCREASE
Average Order
INCREASE
Young Adult Revenue
INCREASE
Mobile Revenue
IMPROVEMENT
Task Abandon Rate
Based on user research (and common, modern sense) users need a way to easily purchase, consume content and track their progress on desktop and in-app.
The next thing I did was researched up-to-date interaction patterns within common digital libraries. Because the library would feature books, online courses, and audiobooks, I researched Kindle, Spotify, and Audible interfaces.
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?"
Using wireframes as a starting point, started with the desktop version since it would be a multidevice design. Figuring out the online courses section would be the most complex, so I started there. As I moved on to higher fidelity designs I decided that using the material theme would be the best choice for our app because at the time it was the gold standard. 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.
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.
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.