Adding a Feature to a Language App

3 Mobile Concept Mockup Screens for a Language App called Drops

OVERVIEW

DROPS is the fastest growing language app in the world specializing in vocabulary building. They take pride in their beautifully designed word games to make language learning fun and easy. In this conceptual case, they would like to focus on improving user engagement and retention by implementing a new feature or two and needs help defining the best way moving forward.

DELIVERABLE GOALS

• A new feature that embeds within Drops' iOS platform
• Any additional & complementary features

ROLE & TERM

UX/UI Designer
80 Hours

TOOLS

Figma, Invision

Empathize

-ing with our users

RESEARCH GOALS

• Get insights to consumer's experience using (a) language app(s).
• Identify pain points of language learning in general and language learning apps.
• Discover user motivations to using language learning apps.
• Identify all factors that impact user retention and other opportunities.

RESEARCH RESEARCH RESEARCH

To get an better understanding of what I was building, I began by looking into the industry and competition.

Based on desk research, I've identified some provisional personas to get a better understanding of the end user's mindset and having their possible goals in mind, 6 user interviews were held to look for opportunities to tackle existing pain pain points within the app.

Define

-ing opportunities for improvement

Meet Sara! She’s our user persona - the amalgam of our user interview participants. Referring back to my persona during the design process helps me to stay aligned with the user goals and remind me of the problems I need to solve.

Here, I can further understand Sara's point of view through our user journey map. From the flow, I explored opportunities to improve the learning experience and help us define features that will help us bring Sara closer to her goal.

Ideate

-ing the features

From the user journey map, How Might we Questions were created based on Sara's point of view and sat down with 2 designers and a developer to brainstorm solutions to these questions:

How might we help Sara...
• feel that she is making progress during the learning sessions?
• feel that her language learning experience is more personal, have a sense of structure and overall more enjoyable?
• reinforce her learning to help get closer to her goal of one dat speaking the second language?

During the brainstorming session, we've come to a vote to the following features:
• Test out
• Podcast
• Option to remove timer
• Short Stories

With the help of our developer, we've identified the effort level of each feature. For this first MVP, we've decided to implement the test out and podcast features.

Next, I created some sketches to create my lo-fi wireframes before digitizing them.

Design

-ing the features

As a designer, I stuck to the brand style as closely as possible to the Hi-Fi wireframes and created a UI kit for the additional features:

I utilized the screenshots of other screens for reference in order to seamless add the new features.

You can check out the hi-fi prototype here.

Test

-ing the design

To test these the features, I conducted usability testing on the hi-fi prototype over recorded zoom sessions. I have recruited 4 drops users between the ages 20-30. I have prepared three scenarios for the participants to complete specific tasks. They were instructed to share their screen and “think out loud” as they navigated through the prototype.

TEST OBJECTIVES

• Test the overall quality and ease of use regarding the navigation and flow to complete a task.
• Test how easily the user can understand how the features work.
• Identify areas of frustrations, hesitation or confusion (pain points).
• Observe how the users feel about the new features and if they seamlessly integrate with the existing app.

TEST GOALS

95% completion rate
75% error free

TEST FINDINGS

83% of tasks were completed by the users

Usability test responses and observations were sorted out on an affinity map shown below. Out results show that most participants had a hard time testing out because the feature was hidden in a place that users would not normally look or press (behind the information icon). Another pain point was that users wanted to know how long the podcast is due to no indication of time on the podcast screen.

See full affinity map here.

The Challenge

It was insightful to learn that most people do not use the (i) icon for any reason unless they would like to find more information on it or need help. Adding a test out feature without overcrowding the minimal look of Drops was difficult because from what we've learn from the usability test, what is "out of sight is out of mind." After spending some time further studying the app's structure and looking at design patterns online for inspiration, we came to a conclusion that keeping it simple and visible was the best approach. The test out button is now obviously placed in the topic home screen.

Next Steps

Based on the feedback from the testing, I’ve created a prioritization matrix to define the key changes to implement for the next design iteration. With each new design iteration, I would continue to re-test until the product creates a good experience.

Final Thoughts

• What I enjoyed 😁
  - How Might We Group Brainstorming Session!

• My favorite moments 😊
  - Creating cute emotion smileys for the user journey map
  - Creating an additional item in the bottom nav bar

• My least favorite moment 😭
  - Having to document the recorded zoom session into a word document because it felt mundane and time consuming...
but it was worth it!

• Room for Improvement 🤔
  - Get feedback on deliverables I'm not familiar with as soon as possible such as the user journey map.

Go to the next case study: Designing a Mobile App

Let's Connect!