Designing a Responsive Platform
All-in-one, Language Learning, Ai Speech Partner, Native Speaker Pairing.
Overview
This case study's objective was to create a responsive website for multiple screens. The following case study provided me with an opportunity to tackle a real-world work scenario, selected by my mentor to test my skills. Tasked with creating a language learning website, with a focus on mobile design and selecting one flow for desktop optimization, I embarked on thorough research and user interviews.
Research & Insights:
-
Conducted user interviews with 6 participants (2 serious language learners, 4 hobby/intermediate learners)
-
Key insights: Existing platforms either lack engagement, or depth, users feel embarrassed practicing with native speakers early on, and there's interest in an AI speech partner for feedback.
After analyzing existing platforms and gathering insights from relevant users, I conceptualized a platform featuring both native speaker interactions and an AI speech partner functionality. Additionally, I designed interactive exercises to display an enhanced learning experience.
Design Process:
-
Created low-fidelity wireframes for 5 flows, but prioritized and developed high-fidelity prototypes for 3 key flows due to an 80-hour time constraint.
-
Delivered 19 screen designs across 3 clickable prototypes optimized for mobile and 1 desktop flow.
Challenges:
-
Limited prior experience with language learning platforms required extensive research.
-
Prioritizing high-impact flows and features within the tight timeline.
-
Designing an engaging experience for two different screen types (mobile and desktop).
Despite facing an 80-hour time constraint, I successfully developed five flows, although I could only design three of them in high fidelity. This process was an opportunity to practice time management under some pressure while prioritizing essential features and functionality
Role
-
UX Designer
-
UX Researcher
-
Interaction Designer
-
UI Designer
Tools
-
Figma
-
Chat GPT
-
Google Gemini
-
Claude Ai
Methods
-
Interviews
-
Market Research
-
Competitive Analysis
-
Affinity Mapping
-
Impact Effort Matrix
-
Moderated & Unmoderated Usability Testing
Research
To gain a general understanding of the language learning landscape, I examined various language learning platforms and their features. This hands-on exploration allowed me to identify industry standards, innovative approaches, and a general idea of areas for improvement.
However, recognizing that user needs and motivations are at the core of any successful product, I supplemented my competitive research with in-depth user interviews. I curated a diverse group of participants representing different language proficiency levels and learning goals. Through these interviews, I uncovered valuable insights into user pain points, motivations, and the specific features that resonated with learners at different stages of their journey.
Summary
-
Competitive analysis of existing platforms.
-
Five user interviews across proficiency levels.
-
Uncovered motivations & pain points.
Affinity Map & Findings
After organizing the data into an affinity map, some of the key findings that emerged from this research phase included:
-
A desire for a balanced experience that combined educational rigor with engaging, gamified elements to sustain motivation.
-
The need for low-pressure practice environments, leveraging technologies like AI and speech recognition, before engaging with native speakers.
-
Strong interest in native speaker interactions and cultural exchange once users gain confidence.
-
Demand for personalized feedback and adaptive learning paths tailored to individual proficiency levels.
Armed with a deep understanding of the competitive landscape and authentic user needs, I was well-positioned to embark on an iterative design process, synthesizing insights to create a language learning platform that addressed real user problems with innovative solutions.
Summary
Affinity map
-
Desire for balanced, gamified experience.
-
Interest in AI for low-pressure practice.
-
Demand for native speaker interactions.
-
Personalized, adaptive learning paths.
Secondary Research
To gain a deeper understanding of existing language learning platforms, I created accounts and thoroughly explored their features, with a particular focus on exercise designs, formatting choices, and overall user experiences. Drawing insights from the user interviews, which highlighted the need for more engaging exercises balanced with educational rigor, I began conceptualizing an innovative platform.
The key concepts that emerged were:
-
AI Speech Partner: Leveraging artificial intelligence to provide real-time feedback on pronunciation, vocabulary usage, and conversational practice. This addresses the user need for low-pressure practice before engaging with native speakers.
-
Native Speaker Interactions: Incorporating a pathway to connect with native speakers for authentic language immersion and cultural exchange, once users gain confidence through the AI partner.
-
Gamified Interactive Exercises: Designing exercises with game-like elements and progress tracking to enhance engagement and motivation, while maintaining an overall professional learning atmosphere.
The goal was to create a platform that combined cutting-edge technology, human interaction, and carefully crafted educational content – delivering an experience that was both engaging and effective for language learners at various proficiency levels.
Summary:
Market Research
-
Created accounts with multiple platforms.
-
Compared my experience to the experiences of users I interviewed.
Discoveries:
-
From my exploration of the various platforms I gathered that either the platform was serious, or it was too game-based.
-
This would explain why users couldn't stay consistent or got burnt-out and needed long breaks.
-
-
Some platforms didn't offer any Ai tools, or native speech partner features.
Low-Fidelity Ideation & Wireframing
Grounded in the key research insights, I embarked on the low-fidelity ideation and wireframing phase. Through digital sketching and iterative exploration, I conceptualized a comprehensive blueprint that addressed the diverse needs of language learners.
To ensure a clear and intuitive user experience, I created a detailed sitemap. This digital map of the platform's structure wasn't just a formality. By analyzing existing language learning apps and industry standards, I incorporated best practices into the sitemap. This well-defined information architecture served as a crucial foundation for the subsequent wireframing process, ensuring a cohesive and user-friendly platform.
The proposed solution encompassed five core user flows:
-
Onboarding & Video Lessons: A personalized onboarding experience and access to structured video lessons.
-
Interactive Exercises: Gamified activities that maintain a serious undertone to reinforce learning in an engaging manner.
-
Reading Materials: A library of curated reading resources tailored to various proficiency levels.
-
AI Speech Partner: A low-pressure environment for conversational practice and real-time feedback powered by AI.
-
Native Speaker Pairing: Facilitating cultural exchange, common interests, and authentic language immersion through native speaker interactions.
The design concepts were directly informed by user research findings, such as the desire for balanced, gamified experiences, low-pressure practice environments, and access to diverse learning materials. I drew inspiration from existing language learning platforms and other relevant apps, synthesizing best practices with innovative ideas to create a unique and compelling solution.
Summary
-
Developed intuitive sitemap
-
Five core user flows conceptualized
-
Addressed key research insights
-
Balanced educational & engaging elements
-
Leveraged AI for low-pressure practice
-
Enabled native speaker interactions
-
Sitemap
UI Design
UI Design Process:
After reviewing the initial designs and concepts with my mentor, I progressed to the mid-fidelity stage. Considering the project's tight timeline, I had to prioritize and focus on delivering three core user flows to a high-fidelity state on mobile:
-
Onboarding & Personalization
-
Interactive Exercise
-
Native Speaker Pairing
The mid-fidelity designs aimed to strike a balance between an engaging, visually appealing interface and a structured, content-focused learning environment. I explored different layouts, UI patterns, and interactive elements to create an intuitive and delightful experience for language learners.
Summary
-
Researched design inspiration
-
Established cohesive UI pattern
-
Three core mobile flows
-
User tested mid-fi wireframes on friends and family
-
Mentor consultation before hi-fi
High-Fidelity Design
Transition from mid to high fidelity:
At this stage, I was transitioning the prioritized user flows from mid-fidelity wireframes to high-fidelity visual designs. My goal was to create an interface that struck the right balance between professionalism and a calm, inviting learning environment.
Color played a crucial role in setting the overall tone. I experimented with various palettes, carefully considering how different hues and combinations would impact the perceived level of formality versus approachability. Ultimately, I landed on a color scheme that conveyed a sense of sophistication while still feeling inviting and engaging.
Typography was another key element I focused on. Readability and easy content consumption were top priorities for an educational platform. Therefore, I opted for a familiar, legible typeface that would be comfortable for extended periods of learning and practice.
To enhance visual interest and prevent a bland, text-heavy interface, I incorporated relevant imagery throughout the design. This helped break up content sections and added a more engaging, visually appealing element to the overall experience.
The project required the additional delivery of a high-fidelity design for a desktop experience and I chose the Interactive Exercise flow.
Summary
-
Crafted professional yet calm aesthetic
-
Experimented with color palettes
-
Chose legible, familiar typography
-
Incorporated supportive imagery
Final Design
Cohesive UI across 3 core flows:
-
Onboarding, Subscription, and Lesson
-
Interactive Exercise
-
Native Speaker Pairing
-
Professional yet engaging aesthetic
-
Intuitive layouts and interactions
-
Supportive visuals and imagery
-
Interactive Exercise high-fidelity for desktop
Desktop Flow
Desktop interactive exercise flow
Prototyping & Usability testing
For the final evaluation phase, I transformed the high-fidelity designs for the three core flows - Onboarding & Personalization, AI Speech Partner Practice, and Native Speaker Booking - into interactive, clickable prototypes. This allowed me to conduct realistic usability testing with representative users.
I recruited five participants who aligned with the target user personas and had experience with language learning platforms. During the testing sessions, I observed their interactions with the prototypes and gathered valuable feedback.
The overall response was positive, with users finding the flows self-intuitive and encountering no major usability issues. This validated the design decisions made throughout the process, such as the clear information architecture, intuitive UI patterns, and streamlined interactions.
However, a common suggestion from all five participants was to enhance the prototype's functionality further, potentially incorporating more interactive or "entertaining" elements. While such enhancements could contribute to a more engaging experience, implementing them was beyond the scope and timeline of this design test. The primary objective was to validate the core user flows and interactions.
Moving forward, incorporating interactive features and delightful micro-interactions could be a valuable next step in refining the design and creating a truly immersive language learning experience.
Summary
Usability Test
-
Conducted tests with 5 users
-
3 in-person sessions
-
2 moderated remote tests
-
Users found core flows intuitive
-
Suggestion: Enhance interactivity
-
Next step: Incorporate micro interactions
Affinity Map
-
Problems
-
Feelings
-
Design
-
Suggestions
-
Simplicity vs. Complexity
Usability Test Affinity Map
Onboarding Subscription & Video Lesson Prototype
Click on the grey background to reveal 'expand button' on top right for a full screen experience, and click anywhere within the prototype screen for the blue highlight guide.
Interactive exercise & gamification prototype
Click on the grey background to reveal 'expand button' on top right for a full screen experience, and click anywhere within the prototype screen for the blue highlight guide.
Native speaker pairing prototype
Click on the grey background to reveal 'expand button' on top right for a full screen experience, and click anywhere within the prototype screen for the blue highlight guide.
Full Mobile Flow
Next Steps & Opportunities
This project provided invaluable experience in designing an engaging and effective language learning platform. Through user research, iterative design cycles, and usability testing, several key learnings emerged:
-
Balancing educational rigor with gamified, entertaining elements is crucial for sustained user engagement.
-
Incorporating AI-powered features like speech practice can reduce barriers and provide low-pressure learning environments.
-
Facilitating human-to-human interactions (native speaker conversations) can enrich the learning experience.
Moving forward, there are opportunities to further enhance the platform's functionality and delight factor:
-
Expand the AI speech partner's capabilities, such as adaptive learning paths and personalized feedback.
-
Integrate social features to foster a community of learners, enabling collaboration and healthy competition.
-
Explore immersive technologies (AR/VR) to create realistic language immersion experiences.
With a solid foundation established, the next phase would involve prioritizing high-impact features, conducting additional user testing, and continuously refining the design based on real-world usage data and evolving user needs.
I recruited five participants who aligned with the target user personas and had experience with language learning platforms. During the testing sessions, I observed their interactions with the prototypes and gathered valuable feedback.
The overall response was positive, with users finding the flows self-intuitive and encountering no major usability issues. This validated the design decisions made throughout the process, such as the clear information architecture, intuitive UI patterns, and streamlined interactions.
However, a common suggestion from all five participants was to enhance the prototype's functionality further, potentially incorporating more interactive or "entertaining" elements. While such enhancements could contribute to a more engaging experience, implementing them was beyond the scope and timeline of this design test. The primary objective was to validate the core user flows and interactions.
Moving forward, incorporating interactive features and delightful micro-interactions could be a valuable next step in refining the design and creating a truly immersive language learning experience.
Summary
Learnings:
-
Balance education & entertainment.
-
AI reduces practice barriers.
-
Human interactions enrich learning.
Future Opportunities:
-
Expand AI capabilities (adaptive learning).
-
Social/community features.
-
Explore immersive technologies (AR/VR).
Next Phase:
-
Prioritize high-impact features.
-
Additional user testing.
-
Continuous refinement based on usage data.