Project: End-to-End App Design
Role: UX Designer | UX Researcher
Time: 100 hours
Utterly is a mobile-assisted language learning (MALL) app that incorporates a variety of learning opportunities to accommodate users with different learning styles. Utterly contains the best of all the current MALL apps available and offers tools for users to learn a new language with basic grammar lessons, immersive videos, podcasts, speaking, writing, community, and one-on-one tutorials. Utterly is your key to the door of another culture.
How do you learn to paint if you are stuck at home during the Pandemic, live in rural America, or just want to learn in the comfort of your own home?
Discover
In a world where there are 6,500 distinct languages, cross-cultural communication requires language acquisition (1). People all over the world are interested in learning new languages for a variety of reasons: improve memory and cognitive function; understand other cultures; make new friends; facilitate travel abroad; and increase employment options (2). There are a number of mobile assisted language learning (MALL) apps and programs out there to help people with this endeavor outside of a formal academic education in a language due to the demand for language acquisition opportunities. In February 2022, the top MALL apps generated approximately 27 million U.S. dollars in in-app purchase revenues from users worldwide, with market leader being Duolingo and accounting for half of the total, with 13.38 million U.S. dollars (3). I decided to see what was out there in existing apps, and how they could be improved upon. As someone who has a passion for learning languages and has some speaking ability in three languages other than English, this would be a project that would be near and dear to my heart.
References
(1) Anderson, Stephen R., 'How many languages are there in the world?', Languages: A Very Short Introduction, Very Short Introductions (Oxford, 2012; online edn, Oxford Academic, 24 Sept. 2013), https://doi.org/10.1093/actrade/9780199590599.003.0002.
(2) Jordan, Erik-John. “Survey: Top Reasons Why People Learn A New Language.” Babbel Magazine. 6 February, 2016. https://www.babbel.com/en/magazine/why-learn-languages.
(3) Statista. “Language learning apps - Statistics & Facts.” https://www.statista.com/topics/8425/language-learning-apps/#topicOverview.
Problem
Language learning apps can be good for learning vocabulary, practicing grammar, and learning asynchronously in one’s spare time. They may not, however, provide enough feedback or explanation, and they don't allow you to interact with native speakers.
Some of the consistent issues with current language learnings apps include:
Lack of feedback: Apps may not provide enough feedback or explain why an answer is wrong or allow a question to be asked
Limited functionality: Apps can have limited functionality
Lack of personalization: Apps may follow a "one size fits all" approach
Overemphasis on memorization: Simplified apps may turn language learning into rote repetition
Iffy translations: Apps may provide translations that are inane or incorrect
Lack of training: Apps may not provide training in specific areas, such as writing, grammar, or conversation
No interaction with native speakers
No reading or writing practice
Competitive Analysis
Competitors
Duolingo
Babbel
Busuu
iTalki
Major Themes
Gamification
Self-paced
Free & paid options
Interactive lessons
Minimalist and user-friendly design
Affinity Map
Affinity Mapping Trends
Key Findings
Research
Research Goal
Gain a comprehensive understanding of user preferences, behaviors, and pain points when learning a new language.
Research Objectives
Discover user motivations in learning a new language via a MALL app
Discover what users want and search for when choosing a MALL app
Determine preferences and pain points in using a MALL app
Determine how users want to interact with a MALL app
Research Questions
What motivates people to learn a new language?
How much time are people willing to devote to learning a new skill?
What are the primary struggles people have when learning a new language?
What keeps people engaged in the learning process?
Research Methodologies
Competitive Analysis
User Interviews
Analyze
POV
I’d like to explore ways to help people who want to learn a new language access a mobile assisted learning app that keeps them motivated and provides the depth they are missing in current offerings.
User Interviews
Demographics
5 particpants
Age Range: 18 - 50 years
Gender: 1 male, 3 females, 1 non-binary
All were friends and family
Background
All participants had some in-person classroom experience.
All participants had varying experience with mobile-assisted language learning
2 participants have only studied one language. 3 participants have studied more than one language. 1 participant considers language acquisition a hobby.
Persona
I developed a persona based on the interview data and the trends apparent from the affinity map.
How Might We…
How might we develop an app that provides culturally relevant content in a way that keeps lessons short and interesting while offering the opportunity to learn grammar, feel immersed in the content, and provide additional learning opportunities for speaking, writing, and review sessions as desired?
Project Goals
I then used a Venn diagram to display the project goals in a succint and visual way, considering user goals, business goals, and technical constraints.
Design
Information Architecture
Sitemap
Considering the layout of some of the competitor apps, I created cards and asked my users to sort them into categories. I took the results and created a birds-eye view of the app’s information architecture.
User Flow
Keeping the persona in mind, I developed a user flow to trace the movement of a user through the sitemap to complete a single lesson. translating her needs and goals into steps for the flow. After creating the user flow, I realized that the added feature, despite the fact that it adds significant value to the user, is a simple addition to add.
Low Fidelity Wireframes
Taking the persona’s goals and user flow into account, I created the first set of wireframes to test with my users.
Low Fidelity Usability Testing
I took the wireframes back to my original test group of athletes with the following goals:
To test the ease of use of the UI
To test initial UX with users
To obtain open-ended feedback from users
Summary of Findings
All users successfully completed the lesson.
An option to skip the podcast should be offered.
The podcast may be better at the end as an optional activity with no quiz
Video in the beginning should be more descriptive, as it’s supposed to be a cultural short video including some of the grammar concepts about to be introduced in the lesson.
Include lengths of both the podcast and videos
Remove the play again button
Have the title of the grammar lesson move to the top of the screen once the lesson starts.
Branding
Core Values
Educational
Inclusive
Exciting
Fun
Focus
Minimalistic and simple design
Clean and light with pops of color
Colors conveying brand values with a focus on exciting and fun
A simple logo and typography that conveys a fun, educational environment for adults
Initial High Fidelity Wireframes & Prototype
Minimalist with pops of bright color
Highly interactive with exit points to skip sections
Included videos and review sections as requested from user interviews
High Fidelity Usability Testing
I took the wireframes back to my original test group with the following research goals:
Determine if the user can easily move through the mobile wireframes.
Determine if the user can successfully complete two tasks in the mobile wireframes.
Collect qualitative feedback on functionality, layout, and overall user experience.
Establish any pain points.
Methodology
Participants were asked to complete the following tasks:
Finish a lesson by completing every learning opportunity that is available.
Finish the lesson as quickly as possible skipping sections where it is an option.
Metrics
Task completion rate
Number of errors
Qualitative feedback from participants about their experience
Detailed Summary of Findings
Metrics
Task completion rate - 100%
Number of errors - 0
Qualitative feedback:
Overall users found the app intuitive and easy to use
Users appreciated the option for more review.
Users appreciated the option to skip optional material.
Every users was able to infer the purpose of the icons in the footer, even though they aren’t built out in the prototype
Some Suggested a dark mode option
One user suggested the option to customize color scheme for each language being learned
Next Steps
Perform a color study to discover the best readability and theme consistency.
Complete iterations on the prototype
Finalize the UI kit
I am choosing not to add color customization for each language being learned, since only one user suggested it, but will consider it as a future iteration
Color Examination
Purpose
Discover improved readability
Reduce visual overload
Tie theme together
I experimented with a four different color schemes using my color palette and determined that the blue kept the design tight with the theme and allowed for the lighter cards that increased readability. I also enlarged the fonts and differentiated the hierarchy more for readability and consistency.
Iterations
Iteration 1
What
Combine everything into a card with more rounded edges
Increase size of font
Added a missing skip option
Why
Better readability
Standardize the design
Create more options for users
Iteration 2
What
Updated the buttons in the quiz cards to be consistent with other buttons
Why
Quiz buttons are still buttons and should be consistent throughout the design
Iteration 3
What
Toned down the red to be less aggressiv
Why
The original red was too bright and overwhelming
Final Prototype & Concluding Thoughts
The final prototype reflects the changes documented above. The iteration process in this project was challenging, yet illuminated a marked growth in my overall skill as a designer. My first iteration was to go more minimalistic as I have seen in most other MALL apps, but my mentor guided me to explore a variety of colors to tie the theme in with the readability I was looking for, after some of my users reported they would prefer a dark mode. I was unhappy with that first iteration, but all of that changed once I made the color changes in the final iteration. This is a project I am proud to call my own.
My biggest takeaway from this project was the power of color and font to create a readable, accessible, and beautifully functional design. As before, the research was revealing and the second most enjoyable part of this project. Both of those things together have taught me the essence of what it means to be a UX designer.
UI Kit
