고지 사항: 이 사례 연구는 Skilvul: UI/UX Design Mastery 프로그램의 Mentor on Demand 챌린지의 일부입니다.

배경

Skilvul은 대화형 콘텐츠, 주문형 비디오 및 주문형 멘토를 통해 온라인 학습 자료를 제공하는 기술 기반 교육 플랫폼입니다. 멘토 온 디맨드(Mentor on Demand)는 학생들이 멘토와 함께 코딩 및 UI/UX를 배우는 데 도움이 되는 세션을 예약할 수 있는 Skillvul의 서비스입니다. 이 서비스의 문제점은 온라인 강의 시스템이 일반적으로 학생 수에 비해 멘토의 수가 불균형하여 멘토가 학생들과 한 명씩 소통할 수 있는 시간이 제한되어 학생들이 충분히 지도받지 못하고 있다는 느낌을 받게 한다는 점입니다. 그래서 이 서비스는 이러한 문제를 해결하기 위해 존재합니다. Skilvul은 학생뿐만 아니라 숙련된 개발자가 멘토가 될 수 있도록 "등록" 버튼도 제공합니다. 등록이 수락되면 멘토의 이름과 기타 세부 정보가 멘토 페이지에 표시됩니다.

Skilvul이 달성하고자 하는 목표는 다음과 같습니다.

• 멘토 등록
• 학생들은 멘토를 선택하고 비용을 확인할 수 있습니다.
• 결제 페이지
• 멘토 프로필에 대한 간략한 정보

1. 멘토 등록, 멘토 고용 및 개인 멘토링 흐름의 효율성 확인
2. 멘토 고용 및 개인 멘토링 기능에 대한 사용자 만족도 파악
3. 멘토 등록 및 결제 흐름에 대한 사용자 편의성 수준 파악
4. 사용자 요구에 따른 알림 기능의 적합성 파악

저는 Abdul Aziz Muhammad Ghifari , Farid Ajie Syahputra 및 20-106 Dara Fadilah 3명의 팀원과 협력하는 UI/UX 디자이너로 일하고 있습니다. 이 프로젝트에서 우리는 다음을 공동으로 책임집니다.

1. 대상 사용자에게 필요한 멘토링 서비스에 대해 알아보기
2. 연구 결과에서 브레인스토밍 아이디어 및 개념 기능
3. 사용자 친화적인 기능 흐름 만들기
4. 사용자 친화적인 디자인과 Skilvul의 특성에 맞는 웹 사이트 인터페이스 및 최신 기능을 디자인합니다.
5. 사용하기 쉬운 인터랙티브 프로토타입 제작
6. 사용자 인터뷰를 진행하여 최신 기능의 장단점 파악

디자인 사고는 디자인하려는 기능을 어떻게 결정하기 위한 디자인 프로세스 접근 방식으로 사용됩니다. 이 프로세스를 통해 가정에 반하여 사용자를 이해하고 문제를 재정의하여 대체 솔루션을 식별할 수 있습니다. 이 접근 방식에서 우리는 다양한 가능성을 시도하여 효과적인 솔루션을 생성하기 위한 혁신적인 아이디어를 만드는 데 중점을 둡니다.

1 — 공감

공감 단계에서는 개인 멘토링 서비스에 대한 사용자와 니즈에 대한 통찰력을 얻기 위해 1차 조사를 수행합니다. Empathize는 연구 주제에서 정보를 추출하여 연구자가 자신의 가정을 무시하도록 도와줍니다. 공감은 디자인 싱킹에서 가장 중요한 단계입니다. 제대로 수행되지 않으면 전체 아이디어가 수락되지 않습니다.

ㅏ. 1차 연구

이 공감 단계에서 우리는 기본 조사 방법을 사용하여 대상 사용자에게 직접 정보를 파헤칩니다. 1차 연구는 원본 소스에서 직접 데이터를 가져오기 때문에 정확도가 높습니다. 1차 연구의 주요 초점은 기존 문제이므로 해결책을 찾는 데 모든 관심이 집중됩니다. 이를 통해 연구원은 문제를 탐색하고 솔루션에 대한 아이디어가 될 수 있는 다양한 옵션을 찾을 수 있습니다.

• 자극 사용자 연구

• 회견

인터뷰 영상은 아래 링크에서 보실 수 있습니다

• 데이터 기록

2 — 정의

이 단계에서는 공감 단계에서 수집된 데이터를 해석하여 사용자의 니즈를 파악합니다. 정의 단계는 디자이너가 문제를 해결할 수 있는 기능, 기능 및 기타 요소를 구축하기 위한 훌륭한 아이디어를 수집하는 데 도움이 됩니다.

ㅏ. 페인 포인트

페인 포인트는 우리가 해결해야 하는 문제의 모음입니다. 1차 연구의 인터뷰 결과에서 우리는 사용자가 직면한 특정 문제와 어려움을 식별할 수 있습니다. 이 단계에서 문제는 범주로 그룹화되고 그룹 구성원의 투표를 통해 선택됩니다. 각 구성원은 최대 3개의 문제에 투표할 수 있습니다. 가장 많은 표를 얻은 주제는 How-might we 무대로 진출합니다.

비. 어떻게 우리가

How-Might 우리는 기존의 문제를 질문으로 바꾸는 단계입니다. 질문은 디자인과 기능에 영향을 미치는 요소를 다룰 수 있습니다. 그러나 묵시적인 해결책에 매달리지 않고 해결책 아이디어를 자유롭게 탐색할 수 있도록 힌트나 해결책을 암시하는 것은 피하십시오. 이 단계를 통해 디자이너는 제시된 문제에 대한 해결책을 적극적으로 모색하려는 동기를 부여받을 것으로 기대됩니다.

3 — 아이디어

Ideate는 특정 주제를 기반으로 광범위하고 새로운 아이디어와 개념을 생성하는 프로세스입니다. 이 단계에서 사용자의 문제를 창의적인 솔루션으로 해결해야 합니다. Ideate의 주요 목표는 실제로 이전에 해본 적이 없는 관점과 개념을 여는 것입니다.

ㅏ. 솔루션 아이디어

How-might 단계에서 생성된 질문에서 가능한 한 많은 솔루션 아이디어를 생각할 수 있지만 여전히 문제의 한계 내에 있습니다. 솔루션 아이디어 단계는 문제를 해결하는 가장 좋은 방법을 찾을 수 있도록 아이디어를 조사하고 테스트하는 데 도움이 됩니다. 이 단계에서 우리는 솔루션 아이디어를 멘토 등록, 개인 멘토링 기능 및 위생 기능의 3가지 범주로 나누었습니다.

비. 우선순위 아이디어

우선 순위 지정 아이디어는 객관적인 시간 계획에 따라 프로젝트를 나누는 방법입니다. 솔루션 아이디어 단계에서 만들어진 아이디어는 수직으로 교차하는 영향과 노력 변수를 기준으로 그룹화하여 4개의 파트를 생성합니다. 이 방법은 어떤 작업 우선 순위가 우선이고 무엇을 연기할 수 있는지 결정하는 데 도움이 됩니다. 큰 영향을 미치고 더 많은 노력이 필요한 아이디어는 오른쪽 상단에 배치되며 그 반대의 경우도 마찬가지입니다.

4 — 프로토타이핑

프로토타입은 개념과 사용자 흐름을 테스트할 목적으로 디자인이나 샘플을 만들어 제품을 개발하는 프로세스입니다. 즉, 시제품은 출시될 최종 제품이 아닙니다. 이 단계는 기능이 계획된 요구 사항에 따라 작동할 수 있는지 확인하는 데 필요합니다.

ㅏ. 사용자 흐름

사용자 흐름은 사용자가 웹 사이트에서 기능을 실행하기 위해 수행해야 하는 일련의 단계입니다. 좋은 사용자 경험을 만들기 위해서는 사용자의 기대, 요구 및 편의성을 기반으로 사용자 흐름을 고려해야 합니다. 설계 참조를 위해 사용자 흐름도 문서화해야 합니다. 사용자 흐름을 문서화할 수 있는 도구 중 하나는 FigJam입니다.

비. 와이어프레임

와이어프레임은 웹 사이트에서 항목 또는 기능의 레이아웃을 디자인하기 위한 페이지 프레임워크입니다. 관련 항목은 텍스트, 이미지, 버튼 등을 말합니다. 와이어프레임은 일반적인 개념 및 웹 사이트 모양에 대한 개요를 제공하기 위한 것입니다. 따라서 사용자의 요구와 흐름을 고려하여 색상 없이 상자, 선 및 텍스트로 구성된 단순한 윤곽선만 만들면 됩니다. 이 와이어프레임을 디자인할 때 Skilvul 웹사이트의 모든 요소를 ​​검사하여 크기와 모양을 조정해야 합니다.

씨. 디자인 시스템

디자인 시스템은 일관되고 정렬된 사용자 인터페이스 구성 요소 모음입니다. 디자인 시스템은 웹 사이트 개발 프로세스에서 디자이너와 개발자가 반복적으로 사용할 수 있습니다. 디자인 시스템 자체의 기능은 불일치를 제거하고 사용자 편의를 위해 제품 품질을 유지하는 것입니다. 디자인 시스템 구성 요소는 일반적으로 타이포그래피, 색상 팔레트, 아이콘, 텍스트 필드, 버튼, 탐색 모음 및 기타 요소로 구성됩니다. 이 프로젝트에서 사용하는 모든 구성 요소는 원래 Skilvul 구성 요소에 맞게 조정되었습니다.

디. UI 디자인

이 단계에서 우리는 원래 웹사이트의 모양에 따라 애플리케이션 디자인을 시작합니다. 웹 사이트 레이아웃은 생성된 와이어프레임을 나타냅니다. 페이지를 채우기 위해 디자인 시스템에 이미 구축된 색상, 타이포그래피 및 구성 요소를 추가합니다. 사용자 인터페이스 디자인에서 가장 중요한 것은 좋은 사용자 경험을 만들기 위한 기능, 미학 및 개인화입니다.

이자형. 원기

프로토타이핑은 대화형 및 테스트 준비가 된 제품 샘플을 만드는 단계입니다. 프로토타입은 웹 사이트의 기능과 기능이 어떻게 작동하는지 알아보기 위해 만들어집니다. 프로토타이핑은 각 페이지 또는 기능의 사용자 흐름을 기반으로 합니다. 실행하려면 한 페이지에서 다른 페이지로 연결 케이블을 연결해야 합니다. 애니메이션을 추가하는 것도 기능의 기능을 극대화하는 데 중요합니다.

에프. 디지털 목업 인터랙티브 프로토타입

Figma Design을 통해 프로토타입 케이블을 연결한 후 현재 기능을 통해 웹 사이트 미리보기를 볼 수 있습니다. 이 목업은 원래 제품과 거의 동일하게 실행할 수 있습니다. 버튼을 누르고, 페이지를 스크롤하고, 텍스트를 입력하는 등의 작업을 할 수 있습니다. 이 모형은 테스트 단계에서 잠재 사용자에게 테스트됩니다.

5 — 테스트

테스트는 응용 프로그램이 요구 사항이나 예상 결과를 충족하는지 확인하기 위해 응용 프로그램의 유용성을 검증하는 단계입니다. 테스트는 실제 경험을 제공하고 건설적인 피드백을 얻기 위해 잠재 사용자를 대상으로 수행됩니다. 이를 통해 제품이 대중에게 공개되기 전에 사용성 문제를 평가하고 최상의 솔루션을 찾을 수 있습니다.

ㅏ. 사용자 조사 준비

• 자극 사용자 연구

비. 사용자 조사 연습

• 회견

아래 링크에서 비디오 인터뷰를 볼 수 있습니다.

• 데이터 기록

결론

Skilvul은 혼합 학습 방식을 사용하여 IT 학습 콘텐츠를 제공하는 기술 기반 교육 플랫폼입니다. Skilvul은 학생들이 코딩 및 UI/UX를 배우는 데 도움이 되는 멘토와의 세션을 예약할 수 있는 Mentor on Demand 서비스를 제공합니다. 그러나 서비스가 최적화되지 않아 학생과 멘토에게 문제가 발생합니다. 이 문제를 극복하기 위해 Skilvul은 학습 및 교육의 경험과 편의성을 향상시키기 위해 Mentor on Demand 기능을 추가해야 합니다. 우리는 이 프로젝트를 통해 이러한 기능을 구현하기 위해 노력하고 있습니다. 잠재 사용자에게 좋은 경험을 제공하기 위해 위의 웹사이트 디자인을 최대한 좋게 만들었습니다. 그 과정에서 우리는 많은 일을 겪었다. 멤버 개개인의 피할 수 없는 분주함부터 시작해 아트블록, 의욕상실 등. 하지만, 결국 이를 극복하고 이번 프로젝트를 잘 마칠 수 있었습니다. 이 프로젝트에서 우리는 팀워크, 디자인, 비판적이고 창의적인 사고, 커뮤니케이션 등과 같은 많은 지식과 기술을 얻었습니다. 완벽하지는 않지만 우리가 얻은 결과가 독자들에게 영감을 줄 수 있기를 바랍니다.

다음 추천

일련의 기본 연구 프로세스, 디자인 사고 및 사용자 연구를 거친 후 다음과 같이 Skills 웹 사이트 기능을 개발하기 위한 솔루션을 찾았습니다.

1. 사용자에게 더 기능적이고 편안하도록 외관 업데이트(알림)
2. 사용자에게 도움이 될 수 있지만 아직 존재하지 않는 기능 추가(팝업 페이지의 뒤로 버튼 일정 선택 및 일정 변경)
3. 덜 효과적이라고 느껴지는 기능 재설계(멘토 가격 필터)