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
1st iteration onboarding
User tests
2nd iteration onboarding
Graphics and animations
Responsive css emails
Series graphics for browsing
1st iteration onboarding
User tests
2nd iteration onboarding
Graphics and animations
Responsive css emails
Series graphics for browsing
Research:
Design:
Deliverables:
Google Expeditions
Code
Urban Archive
Y 500
Yabla
Process:
Affinity (Theme Mapping)
Onboarding Iteration
Revised Problem Statement
Features: Video player, comprehension, vocabulary, and
dictation games, lessons page.
dictation games, lessons page.
We took the data from our questionnaire, interviews, and user tests, and aggregated it 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.
I coded these welcome emails so they are responsive.
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
465 questionaire responses across 6 learning products.
10 informational interviews and
465 questionaire responses across 6 learning products.
Based on our response questionaire, users appreciated the extra resources but were overwhelmed by the density of information.
Based on google analytics, our onboarding email provided an effective way to funnel new users to our FAQ resources.
For the next iterations, we focused on making information visually accessible across our entire user demographic.
For the next iterations, we focused on making information visually accessible across our entire user demographic.
For our second iteration of the onboarding process, we included an introductory resource email and utilized progressive disclosure, by breaking content up under a series of dropdowns.
Instead of presenting all information at once with a key, I created SVG animations that presented information sequentially. We created animations across all language translations including English,Spanish, German, French, Italian, Chinese, and Portuguese. Based on interface settings, visitors view animations in their language of choice.
Instead of presenting all information at once with a key, I created SVG animations that presented information sequentially. We created animations across all language translations including English,Spanish, German, French, Italian, Chinese, and Portuguese. Based on interface settings, visitors 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, measure progress, and follow new initiatives.
Finally, in order to improve consistency within the site, I've drafted logo improvements, graphics, animations, landing pages, and interface updates. All material is crafted in line with Yabla's brand guidelines. I've also drafted marketing graphics for the Google Play store and iOS store app.
We've also released a user dashboard experience. This allows users to set goals, measure progress, and follow new initiatives.
Finally, in order to improve consistency within the site, I've drafted logo improvements, graphics, animations, landing pages, and interface updates. All material is crafted in line with Yabla's brand guidelines. I've also drafted marketing graphics for the Google Play store and iOS store app.
We also provided a video tutorial tab in order to walkthrough Yabla’s tools.
This allows us to build on information.
This allows us to build on information.
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 fluency. It strengthens conversational understanding, dictation, and vocabulary. Data shows that many users aren’t revisiting videos or diving deeper into captions through the Scribe activity. A large portion of users binge watch content without these helpful tools.
How might we instill Yabla language learning as a habit, and adapt our tools and content, to make users successful regardless of their level of dedication?
Yabla fosters language immersion through engaging video content and learning games. Yabla offers 6 languages and thousands of videos.
Enjoyable challenges
Authenticity of content
Flexible timing
Practicality
Proven learning methods
Connecting with others
Progress and goals
Recommendations
Clarity
design
feedback
research
