*Onboarding made with fun in Figma
Mission.
Redesign and improve the user experience and user Interface for Aureo App, a mobile application with condensed audio books for professional development. Here’s a sneak peak of the end result.
Why?
My client came to me with a problem: He was losing subscribers due to poor user experience. Users enjoyed the content, but had a hard time navigating to it. He also noted that the interface was not pleasing and in poor quality. He gave me this brief with KPI’s, user profiles, user interviews and we worked together to create a stellar product. Continue to see how it was done!
Who, Where & When?
Sole designer in Miami (Me), 4 devs in Italia, 2 Founders in Barcelona and in 4 months!
*daily standup
How on Earth?
With open communication, collaborative software, and a trusty framework to guide the process!
In this initial phase I explore the existing app and all of the user information available to me. I do my own secondary research to do a thorough analysis in and out of category.
Internal Audit.
An analysis of the existing app was in order. User feedback suggested that the content was awesome except they had troubles finding out how to get to it. Bottom navigation and top navigation menus were conflicting and confusing. The menu item “Content” was located in both menus, however displayed different elements. Imagery did not directly correlate with the content and existing Aureo users noted this in feedback.
Competitive Analysis.
I identified current competitors and noticed a trend with navigational issues and also lack of good visual content for book covers. Google Books had good use of white space but had random images that didn’t seem to belong there. Apple Books had good category organization however misaligned books. Blinkist was a good reference for navigation but had generic stock imagery. Headway had the best overall heuristics.
User Interviews.
Lucky for me, I had access to a google spreadsheet with user interviews of over 60 people involving feedback for the existing app and feature requests for the the new version. I wrote the feedback out on post it notes to group together in order to discover trends and patterns to gain insights into what Aureo users needed.
In this phase I designated Aureo’s user persona based on the research and user interviews, created a blue print for the site, and mapped out a typical flow of how to get from point A to point B.
Meet Aureo’s Primary Persona!
I kept Aureo’s persona close throughout the entire design process in order to ensure her needs were kept at the forefront and to keep my personal experiences distant.
User Journey/Experience Map.
Juanita’s feedback journey was followed through the best and the worst of times. This helped to uncover pain points and discover new feature opportunities.
Information Architecture.
From user interviews and defining the user I was able to determine the important features for the product, and created a site map that includes the main screens to have a clear structure of content within the app. I was also then able to share this with development so they can begin to plan their work.
Book Selection > Test Taking User Flow.
Considering our Persona’s behaviors and goals, I generated a scenario that she would encounter when using the app. This process ensures that all of the screens needed to help Juanita achieve her goals are accounted for. Developers were able to use this info in order to better understand system responses.
This is where all of the research and data start to take shape! I’ll show you how user feedback and our persona get applied to the user interface
Screen Sketches.
In order to get initial ideas out and test different formats I take to the paper first. This also allows me to quickly communicate ideas to my client and ensure we’re both on the same page (literally).
Low - Hi Fidelity Digital Wireframes.
I began digitizing my sketches and started in the My Library section of the app as I know there are the most screens. I’m testing different bottom nav options and layouts. Books became bigger so Titles could be read on the image rather than listed underneath leaving more space in the UI. Users spoke, and said they needed a place to keep their favorites, downloaded content, and in progress. So we gave it to them!
The Devil is in the Details.
Quick win: Bottom nav iconography changes on tap. Small but significant micro interactions = overall engagement.
What about the book covers?
While beginning the wireframes and design of the app we needed to consider the sizes and how the book covers should look. Although the full version of the books are mainstream, we needed to recreate our own for copyright purposes. As my secondary focus, I created a style guide and direction for the cover art and we vetted an awesome graphic designer to take on the task of designing 200 bespoke covers.
Hi Fidelity Wireframes + Mockup
Exploration of different layouts and flows for settings menu. Setting menu’s can be overwhelming and unclear so we added a search bar to help users find what they are looking for directly. Unfortunately the search bar was to big of an effort for the first release but will make a come back in the future.
Wireframe Prototypes.
After completing the wireframes for most of the My Library section, I created prototypes to present to the development team in order for them to plan their biggest scope of work.
My Library Books > Quiz Flow
Users can access all of their favorited, in progress, completed, or downloaded content to listen or read offline. Aureo users asked for a way to retain all of the information learned, so we introduce a quiz after the full completion of every book. If a user fails, they will only be able to access the quiz again after 24 hours. This is a proven method to help retain knowledge.
Design Systems.
While beginning to add color to wireframes I started building a design system in order to maintain consistency throughout all of Aureo’s current and future digital products. This also saves valuable time when global changes to components need to be adjusted.
Empty States
Empty and error states provide the user with suggestions and routes to complete the task. A little bit of humor and UX copy can ease a users frustrations.
Main Screen Mockups.
Some main screen mockups to show colored and intended end results.
There is a constant transparency and open communication throughout the entire design process, however here is where it is needed the most in order for a seamless product launch.
Annotations.
Side by side comparisons of the original designs and screen shots from the live ios and android app help the developers to identify inconsistencies.
Change Loggs.
Project management software where bugs and changes are uploaded in order to prioritize and organize features.
