English Learning App

English Learning App

Redesign of a Web App for seniors learning English.

Redesign of a Web App for seniors learning English.

BACKGROUND: The SEL English Learning App is a web-based app that helps SEL language school students aged 50 and over to practise English. The focus of the development was to create an easy-to-use and visually minimalistic app in a short amount of time.

BACKGROUND: The SEL English App is a web-based app that helps SEL language school students aged 50 and over to practise English.
The focus of the development was to create an easy-to-use and visually minimalistic app in a short amount of time. This led to some weaknesses in the user experience.

PROBLEM: Low utilisation by SEL language school students due to poor usability and lack of key features.

PROBLEM: Low utilisation by SEL language school students due to poor usability and lack of key features.

SOLUTION: Research on how to improve navigation and integrate new features to make the app more user-friendly and fun to use.

SOLUTION: Research on how to improve navigation and integrate new features to make the app more user-friendly and fun to use.
CLIENT
CLIENT
SEL Language School
SEL Language School
ROLE
ROLE
UX/UI Designer
UX/UI Designer
DURATION
DURATION
6 months
6 months
YEAR
YEAR
2024
2024
TEAM
TEAM
CEO, UX/UI Designer, Developer,
Content Creator
CEO, UX/UI Designer, Developer,
Content Creator

English Learning App

Redesign of a Web App for seniors learning English.

BACKGROUND: The SEL English App is a web-based app that helps SEL language school students aged 50 and over to practise English. The focus of the development was to create an easy-to-use and visually minimalistic app in a short amount of time. This led to some weaknesses in the user experience.
PROBLEM: Low utilisation by SEL language school students due to poor usability and lack of key features.
SOLUTION: Research on how to improve navigation and integrate new features to make the app more user-friendly and fun to use.
CLIENT
SEL Language School
ROLE
UX/UI Designer
DURATION
6 months
YEAR
2024
TEAM
CEO, UX/UI Designer, Developer,
Content Creator
Mobile prototype of the SEL English App
Mobile prototype of the SEL English App

Qualitative Research

Gaining insights about the user needs and frustrations.

OBJECTIVE: Finding out what users aged 50 and over old face when learning English and what frustrations arise when using digital tools such as the SEL App.

OBJECTIVE: Finding out what users aged 50 and over old face when learning English and what frustrations arise when using digital tools such as the SEL App.

KEY FINDINGS: When using a language learning app, users want to see how they performed at the end of a lesson. They want to save and learn personalised vocabulary. They are happy when they can listen to audio content. A major frustration for older users is the often overwhelming navigation.

KEY FINDINGS: When using a language learning app, users want to see how they performed at the end of a lesson. They want to save and learn personalised vocabulary. They are happy when they can listen to audio content. A major frustration for older users is the often overwhelming navigation.

ACTIVITES: Conducting five user interviews with the SEL target group, Analysis of the results and prioritisation of implementation in consultation with the CEO.

ACTIVITES: Conducting five user interviews with the SEL target group, Analysis of the results and prioritisation of implementation in consultation with the CEO.
Mobile prototype of the SEL English App

Qualitative Research

Gaining insights about the user needs and frustrations.

OBJECTIVE: Finding out what users aged 50 and over old face when learning English and what frustrations arise when using digital tools such as the SEL App.
KEY FINDINGS: When using a language learning app, users want to see how they performed at the end of a lesson. They want to save and learn personalised vocabulary. They are happy when they can listen to audio content. A major frustration for older users is the often overwhelming navigation.
ACTIVITES: Conducting five user interviews with the SEL target group, Analysis of the results and prioritisation of implementation in consultation with the CEO.
Mobile prototype of the SEL English App
Mobile prototype of the SEL English App

UX Persona

Helga Müller, 67 years, retired teacher, lives in Brunswick

I travel a lot and need solid English so that I can find my way around different countries and talk to people from other cultures.

I travel a lot and need solid English so that I can find my way around different countries and talk to people from other cultures.

GOALS: Helga's main goal is to develop a solid understanding of the English language. She wants to express herself confidently, read English books and understand English television programs.

GOALS: Helga's main goal is to develop a solid understanding of the English language. She wants to express herself confidently, read English books and understand English television programs.

NEEDS: She learns best by repeating, especially when it comes to new words. Multimedia learning resources such as audio texts and videos would be helpful for her.

NEEDS: She learns best by repeating, especially when it comes to new words. Multimedia learning resources such as audio texts and videos would be helpful for her.

FRUSTRATIONS: Helga is discouraged when it comes to mastering new vocabulary. She learns more slowly than before and that she forgets vocabulary more often.

FRUSTRATIONS: Helga is discouraged when it comes to mastering new vocabulary. She learns more slowly than before and that she forgets vocabulary more often.
Mobile prototype of the SEL English App

UX Persona

Helga Müller, 67 years, retired teacher, lives in Brunswick

I travel a lot and need solid English so that I can find my way around different countries and talk to people from other cultures.

GOALS: Helga's main goal is to develop a solid understanding of the English language. She wants to express herself confidently, read English books and understand English television programs.

NEEDS: She learns best by repeating, especially when it comes to new words. Multimedia learning resources such as audio texts and videos would be helpful for her.

FRUSTRATIONS: Helga is discouraged when it comes to mastering new vocabulary. She learns more slowly than before and that she forgets vocabulary more often.

User Journey Map

Helga wants to learn English using the SEL app.

Phase
AWARENESS & INTRODUCTION
ONBOARDING &
FIRST USE
REGULAR USAGE
ACHIEVEMENT &
RETENTION
Goal
Understand the app’s value for her individual learning.
Start and complete initial
app setup.
Maintain consistent daily learning progress.
Improve skills and sustain long-term use.
Action
Informed about and
installs the app.
Registers, explores, and completes first tasks.
Uses app 20 minutes daily
for practice.
Completes lessons, notices speaking improvement.
Mood
Curious but unsure
about technology.
Cautiously optimistic
but overwhelmed.
Motivated, occasionally frustrated.
Proud, satisfied with the
visible progress.
Frustration
Many choices, app benefits not immediately apparent.
Complex setup, unclear navigation, small text.
No way to search specific lessons or save vocabulary.
Lack of advanced materials, no sharing options.
Improvement
Provide a workshop or clear instructions per email.
Simplify UI and navigation, Tutorials, Onbording
Add a search function and saving own vocabulary.
Add advanced content, regular updates.
Touchpoints
Website, Google Ads
E-Mail & Login system (Onboarding)
App (Interaction & Learning), SEL teacher (Guidance)
App (Interaction & Learning), Notifications (Motivation)
Mobile prototype of the SEL English App
Mobile prototype of the SEL English App

User Stories

Focus on what users want and need.

USER STORY 1: As a user, I want to see how I did at the end of each lesson and receive a motivational message to keep me motivated.

USER STORY 1: As a user, I want to see how I did at the end of each lesson and receive a motivational message to keep me motivated.

USER STORY 2: As user I want to have access to audio lessons and texts, so that I can improve my reading and understanding of the English language.

USER STORY 2: As user I want to have access to audio lessons and texts, so that I can improve my reading and understanding of the English language.

USER STORY 3: As a user, I want to save, retrieve and playfully learn new English words in order to train and expand my vocabulary.

USER STORY 3: 'As a user, I want to save, retrieve and playfully learn new English words in order to train and expand my vocabulary.'
Mobile prototype of the SEL English App

User Stories

Focus on what users want and need.

USER STORY 1: As a user, I want to see how I did at the end of each lesson and receive a motivational message to keep me motivated.
USER STORY 2: As user I want to have access to audio lessons and texts, so that I can improve my reading and understanding of the English language.
USER STORY 3: As a user, I want to save, retrieve and playfully learn new English words in order to train and expand my vocabulary.
Mobile prototype of the SEL English App
Mobile prototype of the SEL English App

User Flow

Creating a feature that makes it easier to learn vocabulary.

GOAL: Defining steps for each flow using the vocabulary box.

GOAL: Defining steps for each flow using the vocabulary box.

FLOWS: Users create vocabulary categories and words, can search for them in German or English and learn them with practice units.

FLOWS: Users create vocabulary categories and words, can search for them in German or English and learn them with practice units.

REQUIREMENTS:

Navigation: Ensure users get from the home to the category screen.

Category Management: Allow users to add new categories.

Input Handling: Provide input fields for entering category details.

Validation: Validate user input before adding the category.

Confirmation: Reflect the new category in the category list.

REQUIREMENTS:
Navigation: Ensure users get from the home to the category screen.
Category Management: Allow users to add new categories.
Input Handling: Provide input fields for entering category details.
Validation: Validate user input before adding the category.
Confirmation: Reflect the new category in the category list.
Mobile prototype of the SEL English App

User Flow

Creating a feature that makes it easier to learn vocabulary.

GOAL: Defining steps for each flow using the vocabulary box.

FLOWS: Users create vocabulary categories and words, can search for them in German or English and learn them with practice units.
REQUIREMENTS:
Navigation: Ensure users get from home to the category screen.
Category Management: Allow users to add new categories.
Input Handling: Provide input fields for entering category details.
Validation: Validate user input before adding the category.
Confirmation: Reflect the new category in the category list.
Wireframes of the home screen and vocabulary box
Wireframes of the home screen and vocabulary box

Wireframes

Home screen and vocabulary box

GRID: For a systematically arranged design a 6-column grid has been used for the layout: Type: Stretch, Margin: 8 px, Gutter: 10 px.

GRID: For a systematically arranged design a 6-column grid has been used for the layout: Type: Stretch, Margin: 8 px, Gutter: 10 px.

HOME SCREEN: A footer tap bar with labels has been added, which slides across the screen when tapped. The navigation bar provides access to a vocabulary box. As an important feature, the icon of the vocabulary box has been slightly enlarged and placed in the centre.

HOME SCREEN: A footer tap bar with labels has been added, which slides across the screen when tapped. The navigation bar provides access to a vocabulary box. As an important feature, the icon of the vocabulary box has been slightly enlarged and placed in the centre.

VOCABULARY BOX: The box contains a selection menu that provides access to the vocabulary categories, the vocabulary and the option to learn. Categories or new words can be added using the round button.

VOCABULARY BOX: The box contains a selection menu that provides access to the vocabulary categories, the vocabulary and the option to learn. Categories or new words can be added using the round button.
Wireframes of the home screen and vocabulary box

Wireframes

Home screen and vocabulary box

GRID: For a systematically arranged design a 6-column grid has been used for layout: Type: Stretch, Margin: 8 px, Gutter: 10 px.

HOME SCREEN: A footer tap bar with labels has been added, which slides across the screen when tapped. The navigation bar provides access to a vocabulary box. As an important feature, the icon of the vocabulary box has been slightly enlarged and placed in the centre.

VOCABULARY BOX: The box contains a selection menu that provides access to the vocabulary categories, the vocabulary and the option to learn. Categories or new words can be added using the round button.

Wireframes of the home screen and vocabulary box
Wireframes of the home screen and vocabulary box

Visual Design

Home screen before and after.

HEADER AND BRANDING: The logo is integrated into a more modern header design with an illustration.

HEADER AND BRANDING: The logo is integrated into a more modern header design with an illustration.

PERSONALISATION: A personalized greeting is added to make the user feel more engaged.

PERSONALISATION: A personalized greeting is added to make the user feel more engaged.

NOTIFICATION: A notification bell has been added to alert users to new lessons, enhancing functionality and user engagement.

NOTIFICATION: A notification bell has been added to alert users to new lessons, enhancing functionality and user engagement.

CATEGORY DESIGN: The navigation buttons now include illustrations and fresher colors, which increases the visual appeal.

CATEGORY DESIGN: The navigation buttons now include illustrations and fresher colors, which increases the visual appeal.

NAVIGATION BAR: The navigation bar that glides across the screen when selecting the vocabulary box now contains labelled icons that provide greater clarity and meet modern design standards.

NAVIGATION BAR: The navigation bar that glides across the screen when selecting the vocabulary box now contains labelled icons that provide greater clarity and meet modern design standards..

Grammar exercise unit

Mobile prototype of the SEL English App
Mobile prototype of the SEL English App

Vocabulary box

Mobile prototype of the SEL English App
Mobile prototype of the SEL English App
Wireframes of the home screen and vocabulary box

Visual Design

Home screen before and after.

HEADER AND BRANDING: The logo is integrated into a more modern header design with an illustration.

PERSONALISATION: A personalized greeting is added to make the user feel more engaged.

NOTIFICATION: A notification bell has been added to alert users to new lessons, enhancing functionality and user engagement.

CATEGORY DESIGN: The navigation buttons now include illustrations and fresher colors, which increases the visual appeal.

NAVIGATION BAR: The navigation bar that glides across the screen when selecting the vocabulary box now contains labelled icons that provide greater clarity and meet modern design standards.

Grammar exercise unit

Mobile prototype of the SEL English App

Vocabulary box

Mobile prototype of the SEL English App

Thank you!

Thank you!

Thank you!

More projects coming soon.

More projects coming soon.

More projects coming soon.

Need a UX/UI Designer?

I'm a UX/UI Designer who specialises in accessible design.

I create user-centered solutions that make complex workflows simple and engaging.

My designs balance aesthetics with functionality, ensuring digital products work beautifully for everyone.

Design Thinking

User Research

User Flows

User Journey Maps

Persona

Wireframes

Prototyping

Accessibility

Need a UX/UI Designer?

Work with me! Hi, I'm Nina - a UX/UI designer with a passion for accessibility.

I create user-centered solutions that make complex workflows simple and engaging. My designs balance aesthetics with functionality, ensuring digital products work beautifully for everyone. How can I help you?
Design Thinking
User Research
User Flows
User Journey Maps
Persona
Wireframes
Prototyping
Accessibility

Need a UX/UI Designer?

Work with me! Hi, I'm Nina - a UX/UI designer with a passion for accessibility.

I create user-centered solutions that make complex workflows simple and engaging.
My designs balance aesthetics with functionality, ensuring digital products work beautifully for everyone.
Design Thinking
User Research
User Flows
User Journey Maps
Persona
Wireframes
Prototyping
Accessibility