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




︎︎︎Reschedule/cancel Class: Inconvenience of managing classes through Calendly

 




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.


















 

Minimail

Overview

Minimail is an email summary app that leverages generative AI to transform how you interact with your inbox. By providing bite-sized, digestible summaries, Minimail ensures that you can quickly identify and understand the key information in each email without sorting through clutter. It smartly categorizes incoming messages into distinct types, offering a tailored user interface for each category. This intuitive design helps streamline your email management, allowing you to focus more on what truly matters. Minimail is the ultimate tool for staying organized and eliminating email overload.

**will be updated soon ︎︎**



Team
1 Designer
1 Engineer
Tool Used
Figma, Illustrator, Photoshop
My Role
UI/UX,
Research,
Branding,
UX Writing,
Prototyping
Timeline
Jan-May, 2024  














 

Availy Tutor


Overview

Availy Tutor is an internal web/app platform designed to manage classes and the performance of Availy tutors.

As the sole product designer on the team, I designed the entire platform that centralizes key actions scattered across other platforms(i.e. Calendly, Notion, Google Docs, Gmail, etc.) and simplified user flow. Additionally, I worked closely with the founder, operation managers, and engineers to set the goals and scope of the project, taking time and quality into account.



Client
Availy

Team
1 Designer
3 Engineers
2 Operation Managers
Tool Used
Figma, Proto Pie, After Effects
My Role
UI/UX,
UX Writing,
Prototyping
Timeline
Mar-May, 2022
7 weeks  


Related Project


Availy Tutor  KR
Availy




PROJECT BACKGROUND

There wasn't a centralized platform for tutors to manage their classes on Availy(Engall). Tutors had to use a variety of different platforms to manage their classes and performance.



THE CHALLENGE
  How might we help tutors manage their classes more efficiently and stay motivated?






DESIGN SOLUTION







USER INTERVIEW


I conducted a total of six interviews. First, I interviewed 4 tutors to recognize user needs. In addition, I also interviewed two operation managers to learn about their opinions on how to improve overall efficiency.

Interviewees were full-time tutors in their 20s who also used other tutoring platforms, a part-time tutor/graduate student in his 30s, a retired digital nomad in his 50s who usually travels the world, and tech-savvy operation managers in their 20s.


︎︎︎insights from interviews




COMPETITIVE ANALYSIS


I researched four other online 1:1 English education services.

Insights
  • Dashboard-style modular blocks make it easy to see the performance at a glance and maximize space utilization.
  • It is much more intuitive to show one class as one block on a weekly calendar combined with an hourly timeline.
  • Showing what tutors must do and what they are most curious about on the home screen at once can help tutors manage classes effectively.
  • Many education services include features like copy schedule, sync calendar app, tutor level system, substitute canceled classes, and more for efficiency.









PRIORITIZATION


I adapted the MoSCoW Method for prioritizing requirements within this time-boxed project.
Due to the lack of development manpower, especially front-end developers, it was impossible to implement a list of features based on interviews in a short period of time. So, I consulted with the project owner, operations managers, tutors, and developers to properly scope this project.


MoSCoW method︎︎︎








STRUCTURE


After prioritization, we set the desktop web as the main platform where tutors can use all functions, and the mobile app as the sub-platform where tutors receive important notifications, urgently modify schedules or check simple information.







WIREFRAME


In order to communicate quickly and receive various feedback, I drew lo-fi wireframes while brainstorming based on ideas and user concerns.






Final Version












Availy Public Web


Overview

Availy 서비스의 홍보를 위한 데스크톱/모바일 웹사이트를 디자인하였습니다. 
로그인 이전/이후 동일하게 사용되던 기존 사이트를 비회원 홍보용/회원용 사이트로 분리하였고, 홍보용 사이트에서는 브랜드 룩앤필을 표현하면서 동시에 서비스가 가진 특징을 간단명료하게 정리하고 다양한 인터렉션을 통해 시선을 끌 수 있도록 디자인하였습니다.

To be updated ︎




Client
Availy

Team
1 Designer
3 Engineers
Tool Used
Figma, Proto Pie, After Effects
My Role 
UI/UX,
UX Writing,
Prototyping,
Interaction Design,
Product Narrative
Timeline
July-August, 2022
4 weeks  


Prototype Links


Desktop
Mobile





PROTOTYPE
 
 
 











Kids' Lounge


Overview

The Shilla Seoul was geared toward business travelers and couples, but after the pandemic, its business model has changed to cater to families. So, I was commissioned to create a Kids Lounge for the new target group.
Working closely with the marketing team, I suggested the entire concept of the space. Inspired by the hotel's preexisting The Executive Lounge, I designed a similar facility for children. I designed the interior space and furniture and selected everything from books for kids to interior items and artwork for the lounge. During construction, I also managed the project and handled several subcontractors. 

서울신라호텔의 타겟 고객층은 비즈니스 고객과 커플을 중심으로 하였으나, 펜데믹 이후 패밀리 고객 위주로 비즈니스 모델을 변경하게 되면서 아이들을 위한 신규 시설이 필요하게 되었습니다. 이에 따라 아이들을 위한 키즈라운지를 제작할 것을 의뢰받았습니다.
관내 처음으로 설치되는 고정 키즈 시설이었기 때문에 앞으로 생겨날 다른 키즈 시설들의 기준점으로 사용되어질 것을 염두하였고, 기존의 신라호텔의 브랜드 아이덴티티에서 벗어나지 않되, 아이들을 위한 따뜻하고 밝은 공간이 되도록 전체 공간을 신중히 계획하였습니다. 또한, 마케팅팀과 긴밀히 협력하면서 공간의 전체 컨셉과 내부 프로그램을 제안했습니다. 호텔 23층에 위치한 The Executive Lounge에서 착안하여 어린이를 위한 라운지를 설계했습니다. 실내 공간과 가구를 디자인하고 아이들을 위한 책과 소품, 아트웍까지 모든 것을 디렉팅하였고, 시공기간동안 협력업체들과 소통하며 프로젝트를 관리하였습니다.




Client
The Shilla Hotels & Resorts of Samsung Group
Designer
Jihyeon Kim 

Art Director
Jia Kwon

Photographer
Myeonghoon Kim
Deliverables
Interior Design, Furniture  Design,
Props Design, Artwork Display,
Photo Styling
Timeline
December 2021
- January 2022
 






PROJECT BACKGROUND
   

The Shilla Seoul, a representative property of the Samsung Group affiliate Hotel Shilla, is a premium lifestyle hotel representing Korea, as well as a member of The Leading Hotels of the World.

Thanks to its reputation, visits by heads of state, renowned figures, and organizations in the fields of diplomacy, economy, and culture historically accounted for a large portion of sales. However, after the outbreak of the pandemic, as travel became difficult and social distancing was enforced, the proportion of family visitors surged. In the past, however, business travelers and couples were the main target customers, so there needed to be more facilities for family visitors, particularly for children. There was also a need to support children's programs that were included in family guest packages and promotions.




THE CHALLENGE
 
How might we transform a dark, narrow, and low space into a space where children can stay comfortably?
How might we apply The Shilla Hotel’s existing brand identity to space for children?









SPACE ANALYSIS

5F Barber Shop

On the 5th floor of the hotel, there was an unused space that was previously a barbershop. Initially, there is an idea to turn this space into a kids' play lounge where children can play freely. However, the room was not large enough to run around in, and since this place was located near the sauna's sleeping room, any noise had to be minimized. Therefore, I suggested that the overall program be focused on static activities and educational content, and the design should be conducive of a calm atmosphere accordingly.





CONCEPT


" The Executive Lounge for Kids "


The Executive Lounge, located on the top floor, is a guest-only business space created from the idea of a luxury penthouse living room and the most famous facility in The Shilla Seoul. This Lounge is not permitted to enter children. Therefore, I designed the interior space and furniture with the concept of The Executive Lounge for kids and thoughtfully selected suitable interior items, artwork, and English kids' books.


23F The Executive Lounge






MOODBOARD






3D MODELING  




PROJECT MANAGEMENT






FINAL OUTCOME