top of page

Impact of design

iPhone 13 mockups-Recovered copy.png
apple-app-store-logo.jpeg
Google_Play_Store_badge_EN.svg.png
Italki-logo-2023.png
WX20230719-113142_2x.png

italki

Italki is one of the world's largest online language learning communities with more than 5M users, and 10,000+ teachers from over 200 countries teaching over 150 languages worldwide. The core feature is that students can customize private 1-on-1 lessons based on their goals and interests and pay for the lesson when they need it.

My role

UX/UI designer

Skill used

User Research, Competitive analysis, User journey map, A/B testing, Prototype, UI design

Team structure
Italki-logo-2023.png

Product manager   x1           Front-end Developers   x2

Back-end Engineer   x1        QA   x1  

Time frame

Two months

Context

Overview

Italki had 2M active users in 2021 in the community, but there are only 150K paying users in the community.

Problem

The conversion rate for new users in 2021 was only 7.5%. As a business goal they were looking to improve this number for 2022.

Solution

From users' feedback and testing, it is hard for users to find a suitable teacher. The current stage's goal is to create a better first-time user-experience so that users will be more encouraged to pay for first-lesson.

Understanding the context
WX20230715-184513_2x.png
undraw_questions_re_1fy7-01.png

"How to convert the business requirement to design problem?"

Design
Challenge

How might we encourage first-time users to make a purchase.?

Research
Understanding the current users

We held a online survey and interviewed active users to better understand their user needs.

WX20230715-184548_2x.png
Insights from interviews

We found two major groups of users whos behavior was to be active but not make a purchase. Learning from them helped us guide our design.

Group A - Active one day

WX20230715-184608_2x.png

Group B - Active everyday

WX20230715-184654_2x.png
Painpoints and Opportunities
WX20230717-004237_2x.png
Taskflow
Slide 16_9 - 1.png
Understanding the process of purchasing a lesson
Defining the scope

In the time we had, we narrowed down our work to focus on the journey of finding a suitable teacher.

By working on this section of finding a teacher we can better drive conversion by making teachers easier to find.

Slide 16_9 - 2.png
Finding a teacher experience

The predesigned task flow of finding a suitable teacher.

WX20230715-184724_2x.png
1
2
3
4
Juicy part
Design Exploration
Design & Testing
1
Frame 379.png
A
B
C

Before

Homepage
Problem
A. Promotion banner
  • The promotion card is not eye-catching

  • Too much white space in the card layout

  • ​No visual hierarchy

B. Card of teacher collection
  • Superfluous information

  • Too much white space in card layout

C. Teacher card
  • Swipe interaction limits the displayed amounts  

       (5 teachers will be displayed on the homepage)

  • Lack of visual and information hierarchy

  • Low contrast

Solution
A. Promotion banner
  • Visually eye-catching promotion banner drive conversion of new users

  • Reduce banner size and save more space

B. Card of teacher collection
  • Discard superfluous information

  • Reduce card size to save more space

C. Teacher card
  • Re-layout the teacher's card

  • Increase information-carrying capacity

  • Masonry interaction to show more teachers

主页component第一版.png
A
B
C
Evaluation
Frame 380.png
About the teacher's card
User testing of the prototype

We were able to improve the component from user feedback
and I was able to create the final design.

After

Version B

Frame 381.png
homepage card.png

Version A

crown.png
  • Discard the self-intro video on the homepage

  • Highlight the language the teacher teach

  • Highlight the CTA of Book Trial

  • ​Summarize the teacher's experience

New H1.gif
2
Teacher's list
WX20230717-123252_2x.png
Original design
crown.png
Before and After
WX20230717-130931_2x.png
User testing feedback
Before
Teacher's list.png
apple-iphone13promax-silver-portrait.png
After
teacher list 1.png
apple-iphone13promax-silver-portrait.png
3
Filter page
After
Before
WX20230717-160531_2x.png
User testing feedback
Filter.png
filter.gif
WX20230719-230023_2x.png
WX20230719-230043_2x.png
4
Teacher's detail page

Overall optimization

Frame 383.png

Optimization of each module (Swipe to see full details)

Impact
Impact & Next step
Performance and impact
WX20230717-233702_2x.png
WX20230719-113142_2x.png
Frame 386.png
Customer funnel

Reflection

Always keep the user’s needs as the center of the design

Balance business visions and design solutions

Keep close collaboration & communication with stakeholders

Next step

Next step

Optimize the workflow of payment

Generalize the teachers’ video format 

Change the promotion banner based on different activities

Add navigation on the detail page

Other projects

iPhone 13 Pro Max - 1.png
Untitled-1-05.png
bottom of page