top of page
Project Description
Mobile App Design.jpg

LingoAce Mobile App UX Design

@ LingoAce

My role:

  • Solo Product Designer

  • Visual Designer

Type:

Work Project

(In-develope)

Time:

Jul 2022 - Mar 2023

Team:

  • Head of Brand (1)

  • PM Lead (1)

  • PM (1)

  • Engineer Lead (1)

  • Engineer Team (5)

  • Market Team (?)

Background

World Map.png

Motivation: Expand the oversea market

LingoAce is an edu-tech company established @2017 in Signapore. It snowballed during the pandemic. @2022, LingoAce wants to expand the overseas market thus it wants to upgrade its brand identity, visual, and user experience on its digital products on its 2C side of digital products, to make it a world-class company.

Design Mobile & Tablet App, and Design System

As the new Mobile/Tablet design received very positive feedback from customers and the internal team, our product team asked me to make a design system based on the new design to extend that to other platforms.

Because it's a big project involving UX research, UX design, visual design, design system design, responsive design, and material design, I will divide it into 3 parts on the website.

Mobile.png

 Mobile App UX Design

Large Scale · Solo Project · iOS/Android · EduTech · 2C · SaaS · Product Design · Visual Design ·  2022-2023

Narrow Down Design Tasks

Where we should start the project? Here is what I've done to narrow down the board goal into actual design tasks:

Start the project with audits

At that time, I had recently joined the company. So, I took the opportunity to audit our competitors' products and the company's existing products, to offer a fresh eye critique. 

I listed all the areas that I believed could be improved, compiled them in a report, and hosted workshops with the team to see if my assumption was valid. 

Picture: Reports on competitor audit & current product audits.

Competitor Audit.gif
App Audit 3x.gif

Based on the team’s feedback I got several directions to explore. Though they don't stand for users, it's enough to kick off the project. 

Then, as the project progressed and with a growing understanding of the users, I gradually identified more user needs and worked on solutions. By the time the project was delivered, we had accumulated 12 PRDs, introduced a new functional panel, revamped two major functional areas, optimized three major flows, and made countless minor improvements down to individual icons and interactions. The entire user experience across all pages was refined.

 

Below, I will list some aspects that I believe would make suitable case studies to share:

**Though there are many flows changed, to cut the reading length, I will only list 1 flow that better demonstrates my UX research/design process here.

 

I'm more than happy to walk through more details if you're interested. Just DM me with an email.

Optimize the Class Booking Experience

Motivation

The booking flow is the most important way to consume class points and the major conversion channel of the app. So we all decided to prioritize this flow ahead.

Research resources

While we have formal questionnaires and interviews, I prefer some ad-hoc user research. This allows users to relax, and in casual interactions, they often reveal deeper needs unintentionally.

In this research, I gained many insights through offline events organized by the company, where I interacted with parents, children, and teachers.

 

These offline events offered free classes to students, so many parents would download our app during the event to schedule classes. Whenever this happened, I would engage in random conversations and observe their reactions during the booking process.

What I found in the current flow

The current flow: 5 steps

Step 1.png
Step 2.png
Step 3.png
Step 4.png
Step 5.png

Users keep clicking ‘Schedule’ to start booking

When parents hear about 'book classes', they instinctively look for a calendar.

A significant number of parents tend to pause briefly and then try clicking on the 'Schedule'. However, this 'Schedule' button is only for viewing the existing class.

 

Initially, we thought this confusion was due to the term 'Schedule,' which implied booking, misleading users. We later changed it to 'Calendar,' but many parents still clicked on this section.

Users keep seeking a calendar view for reference

 

In further observations, I even noticed that parents, during the second step of selecting a teacher's time slot, would sometimes click on the 'Calendar.'

Users sometimes even exit the app and check their Google Calendar to verify their and their child's availability before they make the decision.

It seems that giving a calendar view can help them reduce the uncertainty of going through the next step.

Users expect direct slots after selecting a teacher

Many users mentioned that they've already picked a teacher at this step. However, the first view of the screen is still showing the teacher’s bio.

Hard to refer to an exact day when users scroll deeper

When the screen scrolls down, it’s hard to make users refer to an exact date because there isn't a month or year reference on this panel. They might accidentally select a slot that belongs to the next month.
It causes back-and-forth efforts to confirm with the time.

It’s hard to find scattered slots in a big panel

Sometimes when the teacher's slot is tense, users need to scroll a large area to find available slots.

Users need too much effort to calculate the class cycle

 

When selecting multiple classes, parents are asked to choose the start and end dates for the class cycle.

 

Many parents get stuck at this point because it takes too much effort to calculate.

Furthermore, since our system operates on a points-based course consumption model, if they haven't made precise calculations, they often end up with some remaining credits. As a result, they need to go through the booking process again to utilize the remaining class points.

In fact, parents are not actually concerned about the start and end dates; their primary intention is to consume class points. The end date is merely a rough time reference for users.

User expect a next step on this flow

After completing the booking, the interface remains on the teacher's time slots, causing confusion for many new users.

 

They often ask, 'What's the next step?' or 'Where can I view my classes?'

Even returning users need to click 'back' to access the calendar interface where they can see their scheduled classes.

Conduct research results to design solutions

According to the research, we can see during the booking process, users keep seeking for a time reference. Start booking from a program is counterintuitive. After completing the booking, the interface remains on the teacher's time slots, causing confusion for many new users.

 

They often ask, 'What's the next step?' or 'Where can I view my classes?'

Even returning users need to click 'back' to access the calendar interface where they can see their scheduled classes.

The current flow: 4 steps

New 1.png
Parant App - Calendar -Scroll.gif

Start from calendar

Starting the booking process from the calendar also increased user confidence and significantly reduced the need to navigate external time tools, improving app retention.

Multiple student status in 1panel

In response to parents' feedback, we unified student management on the calendar, eliminating the operation of switching between student profiles.

More conversion points

We also added conversion points below the calendar to boost purchases.

Scroll effect of calendar

New 2.png

Search specific teachers

Many parents come to us through referrals from other parents, so they often have a specific teacher in mind when making their choice. The search function helps them quickly locate and select their desired teacher.

Glanceable time slots

Previously, users had to scroll through a long time bar to find a suitable class time. In our new design, we simplify the process by directly displaying available time slots, making it convenient and saving screen space. Users can now easily associate dates and times for quicker selections.

-1 Step

The selection page directly links time and teachers, allowing users to quickly choose a time on the second page, eliminating a step in the process.

Favorite teachers & Recommend teachers In 1 view

We remember users' choices and intelligently assist them in sorting their preferred and recommended teachers. This helps parents make quicker decisions without the need to switch and search for teachers they've saved previously, as was the case before.

New 3.png
New 3.1.png

+ Optional weekly booking without breaking the experience

By default, they will confirm the booking slot at this step. Still, users can add more weekly slots by consuming their class points. Click the '+' symbol to view the teacher's availability.

Help users make quick decisions

Returning to the core purpose of the process: to help users consume their class points. Instead of complex calculations, we help them determine the end date for point utilization, enabling quick decisions.

Book 1 class as default

Users who don't want to add more classes can continue to use this flow as a regular confirmation page to book a single class.

Calendar reference

Combining optional weekdays with time slots visually establishes a direct connection, enabling users to make confident and swift selections.

Auto-calculate the final class day

Assisting users in estimating the approximate end date of this purchase circle based on the selected frequency of classes and point consumption.

New 4.png

Further guidance to the next step

Users often ask, 'What's next?' or 'Where can I view my classes?' after the booking.

Therefore we added a further step to continue the flow and guide users to be prepared for the class.

Tells where the booked class goes

The most common user's expectation is to view the classes they just booked. So we made the 'Check calendar' the main CTA of this page.

Smooth the whole UX

Smoothen the whole UX

Despite UX flows and functional logic, I also made a series of changes to smooth the whole experience based on many fragmented user feedback I collected.

Brought the Assignment into a independent panel

One of the most frequently used functions is doing Assignments and Checking Assignment reports. Most users only use the 'attend class' feature once or twice a week, while the 'homework' feature is used 5-6 times.

 

However, it only can be directly accessed through the Home page. If users want to check the assignment status and results or reports, they will need to go through 3 steps to reach it:

 

history -> select class -> select assignment-> specific assignment.

Users has to cross 3 steps to reach the report

Old version Assignment.png

This creates a significant disconnect for users, especially new ones. So we decided to put the assignment as an independent panel so users can directly access each assignment type and its report, meanwhile, we keep the direct assignment access from the Home page.

Keep the direct assignment access from the Home page.

HOME - Assignment.png

Direct assignment panel and its 2 sub-pages.

New Assignment.png

Sort all functions and give users right expactations

Because users typically use our product only once or twice a week (sometimes even less), they become less familiar with the App during extended periods of inactivity. It's common for them to completely forget what is what, leading to repetitive attempts to access these function groups to find what they're looking for.

In the new design, we expanded the functions within these collections and added annotations to them. This way, when users click on them, they have a more accurate expectation, and the functions they're seeking become more readily visible and accessible.

Old Design:

Old account page.png
New Account page.png

New Design:

Fill the incomplete flow

There were many incomplete flows that confused users and shut down the experience flow. Users will jump out of the flow if they don't get enough guidance for the next steps.

 

So to keep a retention rate, we connect the flows with further steps guidance, and explorations. So that users will stay in the app as long as possible.

Old version: There's no further step, no action call on the flow

No further action.png

New version: Give clear instructions on what happend, what is next

User guides.png

Give elaborations on confusing parts

Grandparents always complain that they don't know how to use the app, I've tried my best to offer as clear instructions as possible.

 

For the terms that look strange, and UIs that look complex, give an instruction to shorten the recognition process. 

Instructions on confusing & complex sections

Elabrations.png
Coupons.png

Sturctualize the app with Visual

A systematic problem

The existing app has many accessibility problems and the visual is messy. The visual elements cannot help users digest information, on the contrary, they create lots of visual noise and distract user's attention.

Seizing the opportunity to enhance the user experience (BX), I proposed adopting a new visual language and systematizing our visual elements. This approach enabled consistency and improved cohesion throughout the entire app.

 

To cut the reading length, I've separated the visual into a separate case study (View project ↗). I'm showcasing only a few examples related to enhancing the user experience.

Use visual layout to demonstrate logic relationships

Functional levels.png

Form a consistent cognitive pattern

Color indicator.png
Assignment Cards.png

More accurate UI & interaction

Assignment actions.png
Selections.png

Smoothen the interaction

Drag & iPad scroll

拖拽弹窗.gif
Tablet-Menu-scroll interaction.gif

To view more of the optimized visual experience, click here: View project ↗

Summary

The entire project was initially focused on visual changes, but throughout the process, I identified numerous opportunities for improving the user experience, most of which were incorporated as I gained a deeper understanding of our users. By the time we concluded, we had made countless improvements.

 

Listing just the representative ones would take up a significant amount of space. Therefore instead of detailing the conventional wireframe-to-high-fidelity process, I directly showcased the before-and-after design comparisons.

 

This project was extensive and demanding, but it was also incredibly rewarding, and I learned a great deal along the way. It's currently in development, and I plan to provide another update once the project goes live.

S-Wireframe.png
S-LowFi.png
S-HiFi.png
Material D pic.png

Visuals &

Materials

Responsive pic.png

Responsive

Design System

Anchor 2
bottom of page