Work

About

Contact

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

Timeline: September 2023 - April 2024

Role: UX/UI Designer

Tools Used:

◦ Figma

◦ Adobe Photoshop

◦ Adobe Illustrator

◦ Procreate

◦ Adobe After Effects

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.

PROBLEMS

◦ Difficulty Visualizing Ideas:

Many people struggle to visualize how their home will look with different design choices, such as furniture layouts, color schemes, and decor styles.

◦ Lack of Access to Design Tools:

Some individuals may find it challenging to access professional-grade design tools and software for creating floor plans and visualizing interior designs.

◦ Limited Inspiration and Resources:

Many people struggle to find inspiration and resources for their home design projects, leading to uncertainty and indecision about design choices.

SOLUTION

◦ Seamless 2D to 3D Conversion

Implement a feature in DreamBuilder enabling users to convert 2D floor plans into 3D models with a click, enhancing visualization and refinement of ideas.

◦ Accessible Design Tools and Resources:

Provide professional-grade design software and curated collections of furniture and decor in DreamBuilder, along with 3D viewing options for better visualization.

◦ Dynamic Design Inspiration Stream:

Introduce a Design Inspiration Stream in DreamBuilder, where users can discover and engage with tailored design ideas and furniture recommendations for seamless integration into their projects.

DESIGN PROCESS

DESIGN

PROCESS

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

SURVEY RESULT

INSIGHT

COMPETITIVE ANALYSIS

Key Insights from Competitive Analysis:

◦ Support for Different Levels

WordBot is designed to cater to learners at every level, ensuring accessibility and support for individuals just starting out to those further along in their language journey.

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

◦ Personalized Learning Experience

WordBot offers customization, empowering users to tailor their learning to their needs, ensuring effective language learning.

Key Insights from Competitive Analysis:

◦ Support for Different Levels

WordBot is designed to cater to learners at every level, ensuring accessibility and support for individuals just starting out to those further along in their language journey.

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

◦ Personalized Learning Experience

WordBot offers customization, empowering users to tailor their learning to their needs, ensuring effective language learning.

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

SURVEY RESULT

INSIGHT

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

UNDERSTAND THE USER

Personas & Empathy Maps

MAPPING

USER JOURNEYS

Understanding Through User Flows

MAPPING USER JOURNEYS

Understanding Through User Flows

MVP & UI REQUIREMENTS

Understanding Through User Stories

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

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

MAPPING USER JOURNEYS

Understanding Through User Flows

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