Client UX Design
Language E-learning service
Features: Video learning, games, tools
Web, iOS, Android
Features: Video learning, games, tools
Web, iOS, Android
Focus: Onboarding
Use questionnaire
Info interviews
Personas
Revised problem
Feature analysis
2x2 selection
Usability tests
Info interviews
Personas
Revised problem
Feature analysis
2x2 selection
Usability tests
Style guide
1 iteration onboarding
User tests
2 iteration onboarding
Graphics and animations
Responsive css emails
Series graphics for browsing
1 iteration onboarding
User tests
2 iteration onboarding
Graphics and animations
Responsive css emails
Series graphics for browsing
Research:
Design:
Deliverables:
Google Expeditions
Code
Urban Archive
Y 500
Yabla
Procsss:
Affinity (Theme Mapping)
Onbooarding iteration
Revised Problem Statement
Features: Video Player, comprehension, vocabulary, and
dictation games, lessons page.
dictation games, lessons page.
We took the qualitative data from our questionnaire, interviews, and user tests, and
aggregated it as a team in order to find patterns.
In order to address both onboarding and navigation clarity, we decided to supply a
comprehensive faq page with links offered in welcome emails throughout the trial period.
I coded these welcome emails so they are responsive depending on view.
I coded these welcome emails so they are responsive depending on view.
I utilized progressive disclosure on the design by offering a series of dropdowns based on
user questions. I then added relevant copy in conjunction with visual screenshots of each
use case. Similar to a map key.
Users:
Personas developed from
10 informational interviews and
130 questionaire responses across all 6 learning products.
10 informational interviews and
130 questionaire responses across all 6 learning products.
Based on response questionaire, users appreciated the resources but struggled to read or
were intimidated by the density of information.
Based on google analytics, our onboarding email provided an effective way to funnel new
users to our FAQ resources.
So for the next iterations, we focused on making information visually accessible across our entire user demographic.
So for the next iterations, we focused on making information visually accessible across our entire user demographic.
For our second iteration of onboarding process, we kept the introductory resource email, as
well as progressive disclosure of topics based on dropdowns.
Instead of presenting all information at once with a key, I created SVG animations with a single focal point at one time. We created animations across all language translations including English, Spanish, German, French, Italian, Chinese, and Portuguese. Based on user interface preferences visitors will view animations in their language of choice.
Instead of presenting all information at once with a key, I created SVG animations with a single focal point at one time. We created animations across all language translations including English, Spanish, German, French, Italian, Chinese, and Portuguese. Based on user interface preferences visitors will view animations in their language of choice.
Moving forward, we are replacing all static onboarding images with SVG animations in
conjunction with the video tutorials.
We've also released a user dashboard experience. This allows users to set goals, showcase progress, and increase habitual use through gamification.
Finally, in order to improve consistency within the site, I've created a logo redesign, graphics, animations, landing pages, and interface improvements, all drafted in line with Yabla's brand and style guide. I also created marketing graphics for the Google Pkay store and iOS store app.
We've also released a user dashboard experience. This allows users to set goals, showcase progress, and increase habitual use through gamification.
Finally, in order to improve consistency within the site, I've created a logo redesign, graphics, animations, landing pages, and interface improvements, all drafted in line with Yabla's brand and style guide. I also created marketing graphics for the Google Pkay store and iOS store app.
We also provided a video tutorial tab to give first hand walkthroughs of yabla’s tools,
which allow us to sequentially build on information, reducing information overload.
which allow us to sequentially build on information, reducing information overload.
Hampton
Jess
Cori
Guy
Ian
Robert
Jordan
Avg Time
55.17s
61.51s
43.21s
23.75s
4.8s
46.4s
28.2s
Task 1: Try and find a full program based on language level
Task 2: Find content on grammar and download it
Task 3: Find an all ages appropriate cartoon to watch as a family.
Task 4: Find a newly uploaded advanced level music video.
Task 5: Head back to a previous search.
Task 6: Check how many points you’ve earned in learning games.
Task 7: Look at your past use history.
Roundabout
Easy
Incomplete
Yabla is an excellent tool for dedicated learners because it provides authentic content and
exercises that greatly improve aspects of fluency including conversational understanding,
dictation, and vocabulary. Data shows that manu users aren’t watching the videos multiple
times or diving deeper into captions through Scribe. Many binge watch without engaging.
How mught we help instill Yabla language learning as a habit, and meet users with
tools/content that will make them most successful depending on their level of dedication?
Yabla fosters language immersion through engaging video content and learning games. Yabla
offers 6 languages, thousands of videos, over 70 filters to select from.
Enjoyable challenges
Authenticity of content
Flexible timing
Practicality
Proven learning methods
Connecting with others
Progress and goals
Recommendations
Clarity
design
feedback
research
