Back Projects
HopEnglish redesign
HopEnglish has its own application for the users to learn English through 5 different steps practice, helping they to learn different content and familiar with the language. The first version of it is built in 2012 under limited resource and time.
Due to the limited resource, and it has been around 4 years since its first launch. There are lots of issues that is improvement await. There're a list of problems are waiting for us to do the optimization in order to keep the users learning but not drop the class.
The visual of the older vision tells a lot.
As the UX designer, I was in charge of identifying the pain points by analyzing users' data, feedbacks. Then proposed with new design solution for each problem with priority. Also designed all the wireframe flows for collaboration with UI designer and develop team afterward.
Identify pain points > New solution > flows > wireframes > behavior specs
Here I want to mention two of the highlights which is simple but subtle enough.
The sentence re-structure challenge
The objective of this step is straightforward: to aid users in comprehending sentence structures and concepts by arranging random blocks in the right order based on the audio instructions. In the previous version, users had to drag blocks to the appropriate location, which led to two significant issues. First, once a block was moved to the right position, it wasn't locked, meaning that moving a block could unintentionally disrupt the sentence's order or unexpectedly complete it. Second, the sentence order was randomized, making the challenge difficulty inconsistent. User behavior data confirmed this issue, with the step displaying higher variation in completion time than the expected normal distribution. Additionally, new users were dropping out at a higher rate due to the unexpected result. This step should be relatively simple, but the data indicates that improvements are needed.
However, The purpose of this step is helping users to understand the structure. The dragging isn't an important interaction.
Therefore, in our new design, we simply change the interaction from dragging to clicking. As long as the user clicks at the correct block, block would disappear from clicking area and be displayed at the top. Simple interaction but decrease all the unexpected result.
Progess system
The system comprises multiple layers of progress naturally. A lecture may be divided into several courses, each course containing 5 challenges, and each challenge having multiple sentences to teach. We cannot simplify the complexity without compromising the education principles. However, we understand that the perception of progress significantly affects the motivation to learn. Therefore, we want users to feel the progress they make on each small step to encourage them to continue and ultimately achieve the learning outcome. To accomplish this, we have added micro-animations to each layer, ensuring that users can see their progress clearly.
So what we did is simple change the shape/expression of each layers to increase clarity. Make sure that they would actually see the progression by adding more micro-animation.
We emphasis the perception to increase the motivation and lower the confusion of not know where the class is.
It was my first project to revamp a whole application inside out. And what I want to record and share the most is that
Small, simple design change could be significant and interesting.
That's the reason I chose only two of the small design example from it to remind myself to keep the design simple.
