italki

Find the perfect teacher for your language lessons on this new iOs app

internship
italki Main screens

Year

2017

Duration

2 months

Team

Product Manager

UI Designer

The context

italki is a platform allowing users to take one-to-one lessons with language teachers. During the time of my internship, the compagny decided to launch a new app concept, targeting new users and focusing on essential features.

We had two months to design a new iOs app from scratch.

The process

1

Focusing on necessary features

The italki platform is divided into two main sections.

Lessons

Includes every interactions between a teacher and a student regarding lessons

Features:
  • · Find a teacher
  • · Schedule a lesson
  • · Manage lessons

Community

Space for all users to exchange with the community and improve their skills for free

Features:
  • · Find a language partner
  • · Write articles
  • · Ask language questions

The main issues with the last iOs and Android apps came from the will to gather all the content available on the web platform without reorganising it. This resulted in long and conterintuitive user flows, even for the main actions.

2

Charting new user flows

Getting rid of some unnecessary features allowed us to flesh out much simpler flows. They focus on the essential information a user needs to complete main actions.

[ New user ] From the onboarding to the payment of the first lesson:

User flow for new users

New users only have to sign up when scheduling a lesson or before messaging a teacher. That allows them to explore the app and compare teachers without any commitment.

[ Regular user ] From the dashboard to the payment of a lesson:

User flow for regular users

On the previous app, a user willing to schedule a lesson had to click on 'Find a teacher' and then 'Select one of my teachers'. We made this flow more intuitive by adding a list of teachers to the dashboard. Users can now directly browse through their teachers on the home page and schedule a lesson from there.

3

Using an adaptative layout

We decided to go from an organisation in tabs to a customized dashboard. This allowed us to display the most important information upfront for different types of users with different needs.

Dashboard organisation
4

Considering all the edge cases

Finding another teacher

First screen new users see is the teachers’ search. Then, if they have at least one favorite teacher, their home page becomes their dashboard. Even if they have access to their teachers’ list here, we needed to find a way for them to go back to the teachers’ search if needed.

Edge case 1
Learning several languages

When creating an account, a user can only select one language. For the ones that want to change this language or learn another one, we added an option in the teachers’ search filters.

Edge case 2
Displaying all the lessons’ status

Pending · Some teachers prefer not to automatically accept lessons. During the time when a student has requested the lesson and the teacher did not approve yet, the lesson is pending. Upcoming and pending lessons need to be visually different.

Response required · When a teacher changed date and time for a lesson, the student can either accept, decline or offer another date and time. For technical reasons, those actions can only be done in the Lesson details page, not directly on the dashboard.

Canceled · When a teacher canceled or declined a lesson, the student needs to be notified. We decided it should appear until the student sees it on the dashboard, after then it would be available in the Past lessons list.

Edge case 3

Each lesson status is displayed as a category on the dashboard. Upcoming lessons are given the priority, always appearing on top and with larger cards.

5

Reorganising the main screens

Looking at users’ interviews, we identified what are the decisive elements to choose between several teachers: mainly the video and the price of a lesson. We decided to organise the teachers’ profiles in cards to display those two pieces of information upfront.

Past and new Teachers List screen

For the teachers’ profile, we also looked at users’ interviews to bring the most distinctive information on top: among them the video, the description, the number of lessons and the response time.

Past and new Teacher Profile screen

Visual design

Once we had the wireframes ready, I designed high-fidelity versions of the main screens. They were then used as a reference for the visual design of the entire app.

UI design on main screens

Finally, as my internship ended before the completion of the project, I didn't have the chance to take part in the final decisions regarding the UI. Still, before leaving, I explored different ways we could make the app more enjoyable using pop colors and patterns.

Visual experimentations

Thank you for reading!

download the app
contest

Rental App

Find your ideal housing and manage your visits thanks to a web platform

see case study