Idiom
Idiom is a context-based language learning app that helps with the acquisition of vocabulary
WHEN
September - October 2021
DELIVERABLES
ux research
persona development
wireframe
high-fidelity design
Idiom is a context-based language learning app that helps users build vocabulary through language immersion in news and other content sites they naturally visit. The app allows users to easily look up and save challenging words that they want to remember.
Challenges
We wanted to increase user retention for both new and existing users by addressing the following problems:
1. For new users - better introduce all of the functionality the app provides
-
New users have difficulty discovering different features, resulting in very shallow user journeys
-
Lack of empty states is a source of user confusion and churn
2. For existing users - introduce new functionality related to vocabulary review combined with strategic reminders
-
User journeys generally limited to passive vocabulary acquisition through content consumption, without active active language learning
-
The app was solely reliant on intrinsic motivation and did not employ external reminders
Process
Conducted user research with 8 users to identify a clear user persona on which to focus. After validating this persona with the client and others users, user flows were mapped out to understand the highest leverage points for new functionality, redesigned empty states, and reminders. With these learnings as inputs, a prototype was created
Solution
A redesign of the onboarding flow and tutorials, and new designs for the Highlights tab, incorporating insights from user interviews
PROTOTYPE
THE PROCESS
USER INTERVIEWS
I engaged with 8 users of the app, conducting 3 interviews with power users, and usability tests with 5 new users. The insights gleaned here reinforced the key points of user drop off I had previously discovered from an analysis of user activity. On top that, 4 key learnings were identified.
LEARNING #1
Lack of communication of the app's value and benefits
If a user did not open the app immediately after install, they would not be able to remember exactly what the app did. By jumping directly into onboarding, the app was not helpful in elucidating its purpose, leading to churn.
LEARNING #2
New users couldn't discover additional features
Blank screens displaying empty states left users confused about appropriate next steps to take. Navigation that was at times cluttered prevent feature discovery and confident app usage. Ambiguous icons and copy led to further confusion.
LEARNING #3
The Highlights feature lacked compelling value
The current design consists of a log of words looked up, and did not have any interactive components. While power users wanted more elaborate features like spaced repetition software (SRS) or flashcards deck builders to actively increase their vocabulary, most casual learners preferred low-effort actions to review words they had looked up.
LEARNING #4
Users could use help reminding them to keep learning
Most users expressed they wanted to be better at their target language. However, most were not used to consuming content in that language on a consistent basis. Of those that did, they mostly used their phone's default dictionary to look up words. More than 70% of installs do make it through the initial tutorial, but with a low return rate of only 20%, users might need gentle reminders to serve as external motivators in a bid to form a habit.
USER PERSONA
Although both the client and I have familiarity in the language learning space, we brought different understandings of user profiles. Building the following personas based on user behavior and interviews was very beneficial to clarify precisely the user needs to target.
USER JOURNEY
Mapping the user journey and overlaying the biggest drop offs helped identity the biggest leverage points for action triggers. These triggers were meant to help users continue their user journey and get deeper value from the app. The new features have been added below in yellow.
THE DESIGN
WELCOME SCREEN
Challenge: During user interviews, users who don't immediately open the app post installation forget exactly what the app does and how it is useful.
Solution: A skippable welcome screen that explains the key features of the product both serves as a good reminder as well as an opportunity to create an additional sense of excitement before embarking on the user journey.
Future considerations: As the welcome screen is they key place to get users excited about the app can help them accomplish, we want to further explore the usage of additional graphics and animations.
INTERACTIVE ONBOARDING
Challenge: The original interactive onboarding had high engagement rates, but did not introduce users to multiple compelling features - such as the audio reader or how to follow a content channel - that would be very useful to surface.
Solution: Using progressive disclosure to extend the interactive tutorial, users can learn the value of each feature one step at a time. Different in-app user actions triggered the start of the next step of the onboarding tutorial. For example, opening the first news article, or looking up any word for the first time, both triggered different steps of the tutorial.
First article open
First word lookup
EMPTY STATES DESIGN
Challenge: A large point of confusion for users were the blank screens as a result of missing empty states in custom feeds when they had not yet followed any channels.
Solution: The custom feed's empty state now includes a button that directs users to discover popular channels. In this case, we repurposed the existing 'search' page by including a list of trending channels and marking the 'Follow' button more explicitly.
Future considerations: Channel recommendation is a complex topic that warrants further exploration. The current solution of trending channels is not personalized and may not be the best fit for each user, but serves as a good MVP. Future work can include information about the user's level of language knowledge (e.g. "Good for beginners") or topics of interest.
HIGHLIGHTS - REIMAGINED
Challenge: The current Highlights tab displays an information dense list of previously highlighted words. Lacking in interactive components, this page had very low engagement and retention, especially for what is one of the marquee features of the product.
Solution: {First part} Moving from <sentence view> to <definition view>
Since users are looking up words in the target language they are learning, entire sentences presents an overload of information. The new design evokes the familiar interface of a vocabulary notebook, displaying highlighted words and their definitions. Since language is tricky and words have multiple denotations, users can also edit the definition to help them better memorize the word.
Sentence view (old)
Definition view (new)
HIGHLIGHTS - REIMAGINED
Challenge: Reviews currently present in the Highlights page did not satisfy either new or power users. The quiz like format required a high level of engagement, which drove away new users looking for casual review mechanisms, while also being of low value for power users interested specifically in SRS techniques for language learning.
Solution: {Second part} Automatic flashcards as low-activation review option
Instead of developing a high-effort feature like SRS - the adoption of which is unknown until further testing can be made - we decided to focus on the introduction of flashcards that users review with minimal effort. To encourage usage and vocabulary retainment, the previous day's highlighted words are automatically prompted for review when the user opens the Highlights tab for the first time each day.
NOTIFICATIONS - REIMAGINED
Challenge: The app did not utilize any push notification mechanisms to remind users to come back.
Solution: Targeted notifications with a specific value proposition
To build trust with our users, we hold off on asking for the permission to send notifications until we have a compelling reason for users that are performing reviews. Specifically, they will only get this request at the end of the first flashcard review. The notification subsequently directs users to review their last 10 highlighted words.
This represents a small subset of potential notifications, but we have elected to tread very lightly here, starting from the philosophy of 'why send this notification', rather than 'why not'.
NEXT STEPS
This design presents a large step forward for the usability and value proposition of the app. As the design is rolled out, validation is being performed to confirm increases in desired metrics.
To move forward with the next version of this app, there are a few different aspects that can be worked on.
From the product side:
-
User interactions rewarding the taking of desired actions (e.g. completing a review leading to confetti)
-
Further developing flashcard & review features to be customizable
-
Testing different triggers to send notifications (e.g. content recommendation, scheduled reminders)
-
Designing page to track progress & feel good about it
On the business side:
-
Re-thinking through which features to include in the premium plan and communicating its benefits in a more effective way
-
Designing refer program to encourage more organic growth
KEY TAKEAWAYS
1. Communication, communication, communication..
From small elements - such as confusing icons or copy - to large missing steps in user flows - such as welcome screens or empty states - the core challenge involved clearly and consistently communicating the value proposition of the app to users.
2. Creating emotion through visual design
The visuals of the welcome screen have a strong capability to foster emotion within users. I found mood-boards and hand-drawn sketches to be a very powerful tool for helping create these emotions.
3. Timing as part of experience design
Thinking through the narrative and temporal flows and incrementally introducing information at the right time in the journey has a large impact on app's experience.
4. Working with engineering constraints
As the client has a very small development team, the design was stripped down and pulled apart into incremental steps that allow for individual testing and iteration. It will take time, but I'm very excited to see how Idiom will mature into a beautiful learning experience.