ulesson 앱: UX 개선

Apr 21 2023
안녕하세요 프레스맨입니다! 시간 내주셔서 감사합니다. 귀하의 의견과 피드백은 제 직업을 더 잘하는 데 도움이 될 것입니다. 하단에서 일부를 볼 수 있기를 기대합니다.

안녕하세요 프레스맨입니다!

시간 내주셔서 감사합니다. 귀하의 의견과 피드백은 제 직업을 더 잘하는 데 도움이 될 것입니다. 하단에서 일부를 볼 수 있기를 기대합니다.

모든 것이 어떻게 시작되었는지 안내해 드리겠습니다. 이야기는 정말 빠르게 진행됩니다.

나는 구직 활동을 했기 때문에 가능할 때 제품 역할에 지원합니다. 특정 역할을 위해 작업해야 할 작업이 주어졌습니다.

'5세에서 15세 사이의 어린이를 위한 교육 기술 앱을 선택하고, UX 문제를 파악하고, 솔루션을 제공하고, 하나의 기능을 디자인하세요.'

위의 요구 사항에 부합하는 이상적인 제품을 조사하는 데 시간을 보냈고 ulesson을 발견했습니다.

제품 배경 :
Ulesson은 어린이와 어린 학교 어린이를 위한 나이지리아 교육 기술 플랫폼/도구로 성적 향상을 돕기 위해 제작되었습니다. 그들은 모두가 집에 있어야 했던 코로나19 기간 동안 인기를 얻었습니다. 모바일 애플리케이션과 맞춤형 태블릿을 통해 학습과 학습이 가능해졌습니다.

브랜드 메시지 및 커뮤니케이션:
대상 고객: 5-16세 어린이. (학생/재학생)

성격/목소리: 친절하고 친근하며 현대적입니다.

서비스 매체: 스마트폰, 태블릿.

내 관찰 및 결과:
Google Play 스토어에서 100만 회 이상 다운로드된 Android 앱을 설치했습니다. 이 미친 숫자로 제품의 모양과 느낌이 훌륭할 것으로 기대했습니다. 솔직히 말해서 상호 작용해야 하는 온보딩 화면에서도 감명을 받지 못했습니다.

개인적으로 제품에 대한 내 자신의 관찰에서 전체 응용 프로그램이 서두르는 것처럼 보였습니다. 제품은 제대로 작동하고 있었지만 사용자의 행동에서 행동까지의 경험은 어떻습니까? 사용자가 애플리케이션의 특정 기능에 대해 아프거나 걱정합니까?

레이아웃, 색상, 아이콘 및 버튼에서 많은 문제를 발견했습니다. 이 제품의 대상 청중이 주로 어린 아이들이라는 것을 기억하는 것이 큰 관심사입니다. 따라서 올바른 색상, 타이포그래피, 아이콘 및 기타 디자인 요소를 사용하는 것은 건전하고 만족스러운 사용자 경험과 매우 관련이 있습니다.

다음은 기존 애플리케이션 인터페이스의 참조 샷(하단)과 함께 내가 식별한 문제입니다.

  1. 탐색 모음이 없습니다. (왜 그런지 궁금했다)
  2. 산만하고 일관성 없는 버튼.
  3. 클러스터된 햄버거 메뉴입니다.
  4. 잘못 설계된 팝업.
  5. 잘못된 정보 계층.
  6. 명확한 기본, 보조 및 강조 색상이 없습니다.
  7. 아이콘 크기, 유형 및 무게의 불일치.
  8. 서체 및 변형의 불일치.
  9. 일부 대화형 카드의 대비 문제.
  10. 요소 사이의 간격이 일정하지 않습니다.
  11. 기존 앱의 인터페이스 샷
    기존 앱의 인터페이스 샷
스케치 및 낙서
기능 흐름

개선된 디자인 기능:

디자인을 시작하기 전에 기본, 보조 및 강조 색상과 회색을 정의했습니다. 제품의 느낌(장난스럽고 부드러운 아이콘) 측면에서 올바른 아이콘 라이브러리를 찾을 수 없었기 때문에 현재 앱에서 사용되는 얼룩을 고수하기로 결정했습니다. 내 디자인 전반에 걸쳐 일관성을 유지하면서 화면이 재미있고 친근하게 보이도록 합니다.

타이포그래피의 경우 재미있는 헤더 서체인
Balsamiq sans를 사용했습니다. 이 재미있는 느낌을 불러일으키기 때문에 헤더와 액션에만 서체를 사용했습니다.

Body 텍스트의 경우 Inter를 고수했습니다.

사용자가 완료한 레슨 수와 진행 중인 레슨 수를 빠르게 알려주는 미리보기를 홈 화면에 만들었습니다. 이는 사용자가 애플리케이션의 홈 화면에 도달하는 즉시 진행 상황을 빠르게 따라잡을 수 있기 때문에 중요합니다.

젊은 사용자에게 가장 중요한 3가지 화면/액션의 우선순위를 지정하여 맨 아래에 내비게이션을 만들었습니다. '홈 화면 ' - 인사를 받고 필요한 업데이트를 쉽게 볼 수 있는 곳입니다. ' 내 수업' 화면 - 사용자가 이전에 수강한 수업에 액세스할 수 있습니다. 사용자가 다양한 수업에 대한 테스트를 치를 수 있는 '퀴즈' 화면 . (본 작업을 위해 홈 화면과 사이드 메뉴만 디자인했습니다.)

다른 작업은 오른쪽 상단의 햄버거 메뉴 아이콘을 클릭하여 액세스할 수 있는 사이드 메뉴 로 푸시되었습니다 .

내 디자인 결정에 대한 정당성은 아래 이미지에 설명되어 있습니다.

화살표 참조 시각적 개선 사항

Constraints, Takeaways & Conclusion
기존 앱과 ulesson 로고에서 색상을 가져와 브랜드의 현재 색상에 맞게 작업을 조정했습니다.
나의 주요 제약은 올바른 아이콘 라이브러리와 애플리케이션의 본문 텍스트에 사용되는 서체를 찾는 것이었습니다.

색상은 감정을 불러일으키고 어린 아이들의 주의를 산만하게 할 수 있으므로 응용 프로그램에 사용되는 색상의 수를 줄였습니다.
공부와 배움을 위한 제품인 만큼 젊은 사용자들에게 재미있어 보이도록 디자인을 최대한 노력했습니다. 학습은 하루가 끝날 때 재미있어야 하기 때문 입니다.

나는 이 작업을 즐겼고 시간이 지남에 따라 edtech 제품에 대한 더 많은 개선 사항을 탐색할 것입니다.

ulesson이 내 솔루션을 살펴볼 수 있기를 바랍니다.

살펴 주셔서 감사합니다.

figma 프로토타입과 상호작용하기
고용하기
내 디자인 포트폴리오 보기