top of page

Enhancing the Translation Review Workflow. 

Oppia is a non-profit online learning platform that provides a novel and engaging approach for under-resourced learners around the world. 

Timeline

3 month part-time

(shipped)

My Role

Lead UX Designer

Deliverables

User Research

User Flow

Wireframes

Prototyping

High-Fi Mockups

Oppia_Logo_Evergreen.png
Macbook Pro Mockup Light.png

ENGAGEMENT.

COHERENCE.

GUIDANCE.

DESIGN FOR INCLUSIVITY.

In 2022, we set out to redesign the contributor dashboard to make it effective, engaging, and accessible for our contributors.

IMPACT

impact.png
Old homepage.png
Before
Contributor Dashboard - homepage.png
After
THE CHALLENGE

THE REVIEW THROUGHPUT & REVIEWER ENGAGEMENT.

The Contributor Dashboard is designed for volunteers who translate and review classes from English to their local languages. However, as we scale, we have more topics and tasks that need to be reviewed. The old contributor dashboard workflow led to extremely slow work progress and attrition from contributors.

Our high level goals were to increase review throughput & reviewer engagement.

MY ROLE

I led the end-to-end research and redesign of the internal review system to improve the review workflow, including the Homepage, Task page, and Card page.

I worked alongside a UX Writer, Product Manager, 2 Tech Leads and 20+ internal users.

THE SOLUTION

OVERVIEW OF THE REDESIGNED EXPERIENCE

Dashboard home.gif
01

The New Dashboard 

I visualized the impact they’ve created as a “thank you” letter and prompted new translation opportunities whenever they log back in. I also proposed to start a new badge system to motivate our contributors to work on more task and gain values.

To give our contributors a sense of engagement and fulfillment in Oppia community.
23536b7f-5b75-47b5-82e7-2a2c986ca91b.gif
02

Goal-oriented Task Page

To provide reviewers with a smoother workflow they can quickly initiate a new task or continue the WIP.

I designed the new task page in the list view showing the lesson index under each specific topic. Along with the filter, pinning button, and intuitive progress bar, locating and prioritizing tasks is no more a painful scavenger‘s hunt.

6e7faa04-995d-482a-81d4-da05f7b06cff.gif
03

Contextual Card Page

To help our contributors contextualize the task with a high level understanding of the current work.

I designed the new card page with a table of content on the left bar including a toggle where the contributors can choose 2 modes - the focus mode to only see the job-to-be-done and the contextual mode to navigate back through all tasks.

Process
How I got there?
KICKOFF

KNOW WHY & WHO

Before I started to design anything, I want to make sure I cover all kinds of user groups and under which scenarios they will be using the dashboard.

USER RESEARCH

START FROM THE USER

I kicked off the process with User Interview because I wanted to make sure the design decision is aligned with users’ needs. After talking to internal users, I realized the problem was more complicated than I expected. This is because Experienced users and New users have different expectations when they log in to the dashboard.

interview.png
Experienced Users
New Users
EXPERIENCE AUDIT

KEY INSIGHTS

Keeping the nuanced expectations in my mind, I started a comprehensive experience review of the current experience and found some key issues of the existing design.

LOW ENGAGEMENT

Indifferent homepage with no IA in the homepage discourage our contributors to proceed work.

image 1.png
INSUFFICIENT CONTEXT

No context indicating the chapter and high level overview of the task confuses reviewers about the next step.

image 2.png
CONFUSING NAVIGATION

Difficult to locate the tasks with lack priority of tasks to be done due to random order of the assigned translations shown in the same hierarchy within multiple topics.

INCONSISTENT DESIGN

Varying design components lead more mental stress and effort to find the wanted information.

Group 68.png
REFRAME THE PROBLEM
Poorly designed navigation and visual cues caused the review friction of locating and prioritizing the tasks need to be done.
Challeneg - Decision Making

How might we guide the reviewers to determine the priority level of the tasks so that they can quickly facilitate the work?

Old design.png

Old Task Page

Old Design

No Priority

No visual hierarchy to indicate the importance of the top work nor necessary information give the reviewers no clue of where to start the work.

Frame 34554.png

Iteration1: Sort by Priority

Solution 1

Sort by Date

I ranked the tasks in the order of the publish date, and assign the priority label to the more urgent tasks, and use the pinned section on the top for our users to smoothly get back to WIP.

Cons

But it lacks CTA for the reviewer to start a new task and make the dashboard lowly automated. 

Frame 34555.png

Iteration 2: Sort by Progress

Solution 2 

Sort by Progress

I designed the 2nd solution showing the quantified progress for reviewers to decide what to work on. Along with the pinned tasks to make it easier for the reviewer to continue the work. 

Cons

Lack of visual hierarchy on the different tasks + extra effort scrolling down

Final Decision
Frame 34556.png

Final decision

Final Solution 

New Task Page

1. Using the status of task as CTA to help review take more specific actions

2. Provide the reviewers with the information such as who is directly responsible for the project so they can communicate about the process and revise suggestions.


3. Optimized the clarity through data visualization

SOLUTION HIGHLIGHT

Contributor Dashboard - homepage.png
Contributor Dashboard - homepage-2.png
New Dashboard Home
Dynamic Banner 
Frame 34548.png

Dashboards are used for proving the most relevant and timely information.The plug-and-play banners were perfect for reviewers. Informing the user of key improvements, alerts, or anything that needed to grab their attention could be done using these banners.


 

Progress visualization
Frame 34549.png
Contributor Dashboard - homepage.png

Previous

Previous

New Review Card Page

The metric shows a breakup of various sources contributing to the overall number.
Information such as percentage increase/decrease lets the reviewer know if there is an improvement or not.

Contributor Dashboard - homepage-1.png
New Review Card Page

REFLECTION.

USER

is the center of design.

The interview with the end user in the early stage informed me of different approaches to address “Engagement”. Always actively listen to what user actually want.

is the key.

COMMUNICATION

Through the feedback sessions with different stakeholders , I learned how to communicate my design rationale behind my human-centered approach in a more effectively way.

 plays a role in design.

LEADERSHIP

As the lead designer who is fully responsible for this project, I need to organize feedback session both with product manager and end users. In the process, I learned the significance of taking the initiative.

Previous

bottom of page