︎

Availy

Overview

Availy는 북미지역 원어민 튜터와 학생을 1:1로 연결시켜주는 학습 플랫폼입니다. 기존 Engall이라는 이름으로 운영되었던 서비스는 Availy라는 이름으로 변경되면서 “영어라는 도구를 통해 꿈을 현실로 만드는 과정을 돕는다”는 미션 아래 전체적인 서비스의 방향을 다듬었습니다.

유일한 프로덕트 디자이너로서 리브랜딩의 방향성에 맞추어 기존 유저들의 피드백을 반영한 새로운 디지털 프로덕트를 디자인했습니다. 프로덕트의 방향성을 제안하고, UXUI 디자인과 디자인 시스템 구축 및 프로토타입을 제작했습니다. 최적의 사용자 경험을 제공하기 위해 프로덕트 오너 및 운영매니저, 브랜드 디자이너 및 개발자들과 긴밀히 협력하였습니다.  


Client
Availy(Engall)
Designer
Jihyeon Kim
Deliverables
UX/UI Design,
UX Writing
Interaction Design,
Prototyping
Timeline
April-June, 2022
 


Related Project


Availy EN
Availy Tutor




PROJECT BACKGROUND 
  

기존 서비스인 잉그올은 데스크톱 웹을 중심으로 학생과 원어민 튜터를 매칭해주는 1:1 영어회화 서비스를 제공했습니다. 해당 서비스는 웹 솔루션 플랫폼(imweb)을 기반으로 제작되었고 여러 가지 SaaS 플랫폼(Zoom, Google Drive, Zapier, Notion 등)의 조합으로 주요 기능이 분산되어 운영되고 있었습니다.






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
 

주목할만한 피드백은 상당수의 유저들이 모바일 웹을 통해 클래스를 예약한다는 점이었습니다. 데이터를 살펴보았을 때 70%의 유저들이 모바일과 데스크톱 플랫폼을 병행하여 사용하고 있었습니다. 예약시에는 모바일 웹을 이용하고, 수업할 때는 데스크톱 웹을 사용했습니다.

그 외의 의견들은 기존 서비스가 여러 플랫폼으로 분산된 것에서 초래하는 불편함에 관한 것이었으며, 이는 대부분 새로운 서비스를 런칭하면 해결될 수 있는 문제들이었습니다.



*해당 조사는 본인이 팀에 합류하기 전, 전화 상담을 통해 진행되었음.



RESEARCH 

Existing Platform 

다양한 문제들 중에서 가장 큰 문제는 클래스 예약 및 관리의 불편함이었습니다. 기존 플랫폼은 데스크톱 웹을 기본으로 제공되었기 때문에 조사는 데스크톱 웹을 기준으로 이루어졌습니다.  



︎︎︎예약: 예약하기 위해 총 11 단계를 거쳐야 함
1. 튜터리스트에서 튜터를 고름 2. 기간을 선택 3. 원하는 튜터의 가능한 스케줄을 선택 4. Calendly 사이트로 이동 & 이전 단계에서 고른 날짜를 재선택 5. 클래스 시간을 선택 6. 간략한 개인정보와 클래스 요청사항 입력 7. 잉그올 사이트로 이동 & 클래스 콘텐츠 리스트 탐색 8. 클래스 콘텐츠를 선택 & URL 복사 9. Calendly 사이트로 이동 & 콘텐츠 URL 붙여넣기 10. 예약 확정 페이지 11. 예약 확정 메일 수신(웹사이트에서 예약 클래스를 확인불가)


︎︎︎스케줄 변경 및 취소: Calendly 및 이메일을 통해 수업을 관리

 
1. 예약 확정 매일에서 reschedule 선택 2. Calendly로 이동 & 클래스 날짜 및 시잔 재선택 3. 간략한 개인정보와 클래스 요청사항 입력 4. 확정 페이지 5. 확정 이메일 수신(웹사이트에서 예약 클래스를 확인불가)





COMPETITIVE ANALYSIS 

여러 온라인 1:1 영어 학습 서비스를 조사하였습니다. 시급히 개션할 필요가 있는 예약 과정을 중심으로 살펴보았습니다. 
 

  1. 예약 단계를 과도하게 단순화할 경우 다양한 옵션을 고려할 수 없어 유저의 불편함을 초래할 수 있음. 예약과정에서의 이탈률을 낮추기 위해 프로그래스 바를 활용할 수 있음. 
  2. 클래스 타임을 상하좌우 버튼형으로 나열할 경우 혼란이 야기됨
  3. 상단 위클리 캘린더UI를 활용할 경우 스케줄을 탐색하기에 편리하고 공간 활용에도 좋음
  4. 상황에 맞게 홈 화면의 문안과 구성을 다르게 하여 좀 더 세심한 경험을 제공할 수 있음 












PROJECT GOALS   





USER FLOW DIAGRAM






LOW-FI WIRE FRAME


 


HIGH-FI WIRE FRAME











VISUAL DESIGN CONCEPT


브랜드 디자이너와 긴밀히 협력하여 리브랜드 방향성을 전체 제품에 적용했습니다. Availy의 비주얼 컨셉은 재정립된 브랜드 가치를 표현하고 다양한 교육 서비스 사이에서 시각적 인지도를 높이는 두 가지 방향으로 추진되었습니다. 브랜드 디자이너가 설정한 브랜드 가이드라인을 충분히 이해한 후 몇 가지 특징적인 단어를 골랐고, 이 핵심 가치들을 표현하는 무드 보드를 만들었습니다.






TYPOGRAPHY
 

Availy의 영어 서체는 온화하고 따뜻한 느낌을 주는 오픈 소스 서체인 Karla를 사용합니다. 간격은 조금 넓게 설정되어 있지만 전체적으로 부드러워 동기를 부여하는 학습 디자이너와의 대화같은 느낌을 전하고자 했습니다. 한글 서체 Noto Sans KR은 조화롭고 미적이며 타이포그래피적으로도 잘 만들어져서 다양한 커뮤니케이션에 적합합니다. 또한 Noto Sans KR은 가독성이 좋고 많은 양의 정보 전달에 적합하여 본문에 사용됩니다.






COLOR SCHEME


Availy 제품은 Beige와 톤 다운된 Black을 사용하여 부드러우면서도 카리스마 있는 이미지를 연출합니다. 베이지색 배경과 톤 다운된 색상의 블랙 텍스트는 공부하는 동안 사용자의 눈을 편안하게 해주며, 매일매일 꿈을 실현하도록 격려하는 Availy만의 가치를 나타냅니다. Availy의 Green과 Blue는 특정 영역을 강조하여 사용자가 활기차고 긍정적인 에너지를 느낄 수 있도록 합니다. 전도유망하고 희망찬 이미지를 표현한 Availy Green은 예약 및 학습 페이지에 사용됩니다. 학습 리포트 및 결제 페이지는 신뢰할 수 있고 진정한 이미지를 나타내는 Availy Blue를 사용합니다.






DESIGN SYSTEM





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












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