Availy

aims to refine the fragmented user flow and integrate the newly defined brand identity into the UI, creating a cohesive experience

Availy is a one-on-one English learning platform that matches students with qualified native-speaking tutors. The service, which operated under the name “Engall,” rebranded as “Availy” to further refine the direction of the service. It aimed to help people turn their dreams into realities by advancing their English skills.

MY ROLE

As the sole designer on the team, I redesigned the entire product that reflects the feedback of existing users in line with the direction of rebranding. My role involved product direction, wireframing, UXUI design, establishing a design system, and prototyping. In addition, I worked side-by-side with the founder, operation manager, brand strategist, and engineers to create optimal user experiences.

Team

1 Designer
3 Engineer

Tool Used

Figma
Proto Pie
After Effects

Role

UX/UI Design
Visual Design
Research
Branding
Prototyping

Timeline

May-July, 2022
10 weeks

The challenge

How might we create a more attentive digital learning experience that encourages users to turn their dreams into realities by advancing their English?

Project
Background

Fragmented Experience, Inefficient User Journey

The previous version of the service, Engall, provided one-on-one English language teaching services matching students with qualified tutors on the desktop web. However, the main features, which composed of tools from other existing SaaS platforms (i.e. Zoom, Google Drive, Google Docs, Calendly, Zapier, Notion, etc.), were scattered across those platforms.

Final Designs

Home

The home screen plays the role of a learning designer who encourages and helps users to continue learning without giving up by changing the composition of the home screen to suit the situation and carefully planning the UX writing.

Booking

The booking screen is clear and simplified, and the previously complex steps are dramatically reduced. At the same time, by leveraging a range of options, users are encouraged to consider as many factors as possible in the booking process.

My Class

Users can easily manage classes and review class content step-by-step before class.

Report

It enables the user to accurately grasp the current level and skill, and encourages the user's motivation to learn by expressing it smoothly rather than stiffly.

Pricing & My page

On the Pricing page, factors related to price were expressed as simply and clearly as possible. On My Page, users can conveniently manage their class credits and personal information.

Tutors & Contents

The page for finding tutors and class content is designed with a focus on readability.

Research

Observation
Interview

Notable feedback is that many users have booked classes via mobile. The data shows that more than 70% of students use both mobile and desktop platforms. Students use the mobile web for booking, and the desktop web for class participation.

The other feedback concerns the inconvenience caused by the dispersion of the existing platform.

User Flow Analysis

There were various problems, but the biggest problem was the inconvenience of scheduling and managing classes. Since Engall mainly provided service through the desktop web, the analysis focused on the desktop web.

Booking: Too many steps to book a class - total 11 steps

4. Navigate to the Calendly site & Select a class date

6. Fill in personal and class information

7. Return to the Engall site & Browse class materials list

8. Select a material for class & Copy URL

9. Switch to the Calendly site & Paste the material's URL

11. Receive a confirmation email (unable to check classes on the website)

Reschedule/Cancel Class: Inconvenience of managing classes through Calendly

1. Click the reschedule button in the confirmation email

2. Navigate to the Calendly site & Reselect a class time

5. Receive a confirmation email (unable to check on the website)

COMPETITIVE ANALYSIS

I researched several online 1:1 English education services. I focused on the booking process that needs to be addressed most urgently.

Findings

Reducing the booking stages too much can cause inconvenience. Having a progress bar UI can prevent deviation from the reservation process.
Time arranged horizontally and vertically is confusing.
Using a weekly calendar is the best way to explore the class schedule and utilize the space.
Changing UX Writing on the home screen, depending on the situation, can create a more meticulous experience.

PROJECT GOALS

design process

LOW-FI Sketches

user flow map

MID-FI

VISUAL DESIGN
CONCEPT

I worked closely with a brand strategist to bring the business direction directly into the product. The visual concept for Availy was driven in two directions: to represent brand values and enhance visual recognizability. After I fully understood the brand guideline that the brand strategist established, I picked some characteristic words. Then, I created a mood board to depict these words.

TYPOGRAPHY

Availy's English typeface uses Karla - a mild and warm open-source typeface. Its spacing is set a little wide, but this makes the overall look soft and gentle, like a motivational conversation.Korean typeface Noto Sans KR is perfect for harmonious, aesthetic, and typographically correct global communication. Also, Noto Sans KR is used for body text because it is legible and suitable for delivering a large amount of information.

COLOR SCHEME

Availy products use Beige and toned-down Black to build a soft yet charismatic image. The beige background and toned-down black text make users' eyes comfortable during their study and represent the exclusive values of Availy, which always encourage students to realize their dream day by day.
Availy's Green and Blue are used to highlight specific areas, allowing users to feel vigorous and positive energy. Availy Green, which illustrates a promising and hopeful image, is used in booking and studying pages. The study report and pricing page use Availy Blue, which depicts a reliable and genuine image.

DESIGN SYSTEM

PROTOTYPE

Prototype

I used ProtoPie to prototype and hand over detailed interactions to the developer for implementation.

Availy