top of page
Project Description
Material & Visual Banner.jpg

Visual Design & Material Design

@ LingoAce

My role:

  • Solo Product Designer

  • Visual Designer

  • Graphic Designer

  • Illustrator

  • Animator

  • Motion Designer


Work Project



Jul 2022 - Current


  • Head of Brand (1)

  • PM Lead (1)

  • PM (1)

  • Engineer Lead (1)

  • Engineer Team (5)

  • Market Team (?)


World Map.png

Expand the oversea market

LingoAce is a edu-tech company established @2017. It grew rapidly during the pandemic. @2022, LingoAce wants to expand the oversea's market thus it wants to upgrade its brand identity, visual, user experience on its digital products.

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.

Tablet-Headsup cards interaction.gif
滚动动画Book Flow.gif

Visual & Material Design

Visual · Design System · Motion · Graphics · Interaction · Materials · Mobile · 2023

A 'functional' Visual System

A good chance to solve systematic problems

The existing app has many accessibility problems, and 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.

The whole view is creating visual noise to users


Interaction is not clear. 

Contents are way too small to read.

Too many pure decorative elements. Visual elements should be functional and help users digest info, not confuses users.

Color elements were used in a similar frequency, it distracts users and create visual cluster.

The color cyan & orange only got a 1.6 & 2.2 score in accessibility testing.

It doesn't suit for using a background or a button.

Due to responsive problems (it uses hard scale to fit screen instead of adaptive designs), when the screen is less than 414px in width, the fonts become very hard to read.

Contents are way too small to read.

12 font styles, 6 buttons styles are used in the same main panel and used as different functional contents (buttons and texts). Users will need more efforts to distinguish what is what. 

Readability & accessibility issue.

Example 2: Inconsistent  and confusing interactions


The tittle fonts/cancel fonts/option fonts and the selected/unselected status are not distinguished.

The formats are not consistent either.

Inconsistent interaction.png

After click, the button become an unelectable indicator, it mixs the functions in same space. Users will get confused after operation.

Visual Exploration

Vote the visual direction on Low-Fi

The visual design was selected through a voting process. After confirming the wireframes, I collaborated with a bunch of stakeholders, parents, and children to vote on several design options.


While some initially favored flashy decorations to capture attention, I found that when I asked them to quickly identify functions and structures on the interface, a high-contrast, structurally clear design helped users read information and recognize logic more effectively.

1st iteration

1st iteration.png

2nd iteration

2nd iteration.png

Sturctualize the app with Visual

Increase information conversion efficiency

I hierarchically organized all elements in terms of visuals and layouts, including between screens, within individual pages, and information within page cards.


Additionally, I functionalized all visual elements, reducing visual noise. This enables users to focus on the content itself, facilitating intuitive information scanning instead of bandwidth-intensive reading and significantly increasing information conversion efficiency.

Hierarchy between screens

Screen levels distinguised by color weights

Levels of screens.png

Hierarchy in-between a page

Page functional level & info hierarchy that distinguished by layout

Functional levels.png

Hierarchy in-between a card

Card info hierarchy.png

Logic relationhip in-between information

Use the visual layout to establish the logical relationship between each section and element.

Old Design: 

Card info level O.png

New Design: information hierarchy distinguished by visual layout

Layout & logic.png

Form a consistent cognitive pattern

Use colors to indicate a type of info

All cards, whether for information or functions, are consistently placed. This fosters a recognizable pattern for users, facilitating quick comprehension during scanning. Using fixed colors to represent card types aids rapid identification, making it easy for users to re-engage with the app after periods of inactivity and adapt to different platforms.

Cards from mobile & tablet apps

Cards 1.png
Cards 2.png

Example: Use brand colors to distinguish different programs and assignments.

Color indicator.png
Assignment Cards.png

Responsive Design


To view more of the responsive design, click here: View project ↗

Mimic real physical experience

Motion Designs

Simulating real-world physical interactions can help users intuitively understand the logic and interactions between components, as well as pace their information absorption. In this update, I incorporated numerous motion designs to guide users in understanding the app's functionality and to align the app with trendy aesthetics.

Example 1: Splash screens

Loading Page + gif.gif
Tablet-Wlcomeback anime.gif

Example 2: Home - scroll interaction

Mobile-Home scroll.gif
Tablet-Hone Scroll.gif

Example 3:  Scroll interaction

滚动动画Book Flow.gif
Tablet-Assignment scroll.gif

Example 4: Drag & iPad scroll

Tablet-Menu-scroll interaction.gif

Example 5: HeadsUp cards

Mobile-Headsup cards.gif
Tablet-Headsup cards interaction.gif

Deliver full set of Material Design

Summarized and delivered a Design System




Font styles




Color styles






I organized the whole design file, and collected all the 200+ icons, 28 colors, styles of buttons, 22 fonts, and 23 cross-platform interaction patterns (fill boxes, toggles, selectors, etc.) into a Responsive Design System File and delivered them to our developers (View Project ↗).

Select a suitable Font

From the brand fonts (Quicksand, Sofia Pro Soft) and a suggested font used by the web, we voted 'Quicksand' as our app fonts cos the metrics below:

Selected Fonts metrics

Frame 2608611.png
Selected Fonts metrics.png

Compare fonts with their abilities to present a hierarchy

Font dilivery.png

Compare fonts with their readability

Font readability.png

More accurate UI

Using more descriptive icons and acturate UI to help users recognize the info faster. Based on an open source round-corner set of icon sets (Lowdi-Wireframe Kit), I also create 26 icons to make each action more descriptive, more specific.

Assignment & assignment actions

Assignment actions.png

Icon from scratch

Icon Made.jpg

More accurate interactions

Selection actions


Backward navigation actions


Use accessible colors

Most of our brand colors got low scores in the accessibility testing. So we have to modified the color to fit them into digital product sense. With the subtle gradients we can add a little contrast on the colors meanwhile not break the brand experience.

Fix accessibility before & after

Usability testing.png

Designed, maintain and managed the design team's file

Design System Lib 1.png
Design System Lib 2.png
Design System Lib 3.png
Design System Lib 4.png

Illustrations & Animations

In the small team, we don't have that much of resources, so my previous skills in the digital design can help. Whenever the app needs some illustrations, or animations, I will do my best to support the team and push the process forward.

Illustrate in-app illustrations

Based on our character brand guide, I also illustrate some of the illustrations for our app, for certain notification screens, I made two tones to satisfy a more subtle view.

Example: 2 color tones apply to different scenarios

2 tones.png
Password changed screen.png
Lower tone screen.png

Design and make anime in After Effect

Here is a couple of animations I made for my team to prototype an AI Bot. I used a plug-in called Joystick 'n Sliders to make the sketch and generate the animation.

Example 1: 2 make the animation with After Effects

Tigo Anime with frames.gif

I also designed the logo animation for the company. I sketched the design in Procreate with my iPad and animated them in After Effects.

I made this because we have limited resources so sometimes I have to take care of them as side projects.

Example 2:  Design and made the company logo animation with After Effects

500x500px Export.gif

Different tones of loading circle

Loading - light 2.gif

Design the Mobile & Tablet App Store/Google Play Materials

Example: App store materials

App store materials.png
iPad Store Materials.png


Sometimes it's not the main work. but still enjoyable.

I came from small companies and had much experience as a digital designer before I became a product designer. So I have the skills to support the team. I do enjoy the process and when the resource is limited, I can save lots of time on those side projects and the progress doesn't need to get postponed that much.

Illustrate beforehand has more flexibility to design an app.

The visuals and styles always come with the material designs. Being comprehensive can help me imagine the app's actual view when I design it, even in an early stage, on exactly what the app really looks like.

Student app pic.png

Mobile App

UX Design

Responsive pic.png


Design System

Anchor 2
bottom of page