Designing
Designing
Designing
for
for
for
immersive
immersive
immersive
language
language
language
learning
learning
learning
UX Research
UX Research
Design
Design
WHAT I DID
WHAT I DID
The whole design cycle!
From user interviews to polishing final designs.
The whole design cycle!
From user interviews to polishing final designs.
TEAM
TEAM
Gage (intern)
Mele (mentor)
Jason (app co-founder)
Stan (app co-founder)
Gage (intern)
Mele (mentor)
Jason (app co-founder)
Stan (app co-founder)
TIMELINE
TIMELINE
July - September 2024
July - September 2024
Our final designs
What is Umi?
What is Umi?
We all know how hard it is to learn a new language, but what if you could combine that with something that you already love to do: watch tv shows and movies? That’s where Umi comes in!
Umi uses real clips from shows and movies to help users learn languages in a fun, engaging, and natural way.
We all know how hard it is to learn a new language, but what if you could combine that with something that you already love to do: watch tv shows and movies? That’s where Umi comes in!
Umi uses real clips from shows and movies to help users learn languages in a fun, engaging, and natural way.
The problem
The problem
The Umi lessons page was cluttered and confusing, which made it difficult for users to learn effectively. They saw an opportunity to redesign the page to be more streamlined, intuitive, and visually engaging.
The Umi lessons page was cluttered and confusing, which made it difficult for users to learn effectively. They saw an opportunity to redesign the page to be more streamlined, intuitive, and visually engaging.
Old Umi lessons screen
How did we tackle this problem?
Turn to real users!
How did we tackle this problem?
Turn to real users!
Our user research involved chatting with language learners outside boba shops and mall food courts to surveying Umi's already established Discord server for real user feedback.
Our user research involved chatting with language learners outside boba shops and mall food courts to surveying Umi's already established Discord server for real user feedback.
We offered snacks in exchange for having a conversation with us
Message we sent to Umi's Discord server
The needs we identified
The needs we identified
Emphasis on video clips
Emphasis on video clips
“I love the video clips, but I feel like they aren’t being used to their fullest potential...”
“I love the video clips, but I feel like they aren’t being used to their fullest potential...”
People found learning through video clips to be very effective, yet the video clips didn’t feel like the main focus on the lessons page, even though that was the unique part of the Umi app.
People found learning through video clips to be very effective, yet the video clips didn’t feel like the main focus on the lessons page, even though that was the unique part of the Umi app.
Familiar layouts
Familiar layouts
Umi fans are loyal to the app.
According to the survey we conducted, 60% of Umi users stay active over 3 months. Why do Umi fans stay? Along with the unique video aspect, we also think that current Umi users value familiarity and once they start, they keep on going.
According to the survey we conducted, 60% of Umi users stay active over 3 months. Why do Umi fans stay? Along with the unique video aspect, we also think that current Umi users value familiarity and once they start, they keep on going.
Our design solutions
Our design solutions
Clip overlay
Clip overlay
We thought that Umi should follow after popular streaming apps such as Youtube and Netflix, that entirely focus on their video content.
So, we made a couple changes and additions:
Added additional video controls to the video player overlay
Made the video clip borderless to give the user an immersive experience
Moved the captions onto the video
We thought that Umi should follow after popular streaming apps such as Youtube and Netflix, that entirely focus on their video content.
So, we made a couple changes and additions:
Added additional video controls to the video player overlay
Made the video clip borderless to give the user an immersive experience
Moved the captions onto the video
Previous video overlay
New and improved video overlay
Word list
Word list
Although we played with many iterations such as flashcards and sentence breakdowns, we decided to kept the word list similar to its original layout, with minor visual tweaks to make it more streamlined and less confusing for users.
Innovative solutions can be exciting and new, but sometimes the user-familiar layout is the way to go.
Although we played with many iterations such as flashcards and sentence breakdowns, we decided to kept the word list similar to its original layout, with minor visual tweaks to make it more streamlined and less confusing for users.
Innovative solutions can be exciting and new, but sometimes the user-familiar layout is the way to go.
Previous word list
New and improved word list
sharing with the community
sharing with the community
Through our internship with Pi'ikū, Gage and I presented our findings and designs at the first ever Honolulu Tech Week in October 2024. With over 100 people in attendance, we were proud to showcase what we had been working on for the past 8 weeks.
Through our internship with Pi'ikū, Gage and I presented our findings and designs at the first ever Honolulu Tech Week in October 2024. With over 100 people in attendance, we were proud to showcase what we had been working on for the past 8 weeks.
Presenting at Honolulu Tech Week 2024
Piʻikū cohort 3!
what was shipped
what was shipped
What made this experience so impactful was that our designs were actually shipped into the app. Although they weren’t pixel perfect to our Figma mockups, we were extremely proud to see our ideas in the hands of actual users.
What made this experience so impactful was that our designs were actually shipped into the app. Although they weren’t pixel perfect to our Figma mockups, we were extremely proud to see our ideas in the hands of actual users.
Our designs in the real world!
Our designs in the real world!
Wanna hear more?
Wanna hear more?
This case study just barely cracks the surface of our entire process, so feel free to reach out to hear more!
This case study just barely cracks the surface of our entire process, so feel free to reach out to hear more!
let's chat!