Mockups of Aha editor webpage

Aha Editor

A platform for tutors to create mock exams
2022

Aha is an EdTech web app to help students learn and earn at the same time by rewarding achievements with crypto and NFTs. While working at Aha design team, I got to design a system for tutors to create exam problems.

The Challenge

The system is complex and only supports one problem type.

Tutors could only create multiple-choice questions for Math and English with the current Editor. To meet the users' needs, problem types such as short answers, true or false, and Mathematical proof are also critical for students to practice. On the other hand, the current interface was complicated with lots of settings and not user-friendly for new tutors to work on it directly.

My Role

During this project, I collaborated with tutors, project managers, and engineers to redesign the user flow and interface of the system. Starting from figuring out what didn't work in the current system, I worked with tutors to understand how to create a question and prioritized their needs. Later in the design process, I built the main user flows as the structure to create the IA and design intuitive user interfaces accordingly.

In this project, my responsibilities include:

  • Analysing what failed in the current system
  • Synthesizing the users' needs and engineering requirements in the design
  • Creating the main user flows and IA of the platform
  • Applying the style guide to new interfaces

How Might We

How might we enable tutors to create different types of problems in Editor intuitively?
Solution

Using four different layouts to create all types of questions.

I conducted research on the types of problem formats for all exams we aim to build and collaborated with tutors and engineers to understand the needs of both ends. Eventually, all problems are categorized into four kinds of layouts in Editor.

Tutors' User flow

Creating questions from scratch V.S. using templates

After understanding both tutors' and admins' requirements, there are two main user flows created. For tutors, it's important to make the pre-setting process straightforward and intuitive. Users should be able to select which exam, which subject, and what problem type easily before creating the problem. On the other side, the feature of using templates was required and should be obvious enough for users to use it.

Admins' user flow

Review and release questions

All questions need to be reviewed before being released. Therefore, some features are limited to admins only, such as releasing questions and editing tags.

UI Design

Using design library to redesign the interface

Drawing the user flows helped reveal that some screens were missing out in the current design, such as a page of all questions created by the users, and a page for admins to edit tags. Adding those screens allowed users to complete the task more efficiently. On the other side, all elements were redesigned by using the elements from our design library.

Before

Since the previous version was built solely by engineers, it mainly served as a data space to store all of the questions yet was not easy for later maintenance. Since the elements didn't share the same style, the screens looked chaotic when lots of data were shown together. With tons of information required to fill in, it's difficult for users who are not familiar with the system to start creating questions.

The Most Challenging Part

Fulfilling the engineering requirements without letting them frustrate the users

After

During the process of designing the interface, I found that it's extremely important to understand what and why the information was required in a specific section so that I could play a role as a translator between the end users and engineers. All four question layouts share the same template with only one section different to keep the consistency.

Looking back at it

Designing this system was a big step for me and forced me to organize my messy thought in a short time. Instead of being creative, this project stressed the importance of understanding real users' needs and considering engineering requirements while designing. Though the research took more time than expected, the insights are critical for building it.

Although the design is done, I'd like to go back and spend more time exploring more edge cases for this project to get a sense of what problems couldn't be created by it. Also, I'd love to do a usability study next to receive feedback for the design iterations. Now, this product is still just a baby. :)

See more...