Title
Appitur
E-learning
App
Year
2020-21
Role
User Research
User Interviews
Journey Mapping
Sketching
Wireframing
Visual Design
Interaction Design
Medium
App
Design
Partner
Weijie Fu

01. Intro

Problem

Appitur is a SaaS product developer of mobile learning and assessment platforms. Their apps help users prepare for certification exams through multiple choice questions and answers regardless of devices (IOS, Andriod, PC, Tablet), allowing users to study however they want, wherever they want.

Appitur's three mobile apps are losing users and generating less revenue, due to a myriad of reasons:

  1. Poor User Experience: Navigating in the app is very confusing and important action buttons are often missing or ignored by users
  2. Outdated UI: The existing app was developed over ten years ago
  3. Broken Backend Functionality: Some buttons are not working on some devices

Goal

  1. Sticky Engine: To build a better studying experience for users and lower the churn rates
  2. Viral Engine: To build new components and features for user referral to achieve viral growth
  3. Paid Engine: To generate more revenue for the business through purchased content by raising customer lifetime value (CLV) through better user flow towards purchased contents

Lean Cycle

By working closely with the shareholders and developer team, we implemented a Lean Cycle developing schedule, where the process is iterative and could be measured.

Initial Usability Research Phase: Identify pain points and critical user needs. Understand the base APIs from the engineer.  Save nice-to-have features for further development.

Project Foundation Phase: Implement findings from critical pain points, redesign and develop basic user interface for the initial launch.

Lean Cycle Phase: Getting feedbacks and make improvements on top of the initial design, develop and launch new features.

02. Preliminary Research

We wanted to get a clear picture of how our primary users are studying for the exams. In order to get a better understanding of their behaviors and motivations, here are some research techniques we used for the redesign.

Topic Research

We wanted to get a clear picture of how our primary users are studying for the exams. In order to get a better understanding of their behaviors and motivations, here are some research techniques we used for the redesign.

How do people study for professional certification exams?

Who are the target users?

Since the existing Appitur apps are for people who are doing professional certification exams (CIA, CMA, etc) and Appitur's clients are famous training and education agencies in the field, our target users are professionals in their 20s or 30s looking for career breakthroughs.

We asked our target users how they are doing exam prep and the frustrations they've encountered along the way.

Key quotes from target users:

Qualitative User Interviews

We did an interview with Cynthia, who is currently studying for her Level 2 CFA exam. We asked her about the process she study for an exam.

03. Usability Research

Differs from preliminary research, usability research focuses on the exsiting app performance. Through the usability test, we are able to identify product flaws and areas of confusion so we can optimize in our redesign.

Shareholder Interviews

To understand the business goal for this app, we talked to Kevin, who is the content provider of Hock CIA and CMA apps and Tom, founder of Appitur E-learning Platform.

From our talk with Kevin, we came to understand the interest of Appitur's clients. Kevin, who already has a brand Hock International, would like the app to be an addition to the whole family package (books, videos and test questions) he is offering to his students. In the long term, he hopes the Appitur app could somehow inherit their brand identity. He also shared with us some concerns his students have:

Usability Test

We conducted usability tests with five participants to test existing product, understand user behavior and define success for both the users and the shareholders.

The test session is designed to gather general information from the participants and test usability of Appitur apps. In this case, we are testing the HOCK CIA (Certified Internal Auditor) app since all four apps are quite similar.

The content is shown to the participants on a prototype via Google Meet calls. The participants could interact with the prototype as they interact with a regular app.

See Test Script Here

04. Ideation

The initial user research uncovered various areas of opportunities, such as adding flashcards and more explanations. However, for the redesign, I kept in mind the business goals and decided to focus upon some key areas, including optimizing user experience around user on-boarding, contents purchase, and studying itself, and thereby, meeting user and business goals including key engagement and user retention.

Case Study

How can we make exam prep more fun?

Studying these questions for exams are very similar to a mobile game experience - It's challenging, it consists of small sections and most people study 20-25 questions at a time, the session is timed. The only difference is the study experience on Appitur is not so fun yet. Can we make exam more fun? Can we learn something from an mobile game app?

Thus, I did an in-depth screen by screen case study into one of my favorite games: Two Dots.

Card Sorting

Prepare cards

Group cards

Group categories

05. Ideas to Action

Modular Design System

I started by building a comprehensive components library within Figma that would later reflect in various parts of the app, i.e., colors, typography, setting the grid etc. This included icons, buttons, form elements, error and empty states, show choices cards and content cards. For achieving vertical rhythm, text aligns to a 4px baseline grid and elements align to a 8px baseline grid.

Onboarding

Two onboarding system: one help our users get to know the app, the second one help us get to know our users better and thus providing more personalized insight for their experience.

Study Session

The choices are given clear background of different colors to showcase the choice, the right and wrong answers. A bookmark button for students to mark questions for further review. Per our usability testing, we also added explanations for all four choices so students can learn more from it.

Exam Session

Different from the study session, the exam session won't provide right or wrong answers and explanations until you finish and submit your session. Here we highlighted "Submit" button to remind users that this is the end and lead them to move onto Exam Result and Exam Review page.

Visualize the progress

One major visual element we add to this app is the progress ring. Using red, green and grey, the progress ring provides users with insights into their progress, help them identify which section or subsection they should focus and study more.

Growth engines

Pop-up screens are a major addition to the app. Here, we use inviting UX writing and primary buttons to help guide our users to invite their friends, set learning reminder, cheer for their progress and purchase related contents, thus driving the Viral, Sticky and Paid growth engines for Appitur.

Wait, there's more...

A landing page for a furniture design studio that draws its inspiration from the architectural concept of "tectonic"

A portfolio site for an architecture office that explores the idea of trilogy