UX UI PROJECT

WordBot

Language-Learning App

Timeline: September 2023 - April 2024

Role: UX/UI Designer

Tools Used:

â—¦ Figma

â—¦ Adobe Photoshop

â—¦ Adobe Illustrator

â—¦ Procreate

â—¦ Adobe After Effects

View Prototype

OVERVIEW

As a language learner myself, I've realized the importance of having a language learning companion. However, it's not always feasible to have someone knowledgeable by your side at all times. With the advancements in AI technology, integrating AI features into the language learning journey seemed like a promising idea. To explore this concept further, I conducted AI tech research and analyzed existing language learning apps. Additionally, I conducted a survey via Google Form and interviewed second language learners to gather insights. This marks the ongoing journey of WordBot. While the journey continues, I'm excited to share the progress made so far.

PROBLEMS

â—¦ Personalization:

Each learner has unique strengths and weaknesses. Providing personalized learning paths and content is essential for efficient learning.

â—¦ Effective Feedback:

Timely and constructive feedback on pronunciation, grammar, and writing is crucial for improvement.

â—¦ Lack of Speaking Practice:

Many learners focus on reading and writing, neglecting speaking practice. This can lead to difficulties in real-life conversations.

â—¦ Motivation and Engagement:

Maintaining learner motivation and engagement over time can be a significant challenge. Learners may lose interest or become discouraged.

SOLUTIONS

â—¦ Constructing User Profiles:

Utilize AI algorithms to analyze learner data and offer personalized learning paths and content.

â—¦ AI-Enabled Feedback:

Implement AI-powered speech recognition and natural language processing to provide immediate, accurate feedback.

â—¦ AI-Driven Conversational Partners:

Integrate AI-driven virtual conversational partners or chatbots to facilitate speaking practice.

â—¦ Daily Challenges:

Use AI-driven adaptive learning to personalize content and challenges according to what learners prefer.

DESIGN PROCESS

Discovery and Research

Explore language-learning preferences and user needs through competitive analysis, surveys, and user interviews.

Design and Develop

Craft sketches, wireframes, and UI elements to shape the app's structure and functionality

Test and Iterate

Run accessibility tests, evaluate user experience, gather feedback, and refine design.

COMPETITIVE ANALYSIS

Key Insights from Competitive Analysis

â—¦ Real-Time Chatbot Assistance

WordBot offers real-time chatbot assistance, empowering users to engage in interactive conversations and receive immediate feedback, enhancing their language learning experience.

â—¦ Customized Learning Paths for Everyone

WordBot helps learners of any level with personalized profiles, saved questions, custom word lists, and daily challenges.

â—¦ Simplicity Over Gamification

Unlike many gamified language apps, WordBot prioritizes simplicity, focusing on providing personalized, engaging experiences without overwhelming users with excessive game-like features.


RESEARCH & RESULTS

View Screener Survey

Popular App Learning

40.9% of participants prefer independent language learning apps.

Pronunciation Needs

54.5% of respondents expressed a desire for pronunciation assessment.

Dictionary Function

45.5% of respondents indicated a need for instant word definitions.

AI Features

36.4% of respondents expressed interest in AI-powered features.

UNDERSTAND THE USER

Personas & Empathy Maps

MAPPING USER JOURNEYS

Understanding Through User Flows

MVP & UI REQUIREMENTS

Understanding Through User Stories

SKETCHES

Rough outlines and visual concepts are created to map out the initial design direction.

WIREFRAME

Present the app's layout with a focus on structure and functionality.

View Wireframe

UI DESIGN

View Prototype

3 columns grid

I've opted for a 3-column layout in my design to maintain consistency across elements. This simplifies navigation and makes it easier for users to engage with content on mobile phones and other small screens.

COLOR CONTRAST

I've conducted color contrast tests using the A11Y plugin in Figma to ensure the accessibility of all text objects. After making color adjustments, all text now passes both the Accessible AA and AAA contrast ratio tests.

LIGHT MODE & DARK MODE

Based on user feedback from interviews, some individuals find dark colors conducive to focus, while others prefer to complete daily challenges before going to bed. To accommodate these preferences, I've implemented a dark mode feature in Figma using local variables. This allows users to switch between light and dark modes based on their personal preferences and needs, enhancing the user experience and promoting focus during use, especially for those who prefer working in low-light environments or before bedtime.

STYLE TILE

NEXT STEP

The next step is focusing on making WordBot adaptable to any device, such as iPads and websites. Evolving the language system to cater to diverse user preferences is another consideration. It's crucial to keep gathering user feedback for ongoing updates, ensuring that WordBot effectively meets the diverse needs of our user base.

View More

DreamBuilder

3D Interior Design App

Sense Mind & Body

Responsive Web Design with WordPress

@fiazhang2024