NOVA: Helping English learners practice speaking through real-life scenarios

Client

NOVA

Role

Product UI Designer

Services

UI,Design Direction, Mini Design System

Collaborators

Thuta (UX), Swan (PM), Min (Dev)

Tools

Figma, Ai, Ps

Timeline

2024, 3 months

NOVA is an AI-powered app that gives feedback and targeted suggestions to enhance users’ speaking abilities—making language learning more engaging, practical, and effective.

Choose Chit Chat
(Role Play Scenario)

Talk with NOVA
(AI speaking partner)

Get detail feedbacks
after the session

Improve their profile

Translating NOVA’s vibrant brand identity into the digital space

My objective as a UI Designer was to capture its brand essence while ensuring usability, and functionality. Nova’s brand identity is all about brightness, new beginnings, and significant impact. The name suggests that the app can illuminate the path to language mastery and bring a fresh, impactful approach to learning.

Although NOVA arrived with a beautifully crafted brand identity—designed by my friend Chue—it was primarily intended for commercial use. The digital guidelines were either missing or underdeveloped.

This led to a challenge: how could I adapt this identity so that NOVA maintained a consistent look and feel even on screen?

Defining principles for a cohesive digital identity

To shape how colors, typography, buttons, and cards should visually represent NOVA, a clear set of design principles was established. These principles define the app’s digital identity and serve as a guide to ensure every visual element in the interface feels cohesive and true to the brand.

Spaciousness

We design with openness and clarity to ensure every element is easy to navigate and understand.

Continuity

Interactions are built to feel natural and continuous, guiding users smoothly through their learning journey.

Luminosity

We use light, contrast, and focus to draw attention, energize the interface, and enhance comprehension.

Vibrancy

Color and motion are used with purpose to reflect NOVA’s optimistic spirit and keep the experience engaging.

Extended the brand colors to fit the product needs

To address the diverse needs of the interface, the original five core brand colors were expanded into a system of 30. A breakdown of the new color palettes is as follows.

Extended
Utility
palette

The original black and white backgrounds were expanded into 12 tinted tones, forming the foundation for 80% of the interface. A subtle purple hue was added to create visual harmony, with each tone carefully selected to ensure clarity across both light and dark usages.

Initial
Brand
colors
Extended palette for digital use

Primary Brand Color

Palette Decorative Purpose

The primary brand color was initially unclear, so in collaboration with the brand designer, we established bright blue as the primary color—reflecting both the NOVA concept and its connection to the education sector. Two additional darker shades were introduced for interactive use.

Red and green were designated for status indicators such as error and success, while other colors were set as decorative, with one extra darker tone added for interaction.

Newly added Decorative palette

New colors and gradients were introduced for use in different places like NOVA Premium, reward system, speaking experience, and proficiency levels.

The new color palettes are applied as follows.

Gamified reward
features

126

Earth

62nd place

180

Day Streak

32

S

M

T

W

T

F

S

160

Small Talk at a Coffee Shop

3

6m

80

Call-to-action
Elements

Language-level
Indicators

Dark Background Levels for
Nova Interface

Lvl -1

Ground

Lvl 1

Lvl 2

Super NOVA
(Premium Plan)

Super NOVA

Super NOVA

Defined the brand typefaces to capture NOVA identity

C

h

i

l

l

a

x

PRIMARY TYPEFACE

Semibold

Medium

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9 0 !@#$%^&*( )_+

With the brand designer, Chillax was introduced as NOVA’s new primary typeface. With its geometric forms and rounded corners, Chillax strikes a balance between futuristic and casual, aligning with NOVA’s advanced yet approachable approach to language learning.

r

S

o

a

SECONDARY TYPEFACE

Bold

SemiBold

Regular

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9 0 !@#$%^&*( )_+

Sora was used for body text and buttons for its readable and modern form. Its geometric structure fits seamlessly with NOVA’s space-inspired theme while ensuring clarity in all type sizes.

The result is a highly curated set of UI styles where all visual elements work in harmony.

All while staying true to NOVA’s core design principles.

Highlight 1 of 2

Making speaking exercises more immersive and engaging

A dynamic stellar background was added during speaking exercises, making users feel more immersed, as if they were speaking in a cosmic space. This visual element enhances engagement by creating a sense of wonder and focus during practice.

Highlight 2 of 2

Using light to differentiate the 'Super NOVA'

Super NOVA is the premium version of NOVA where users can have personalized training. In designing Super NOVA, brightening the NOVA logo simply captures the concept of real life 'super nova' and signals its premium status. This visual cue reinforces the idea of elevated experience and exclusivity.

Building a scalable, consistent future with a flexible design system

To maintain visual consistency, accelerate the design process, and support scalability, a comprehensive UI style guide was created early in the project. This included: Tokenized color systems, spacing scales, layout patterns, and brand-aligned graphic assets.

The NOVA interface is built on a two-level color token system. Base tokens define core visual values such as hex codes, spacing, and border radius. Contextual tokens specify where these colors are applied within the interface. Each token is designed to reference another, creating a system where a single visual change can update multiple parts of the interface. This ensures consistency across the design and keeps everything in sync with development.

color-blue

#64B7FF

#62B7FF

color-brand-blue

color-blue

color-text-brand

color-brand-blue

color-surface-brand

color-brand-blue

Base
Tokens

Contextual
Tokens

Key learning

Collaboration is vital at every step of the design process

Setting a strong visual foundation early in the process speeds up the workflow for both design and development. Collaborating with the brand designer made the transition to an interactive space smooth, ensuring brand consistency and recognizability in the app. Agreeing on token naming across design and development also streamlined adoption in the codebase.

© 2025, YNPO.

Get in Touch

Mail
Mail
IN
IN
BE
BE
IG
IG