Overview
Problem
All newly recruited coders are required to practice on the internal ONLINE JUDGE website, but they feel frustrated with the platform and are reluctant to use the platform once they reach the required score. They complained that the structure of the platform was too complicated to complete the exercises efficiently. They have to discuss the problems via third-party software. What's more, the only visible achievement - the score, is not enough to motivate users.
Info.
Group Project (2 members)
My Role
Team leader, UI & GUI Designer
Duration
October ~ December 2016
Solution
Redesign the entire platform: efficient one-stop program center, proactive sharing recommendation mechanism, gamification growth system and points consumption mechanism.
Brief Output
Background
Huawei ONLINE JUDGE was an internal website for over 90,000 HUAWEI coders, especially the new employee, to practice their coding skills and take the test. However, most of the employees complained about the bad user experience of the platform. The department which ran the platform sought help from the design department to redesign the whole system.
Challenge
How might users be willing to keep using the website to practice?
Understanding the User
I distributed and collected more than 200 online questionnaires and interviewed 8 users. Then I drew the persona and concluded the top 3 pain points.
Persona
Jack is a 22-year-old new developer at Huawei. He is required to practice the coding ability on Huawei ONLINE JUDGE until he reaches the minimum score. Sometimes he would share the programs with his friends to discuss how to resolve the programs.
Goals
Achieve the required score quickly.
Improve coding ability.
Share with friends.
Pain Points
He is very inefficient in selecting programs, and is very confused about the web structure. He has to use other applications to share the program. He lacks the motivation to continue practicing.
Insight 1:
Efficiency is essential for daily practice.
Because the program's names are challenging to understand, the users need to switch repeatedly between the list page and the details page. They need to learn the details of the program before making decisions.
Users have to download the program and complete it on the computer. Then upload the program to the original page.
Insight 2:
Simple and quick sharing increases user stickiness.
Users would like to share the easy programs with their friends to help them achieve scores, and share the challenging programs they failed to pass for help.
However
They need to copy the program name and share it via third-party software. Their friends enter the name to search on the website.
Insight 3:
Feedback(score) is insufficient to satisfy the user.
The score is the only evident feedback that the user can get from each exercise. The initial purpose of using the website is to achieve the target score.
However
After the user reaches the minimum score, the number loses its meaning. As a result, users lose their motivation to continue using the platform.
Design Analysis
Based on the insights, I transformed the challenge into three design questions and brainstormed them.
Reframe Design Question
1. How might the user improve the efficiency of completing the program?
2. How might the user share the programs quickly and easily?
3. How might the feedback become motivating?
Brainstorm
I tried different proposals to resolve the design questions and here, I displayed the ideation of the final solution.
How might the user improve the efficiency of completing the program?
Ideation
If a user wants to complete a program, he/she needs to perform at least 5 steps:
Switch between the program list pages and detail pages repeatedly to choose the program;
Download the program;
Finish in his/her own computer;
Upload the program;
Check the result at the result page;
Therefore, the design should enable the user to finish all 5 steps in ONE PAGE, or make them feel like that they are in ONE PAGE.
Experiment
I used the paper prototype to represent the web page and tried to merge the serval pages into ONE PAGE.
Result
Based on the experiment, I drew the wireframes of the new structure.
How might the user share the program quickly and easily?
Ideation
When do the users tend to share the program?
According to the user research, user tended to share the program when they finished.
Therefore, the design should recommend the user to share the program when they finish.
Result
Construct an internal social center and recommend the user to share when he/she finishes the program.
How might the feedback become motivating?
Ideation
According to the characteristic of the user, make the feedback system more interesting.
From the result of the interview and questionnaire, I concluded that most of the users are undergraduates and graduates students. They love games and popular stuff.
Give the feedback system currency attributes.
These scores could be used to exchange with something useful for the user, instead of pure display.
Therefore, the design should construct a gamified growth system and serve the user for some upper functions with the consumption of their scores.
Result
Construct a hierarchical role-playing system. Allow users to use points to purchase answers to the program.
Design
Wireframe and GUI
After the detailed wireframe design, I conducted the GUI pages.
Key Features
Three features make users willing to use the website.
Efficient One-Stop Program Center
I redesigned the program list page with flexible structure.
When the user selects a program, the program's detailed description will be displayed without switching pages.
Therefore, the user can efficiently complete the selection process.
Most importantly, I tried to switch the local encoding mode to online encoding mode, which was approved by the product department.
When the user decides to do the program, the entire page will slide to the left and the coding space will slide out of the right. The user can read the description while writing the code. Therefore, the user could finish the coding process efficiently.
The new structure also allows the user to check the result without switching to other pages.
In short, the user can efficiently finish the whole process of coding practice.
Proactive Sharing Recommendation Mechanism
After the user completes the program, the system will run the program and provide feedback immediately. I added an additional sharing recommendation section in the pop-up window. It recommends the other users who are in the same department or have frequent chats with the user. Of course, users can share the program easily and efficiently with their friends.
The user who receives the shared information can view the program description directly and discuss it with his/her friend.
In short, the user could share the program easily and quickly.
Gamification Growth System and Points Consumption Mechanism
I transformed the tedious programming into a role-playing system. It involves three significant features.
Visualized Growth System
When a new user logs into the platform, he/she can select one of the five roles he/she likes.
The new platform offers five roles for the user. Each series of characters has five forms.
Once the user acquires the required scores, their level will be upgraded, and after reaching a certain level, the character image will evolve.
Reward Training System
Gamification, or making a non-game application more engaging by making it game-like, should not make tasks easy for the people undertaking them. It should make them harder, says Jane McGonigal.
However, programming plays a depressive role in the process of using websites.
Thus, simple and repetitive daily tasks can help users gain a certain sense of accomplishment and improve user retention.
Every time the user finishes a simple task, he/she gets a few points which could accelerate the role upgrade. The platform records and displays how users complete tasks on a weekly basis. Whenever users log in four days a week, they will get additional bonus points.
Points Consumption Mechanism
In addition to being used for display, scores also need to have more excellent value so that users have sufficient motivation to obtain it.
Therefore, users could use their points to purchase standard answers for the programs. The premise is that users have answered the program before. The mechanism endows the points currency attribute, enhances the practical value of the points, and helps users learn better from the program they failed.
Recap
The users much appreciated the proposal during the user tests. However, due to the workload of the development and intense schedule, not all the ideas were realized in the final published version. In the end, compared to the 12% user retention rate of the old version of the platform, the user retention rate of the new version remained above 70%.
Looking back at my first leading project, it was not mature enough or comprehensive sufficiently, but it combined my insights into users, my thinking about the impact of corporate ecology on products, and my learning and experimenting with gamification design. It made me realize that interaction design cannot be separated from its objects and the user's situation. It should be a comprehensive solution.