︎

Availy

Overview

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.

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.

한국어 버전은 아래 Related Project의 Availy KR을 확인해주세요︎



Client
Availy

Team
1 Designer
3 Engineers
Tool Used
Figma, Proto Pie, After Effects
My Role
UI/UX,
UX Writing,
Prototyping
Timeline
May-July, 2022
10 weeks  


Related Project


Availy KR
Availy Tutor



FINAL PROTOTYPE 

 
 
 

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


︎︎︎booking sequence
 
︎︎︎Press play button ︎



PROJECT BACKGROUND 
  

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.






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?









RESEARCH

User Feedback
 

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.







RESEARCH 

Existing Platform 

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 5. Select a class time 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 10. Confirmation page 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 3. Edit personal & class information 4. Confirmation page 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. What I tookaway were
 

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












PROJECT GOALS   




USER FLOW 






LOW-FI WIRE FRAME


 


MID-FI WIRE FRAME











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





[REFERENCE] BRAND ARCHITECTURE
 
*Availy brand guideline was established by the brand strategist.