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.
Your pocket teacher, unraveling the world. Explore Lingual's new snap feature! Take a picture, learn in your language.
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
I’D RATHER WATCH A VIDEO
I’D RATHER WATCH A VIDEO
01
ABOUT THE PROJECT
Kōfī
Kōbī
Kōgī
Kōlī
Kōnī
Kōfī
Kōfī
Kōbī
Kōgī
Kōlī
Kōnī
Kōfī
Overview
Overview
Are you tired of the traditional vocabulary memorization methods? Say hello to efficient, engaging learning like never before with Image Recognition Feature.
Are you tired of the traditional vocabulary memorization methods? Say hello to efficient, engaging learning like never before with Image Recognition Feature.
Project brief
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.
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?
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.
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.
02
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.
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.
03
SHIP A FEATURE TO LANGUAGE LEARNING APP
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.
04
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.
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.
05
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.
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.
06
HOW MIGHT WE?
BUSINESS
BUSINESS
BUSINESS
How might we boost the conversions and increase user retention of an language learning app using the feature?
How might we boost the conversions and increase user retention of an language learning app using the feature?
How might we boost the conversions and increase user retention of an language learning app using the feature?
How might we boost the conversions and increase user retention of an language learning app using the feature?
RESEARCH
RESEARCH
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?"
"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?"
"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?"
"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.
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!
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?
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 .
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 .
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.
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.
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.
07
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
08
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
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 .
09
WIREFRAMES
Here’s some good looking versions of wireframes,
Here’s some good looking versions of wireframes,
10
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.
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.
11
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
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
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.
12
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
13
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
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...