UI UX DESIGN

IMAGE RECOGNITION FEATURE

MOBILE APP

2023

snap and learn anytime,

anywhere?

snap and learn anytime,

anywhere?

Your pocket teacher, unraveling the world. Explore Lingual's new snap feature! Take a picture, learn in your language.

I’D RATHER WATCH A VIDEO

lingual case study by Varsha Krishnan

I’D RATHER WATCH A VIDEO

lingual case study by Varsha Krishnan

I’D RATHER WATCH A VIDEO

lingual case study by Varsha Krishnan

ABOUT THE PROJECT

Kōfī

Kōbī

Kōgī

Kōlī

Kōnī

Kōfī

Kōbī

Kōgī

Kōlī

Kōnī

Kōfī

Overview

Are you tired of the traditional vocabulary memorization methods? Say hello to efficient, engaging learning like never before with Image Recognition Feature.

Project brief

Designing a feature for efficient vocabulary acquisition in a language learning app to boost conversions, improve user retention, and enhance the learning experience for users.

Why this project?

This project was created as a part of the hackathon. I had 4 weeks to solve a realistic design problem: to transfer 1 innovative feature into existing brand Idea seamlessly yet standing out.

GOALS

Introduce users to the new feature seamlessly

Introduce users to the new feature seamlessly

Introduce users to the new feature seamlessly

Introducing users to a new feature seamlessly involves integrating it into the existing user experience in a way that feels natural and intuitive.

Increase user engagement and satisfaction.

Increase user engagement and satisfaction.

Increase user engagement and satisfaction.

To increase user engagement and satisfaction with the image recognition feature in your language learning app

To increase user engagement and satisfaction with the image recognition feature in the language learning app

To increase user engagement and satisfaction with the image recognition feature in your language learning app

Increase user Conversions

Increase user Conversions

Increase user Conversions

Increasing the number of free users converting to paid subscribers.

Increasing user-generated content (UGC) can greatly enhance engagement and build a sense of community within the language learning app.

Increasing the number of free users converting to paid subscribers.

SHIP A FEATURE TO LANGUAGE LEARNING APP

After some research, I decided to ship a feature for the language learning app since I am most interested in it.

WHITE PAPER RESEARCH

Welcome to the most interesting and favorite part of the project: research. Click here to access the full research on the notion file. Before touching anything related to design, I wanted to dive into the psychology and motivations behind users' actions and existing concepts.

After reading many blogs and articles and researching existing concepts and market problems, I found a most important yet neglected part of language learning Vocabulary acquisition.

UNDERSTANDING THE PROBLEM

The most important stage in my design process seems so simple yet it helps with making the right design decisions. I usually follow a framework called the 'stage of clarifying context', which involves asking clarifying questions to understand the problem better.

HOW MIGHT WE?

BUSINESS

How might we boost the conversions and increase user retention of an language learning app using the feature?

RESEARCH

"How might we seamlessly integrate innovative vocabulary acquisition features into our language learning app to enhance user satisfaction and streamline the learning experience, ensuring efficient and effective vocabulary acquisition?"

COMPETITOR ANALYSIS- UNDERSTANDING THE MARKET

COMPETITOR ANALYSIS-

UNDERSTANDING THE MARKET

To discover trends in current use in the apps in the market and to understand how's the different features are functioning and who uses it and what are other analogs/prototypes of the feature in other apps I decided to analyze competitors apps.

MY PHONE AT THIS POINT!

INSIGHTS

Speech recognition is widely used for practicing conversations, but real-time feedback is lacking.
Users expect more focus on vocabulary acquisition.
Gamified elements and progress tracking are appreciated for motivation.
Users desire comprehensive feedback to assess progress and improve.

Speech recognition is widely used for practicing conversations, but real-time feedback is lacking.
Users expect more focus on vocabulary acquisition.
Gamified elements and progress tracking are appreciated for motivation.
Users desire comprehensive feedback to assess progress and improve.

RECRUITING PARTICIPANTS FOR THE RESEARCH- UNDERSTANDING THE USER

For this project I interviewed 3 kinds of language learners who use the app to collect sufficient data.

New user

Active user

Lapsed user

These are some questions I needed answers to understand what are the expectations and preferences of the users towards the concept .
1. How does the user interact with the similar image recognition concept that they have previously used?
2. What are the other feature that the users keep coming in for?
3. What are the user expectations when it comes to using image recognition concepts and how can we meet those expectations?
4. How can we make image recognition feature fun and engaging?
5. how can we teach users to integrate the concept into their learning routine?
what keeps them motivated in the language learning journey?

I need something that is interactive that will hold me accountable, and motivate me to learn. The app limits the number of words i want to learn .

Joshy , The Active User

INSIGHTS

Most people are considered to be visual learners because the human brain processes visual information more efficiently.
The users wants to learn on their pace.
Interactive learning has made language learner motivated to come back to learn more.

Most people are considered to be visual learners because the human brain processes visual information more efficiently.
The users wants to learn on their pace.
Interactive learning has made language learner motivated to come back to learn more.

My solution should aim to make vocabulary acquisition more efficient, engaging, and personalized for language learners. This not only enhances the learning experience but also improves user retention and satisfaction, ultimately driving the success of the language learning app.

Got more time to read about the research you can view below ( navigates to the notion research file) . It would take you 15 mins to read.

TESTING AND DESIGNING CONCEPTS

I was working on AR Feature since last two weeks But I pivoted towards image recognition concept since I was driven by the aim to offer a more accessible learning path, I swiftly pivoted towards Image Recognition Feature, Since its scalable and technically less complex.

WAIT, WHAT IS IMAGE RECOGNITION ? Image recognition is a technology that allows computers to interpret and understand visual information from images or video.

WHY PIVOT TOWARDS IT?

Scalable

Engaging

Accessible

WAIT, WHAT IS IMAGE RECOGNITION ? Image recognition is a technology that allows computers to interpret and understand visual information from images or video.

WHY PIVOT TOWARDS IT?

Scalable

Engaging

Accessible

WAIT, WHAT IS IMAGE RECOGNITION ?

Image recognition is a technology that allows computers to interpret and understand visual information from images or video.

WHY PIVOT TOWARDS IT?

Scalable

Engaging

Accessible

WAIT, WHAT IS IMAGE RECOGNITION ? Image recognition is a technology that allows computers to interpret and understand visual information from images or video.

WHY PIVOT TOWARDS IT?

Scalable

Engaging

Accessible

USER FLOW

After completing research phase, which included user interviews, white paper research, and competitor analysis, I moved on to the crucial step of brainstorming the user flow and information architecture for your feature.

Since the goal was to introduce users to concept effortlessly, I decided to follow Jakob's Law. Because a lot of the similar concept had identical task flow view

Since the goal was to introduce users to concept effortlessly, I decided to follow Jakob's Law. Because a lot of the similar concept had identical task flow .

WIREFRAMES

Here’s some good looking versions of wireframes,

PROTOTYPE

OK! I lied this is my favourite part after Sketching my Ideas and finding visual inspirations I created the prototype. For Better Experience I created an app called Lingual which then navigates to the feature. You Can view the prototype here.

USABILITY TESTING

After finalizing the design, I conducted usability testing to ensure that our feature was user-friendly and intuitive. I was interested in understanding:

1. How users will perceive this concept ?

2. Will users understand the task flow of the feature?

I went for usability tests to show people our prototype with 5 people who actively learn languages or use similar concepts in their everyday life.

After finalizing the design, I conducted usability testing to ensure that our feature was user-friendly and intuitive. I was interested in understanding:

1. How users will perceive this concept ?

2. Will users understand the task flow of the feature?

I went for usability tests to show people our prototype with 5 people who actively learn languages or use similar concepts in their everyday life.

TASK

You’ve decided you want to try out this feature in the language learning app for vocabulary acquisition so how would navigate the feature?

You’ve decided you want to try out

this feature in the language

learning app for vocabulary

acquisition so how

would navigate the feature?

You’ve decided you want to try out this feature in the language

learning app for vocabulary acquisition so how would navigate

the feature?

TEST FINDINGS

All participants understood that the new feature and the navigation so the mis click rate is low.
3 out of 5 participants were not familiar with the feature, so they struggled to complete tasks.
3 out of 5 participants mentioned that they would like to get more refined feedback.

All participants understood that the new feature and the navigation so the mis click rate is low.
3 out of 5 participants were not familiar with the feature, so they struggled to complete tasks.
3 out of 5 participants mentioned that they would like to get more refined feedback.

All participants understood that
the new feature and the
navigation so the mis click
rate is low.
3 out of 5 participants were
not familiar with the feature,
so they struggled to complete tasks.
3 out of 5 participants mentioned
that they would like to get
more refined feedback.

All participants understood that the new feature and the navigation so

the mis click rate is low.

3 out of 5 participants were not familiar with the feature, so

they struggled to complete tasks.

3 out of 5 participants mentioned that they would like to get

more refined feedback.

ITERATIONS

3 out of 5 participants were not familiar with the feature, so they struggled to complete tasks highlights the importance of providing adequate onboarding and guidance for new feature so I added an onboarding screen a copy to help them understand the feature effectively.

3 out of 5 participants were not familiar with the feature, so they struggled to complete tasks highlights the importance of providing adequate onboarding and guidance for new feature so I added an onboarding screen a copy to help them understand the feature effectively.

9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32
9:41
Welcome to Lingual,
Use your device's camera to scan everyday objects, Receive instant translations and definitions.
16
9:41
9:41
Get started
32
32

3 out of 5 participants mentioned that they would like to get more refined feedback. so I created a separate screen for speech recognition which navigates to a feedback with stars and can be able to hear where they made mistakes.

3 out of 5 participants mentioned that they would like to get more refined feedback. so I created a separate screen for speech recognition which navigates to a feedback with stars and can be able to hear where they made mistakes.

From Vague Feedback

To clear and concise copy

SCREENS, AND WHY ARE THE WAY THEY ARE?

SCREENS, AND WHY ARE THE

WAY THEY ARE?

The usability testing shows that 3 out of 5 participants were not familiar with the feature, so they struggled to complete tasks. This also emphasizes the importance of providing adequate onboarding and guidance for the new feature. Therefore, I added an onboarding screen to help them understand the feature effectively

These set up screens aim to streamline the onboarding process, enhance the overall user experience and ecourages users to dive into their learning journey with enthusiasm.

These set up screens aim to streamline the onboarding process, enhance the overall user experience and encourages users to dive into their learning journey with enthusiasm.

Point your camera at the object you want to recognize. ensure that the users position the camera correctly for optimal image recognition.

Image captured. Analyzing...

informs users that the app has successfully captured the image and is processing it for recognition, keeping them informed about the ongoing process.

Result: Coffee the recognized object.

This screen displays the outcome of the image recognition process, providing users with information about the identified object or image.

Practice Pronunciation: Speak the translated word.

This screen prompts users to practice their pronunciation by speaking the translated word in the language they are learning. It features a microphone icon for speech recognition, enabling users to receive feedback on their pronunciation.

Learn and practice:

This screen presents users with the translated word and a corresponding sentence in the language they are learning, encouraging active learning and memory retention through practice.

Learn and practice:

This screen presents users with the translated word and a corresponding sentence in the language they are learning, encouraging active learning and memory retention through practice.

Unlock Premium Translation to access translations for identified objects in desired languages.

This screen informs users about the premium translation feature, which provides translations for identified objects in the language they are learning and other languages

This screen provides users with feedback on their pronunciation attempt, highlighting areas for improvement and offering guidance on how to enhance their pronunciation skills.

This screen celebrates users' successful pronunciation attempts, providing positive reinforcement and encouragement to continue practicing.

This screen acknowledges users' successful pronunciation of the entire sentence, providing positive feedback and reinforcing their progress in speaking the language fluently.

HOW MIGHT THIS FEATURE MEET THE BUSINESS GOALS

HOW MIGHT THIS FEATURE

MEET THE BUSINESS GOALS

Integrating image recognition into language learning app can benefit in user retention because by providing a more immersive and engaging learning experience, users are more likely to continue using the app.

2. Furthermore ,the feature can be personalized which enhance user engagement by providing content that interest them which makes them come back to learning more related content.

integrating the pronunciation can encourage the user to finish a word or the sentence expanding their vocabulary and further improving their engagement.

Integrating image recognition into language learning app can benefit in user retention because by providing a more immersive and engaging learning experience, users are more likely to continue using the app.
Furthermore ,the feature can be personalized which enhance user engagement by providing content that interest them which makes them come back to learning more related content.
integrating the pronunciation can encourage the user to finish a word or the sentence expanding their vocabulary and further improving their engagement.