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

Client

NOVA

Role

Product UI Designer

Services

UX, UI, Design Direction, Mini Design System

Collaborators

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

Tools

Figma, Ai, Ps

Timeline

2024, 3 months

overview

Many intermediate Burmese learners of English struggle to improve their speaking skills due to limited exposure to the language, few opportunities for real-life practice, and a lack of suitable speaking partners. NOVA is an AI-powered platform designed to make English speaking practice more accessible, engaging, and effective through real-life scenarios, interactive role-play sessions, and detailed, personalized feedbacks.

overview

Many intermediate Burmese learners of English struggle to improve their speaking skills due to limited exposure to the language, few opportunities for real-life practice, and a lack of suitable speaking partners. NOVA is an AI-powered platform designed to make English speaking practice more accessible, engaging, and effective through real-life scenarios, interactive role-play sessions, and detailed, personalized feedbacks.

overview

Many intermediate Burmese learners of English struggle to improve their speaking skills due to limited exposure to the language, few opportunities for real-life practice, and a lack of suitable speaking partners. NOVA is an AI-powered platform designed to make English speaking practice more accessible, engaging, and effective through real-life scenarios, interactive role-play sessions, and detailed, personalized feedbacks.

My Role

While my primary focus was on UI and interaction design, I was involved throughout the entire process—from defining the problem space and conducting interviews to analyzing user insights, ideating solutions, and creating fully custom UI designs and a mini design system.

My Role

While my primary focus was on UI and interaction design, I was involved throughout the entire process—from defining the problem space and conducting interviews to analyzing user insights, ideating solutions, and creating fully custom UI designs and a mini design system.

My Role

While my primary focus was on UI and interaction design, I was involved throughout the entire process—from defining the problem space and conducting interviews to analyzing user insights, ideating solutions, and creating fully custom UI designs and a mini design system.

Nova's goal

NOVA came to us with the goal of helping Burmese learners—especially students and professionals—build confidence and fluency in speaking English more quickly with the help of AI.

Nova's goal

NOVA came to us with the goal of helping Burmese learners—especially students and professionals—build confidence and fluency in speaking English more quickly with the help of AI.

Nova's goal

NOVA came to us with the goal of helping Burmese learners—especially students and professionals—build confidence and fluency in speaking English more quickly with the help of AI.

Primary Research

Conducted research To understand users' struggles and validate the need of practice partners

To understand how intermediate Burmese learners currently practice speaking, what prevents them from improving, and to validate the need for speaking partners, I conducted two interviews while my partner conducted three, with participants ranging from lower intermediate to advanced proficiency.

Primary Research

Conducted research To understand users' struggles and validate the need of practice partners

To understand how intermediate Burmese learners currently practice speaking, what prevents them from improving, and to validate the need for speaking partners, I conducted two interviews while my partner conducted three, with participants ranging from lower intermediate to advanced proficiency.

Primary Research

Conducted research To understand users' struggles and validate the need of practice partners

To understand how intermediate Burmese learners currently practice speaking, what prevents them from improving, and to validate the need for speaking partners, I conducted two interviews while my partner conducted three, with participants ranging from lower intermediate to advanced proficiency.

5

Learners

18 - 27

Age Range

Lower Intermediate-Advanced

Proficiency Level

Pain Point 1
Difficulties in practicing speaking

All learners find it difficult to access good speaking partners who can also provide quality feedback.

Three feel shy or lack confidence when speaking with strangers due to the lack of exposure and practice.

Pain Point 2
Irrelevant and boring topics

All learners are less motivated to practice conversations that are not relevant to their lives, but become much more motivated when topics are authentic, relevant, and aligned with their lifestyle.

Pain Point 3
Ineffective feedback system

All participants highlighted the need for real-time correction on pronunciation, grammar, and vocabulary.

Pain Point 4
Unmotivated by traditional text book exercises

Learners find traditional, academic-style lessons unengaging and struggle to stay motivated, as they prefer more casual, fun, and interactive speaking experiences.

Problem Statement

Burmese English learners with lower-intermediate proficiency or above often struggle to improve their speaking skills due to limited exposure, a lack of practice partners, and insufficient feedback systems, which in turn hinders their progress and confidence in real-life conversations. How might we help learners build real-world speaking confidence by using AI to simulate authentic interactions and deliver supportive, engaging feedback?

Problem Statement

Burmese English learners with lower-intermediate proficiency or above often struggle to improve their speaking skills due to limited exposure, a lack of practice partners, and insufficient feedback systems, which in turn hinders their progress and confidence in real-life conversations. How might we help learners build real-world speaking confidence by using AI to simulate authentic interactions and deliver supportive, engaging feedback?

Problem Statement

Burmese English learners with lower-intermediate proficiency or above often struggle to improve their speaking skills due to limited exposure, a lack of practice partners, and insufficient feedback systems, which in turn hinders their progress and confidence in real-life conversations. How might we help learners build real-world speaking confidence by using AI to simulate authentic interactions and deliver supportive, engaging feedback?

Ideation

What Builds Speaking Confidence

During the ideation stage, we explored what truly helps learners build speaking confidence. We discovered that confidence grows through-

Ideation

What Builds Speaking Confidence

During the ideation stage, we explored what truly helps learners build speaking confidence. We discovered that confidence grows through-

Ideation

What Builds Speaking Confidence

During the ideation stage, we explored what truly helps learners build speaking confidence. We discovered that confidence grows through-

Consistent real-life speaking exposure

Motivation that comes from enjoying the learning process—where learners feel encouraged to practice, make mistakes, and see their improvement over time.

Ideation

Translating painpoints into core features

Based on these insights, we focused on creating an experience that makes practice feel authentic, rewarding, and continuous. We brainstormed features such as:

Ideation

Translating painpoints into core features

Based on these insights, we focused on creating an experience that makes practice feel authentic, rewarding, and continuous. We brainstormed features such as:

Ideation

Translating painpoints into core features

Based on these insights, we focused on creating an experience that makes practice feel authentic, rewarding, and continuous. We brainstormed features such as:

AI role-play simulation

that mirror everyday situations, helping users speak naturally and apply real-world vocabulary.

Instant Feedback Loops

to highlight pronunciation, grammar, and fluency improvements.

Progress tracking and gamified rewards

to motivate consistent engagement and celebrate milestones.

User flow

User flow for intuitive role play experience.

We mapped out all possible session flows to minimize potential errors and ensure a smooth experience.

User flow

User flow for intuitive role play experience.

We mapped out all possible session flows to minimize potential errors and ensure a smooth experience.

User flow

User flow for intuitive role play experience.

We mapped out all possible session flows to minimize potential errors and ensure a smooth experience.

Before Chit Chat

During Chit Chat

After Chit Chat

Designing

Making the Concept Tangible Through Lo-Fi Flows for Role Play

We started working on lo-fi to make the idea tangible. The flow comprise of discovering interesting chit chat (role play scenarios), see the role play overview, engage in the conversation, and get feedback and reflect mistakes.

Designing

Making the Concept Tangible Through Lo-Fi Flows for Role Play

We started working on lo-fi to make the idea tangible. The flow comprise of discovering interesting chit chat (role play scenarios), see the role play overview, engage in the conversation, and get feedback and reflect mistakes.

Designing

Making the Concept Tangible Through Lo-Fi Flows for Role Play

We started working on lo-fi to make the idea tangible. The flow comprise of discovering interesting chit chat (role play scenarios), see the role play overview, engage in the conversation, and get feedback and reflect mistakes.

Chit Chat Overview

In chit chat overview, users will get to know the scenario they’ll engage in, speaking tasks they’ll have to accomplish, and learn required vocabularies.

During the Session

During the conversation, this is where our core feature comes into play. While AI behavior was partially outside our direct control, we defined parameters to guide the experience. The AI partner has to be an active listener—curious, contextually relevant, and highly focused—while maintaining smooth transitions and natural turn-taking.

Additionally, users can seamlessly switch between voice and text modes, complete tasks, and receive immediate rewards upon completion.

After the Session

Users are provided with an estimated CEFR and IELTS level, overall performance feedback, and detailed insights into pronunciation, grammar, and vocabulary, along with a breakdown of the mistakes made during the conversation.

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.