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.

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.

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 Scenarios)

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.

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.

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?

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?

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.

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.

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 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 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 neutral 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 palette
Extended palette for digital use
Decorative Palette
Primary Palette

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

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

Call-to-action
Elements

Language-level
Indicators

Language-level
Indicators

Dark Background Levels for
Nova Interface

Lvl -1

Ground

Lvl 1

Lvl 2

Dark Background Levels for
Nova Interface

Lvl -1

Ground

Lvl 1

Lvl 2

Super NOVA
(Premium Plan)

Super NOVA

Super NOVA

Super NOVA
(Premium Plan)

Super NOVA

Super NOVA

  • Language-level
    Indicators

  • Dark Background Levels for
    Nova Interface

    Lvl -1

    Ground

    Lvl 1

    Lvl 2

  • 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

  • Super NOVA
    (Premium Plan)

    Super NOVA

    Super NOVA

Defined the brand typefaces to capture NOVA identity

Defined the brand typefaces to capture NOVA identity

Defined the brand typefaces to capture NOVA identity

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Create a free website with Framer, the website builder loved by startups, designers and agencies.