EX-IQ Note - App & Alexa Skill
Working with: Matchbox Mobile, & EX-IQ
Key contributions: Initial Research, UX review, assessing the content, product strategy, user research, wireframes, design system, UI, Lottie animations, snagging and refinement.
EX-IQ Note is one of those ‘how has no one thought of this before’ concepts. Their voice-first range of products revolutionizes how people learn by using AI to turn any book, report, or article into an interactive audiobook. Aimed at professionals and students, the EX-IQ apps and Alexa Skill allow users to highlight areas of text and add notes using their voice. Increasing productivity by bringing learning to new environments, such as in the car.
EX-IQ brought Matchbox Mobile onboard to update their existing voice-first mobile apps to give them a new look and improve their usability while also creating a companion experience on Alexa. This case study will focus on the mobile app; for more information on the Alexa Skill, visit Matchbox Mobiles website here.
Research & Insights
This project started with a full review of the existing app, providing us with the following insights:
Upon launching the app, it’s not immediately clear what you can do. Especially if the college or employer has not yet added content.
Audio playback and highlighting are the hero features, but their current design lacks intuitiveness.
The books are not provided with cover images and are hidden behind layers of folders, making it difficult to find specific content.
There are some accessibility issues, such as low contrast & no support for dynamic resizing of text.
Goals
Based on these insights, we set the following goals:
-
Improve the onboarding of users so they can use the app more efficiently.
-
Streamline the content selection process to reduce cognitive load on the user.
-
Rework the audio playback UX/UI to be more intuitive for both touch & voice users.
-
Expand on the functionality of the highlight feature, thinking about how people will use the app in real-world scenarios.
These goals were used as our primary focus when putting together the initial creative strategy, which communicated our vision and outlined how we aimed to bring it to life.
Personas & Storyboards
Using the personas as inspiration, we drew up storyboards for key actions, including highlighting and adding notes.
Wireframes
Design System
To maintain consistency, aid efficient development, and ensure a seamless client handover, we created a modular design system. Reusable components were made for key elements such as buttons, tiles/cards, and list items, ensuring every state from loading through to disabled was covered. Each element was designed per PRH brand guidelines, ensuring they met the platform and accessibility requirements.
Outcomes
Increase intuitiveness
We put a lot of effort into redesigning the playback screen. Focusing on the fact that many users will be multitasking while using the app and unable to work through multiple steps, instead opting to highlight and return to add notes later.
The first step was to simplify the interaction model. After adding a highlight in the original app, playback paused, and users were taken to the note screen; if the user didn’t want to add a note, they would have to dismiss this screen to navigate back to playback manually. In the new interaction model, playback would resume while a temporary snack bar appeared with a CTA to add a note. Allowing users to add a highlight and return to playback all in a single interaction while not removing the option to add a note.
The design of the playback screen was updated to remove the unnecessary mic button and create a simplified look with clear CTA’s that was intuitive for both touch and voice users.
Streamline
The original app was strongly focused on study organization & progress, with book discovery and highlights being hidden away on 2nd and 3rd layer, making them somewhat difficult to find. By restructuring the content into; progress overview, books, highlights, and search, users can quickly find the content they need without having to work through multiple app layers.
Onboard
Adding thorough onboarding to the app takes the training weight off of senior staff and academics. Therefore, we added onboarding in two key places; initial setup and at the start of playback. With both onboarding, flows available again, at any time, in the app settings. These onboarding flows covered all the key use cases, using Lottie animations to guide users through the required interactions.
Add Functionality
Research led us to add functionality to the highlight feature. Acknowledging how users are likely to work in real-world scenarios and ensuring that the UX supports this. These new features included; Allowing the user to select multiple tags for a single highlight, allowing users to edit or delete a highlight after it’s been saved, and adding a link back to the highlight so the audio can be re-reviewed.
