Transforming UX education through mobile learning - A comprehensive redesign of a UX learning application
UX/UI Designer, Researcher (Academic)
Mobile (iOS)
Figma, Teams (Test Design/Interview/A-B testing) and Microsoft Forms (System Usability Scale/ Product reaction card/ Consent Paper)
In response to the evolving demands in the digital landscape, the redesign for the User Experience design learning application (UX Toast) demonstrates how to advance UX mobile learning. This case study introduces the redesign process of UX Toast, explores the mobile learning domain through literature, identifies issues, and provides a critical reflection of the design process and outcomes.
The redesigned application aims to meet the needs of aspiring UX professionals, students, and enthusiasts seeking a deeper understanding of UX principles.
The landscape of UX/UI education has seen significant growth, with notable courses from platforms like Coursera attracting hundreds of thousands of students. This burgeoning interest underscores the need for a reliable mobile application that aggregates quality UX learning resources.
Students enrolled in Google's UX Design course (since March 2021)
Students enrolled in Meta's UX/UI Design course
The original UX Toast application faced several critical usability and design issues that hindered the learning experience:
A comprehensive research and design approach was employed to ensure the redesign met user needs and industry standards:
The original design featured a cluttered information architecture with a confusing navigation system. The redesign aimed to simplify the architecture, enhance visual design, and provide clearer navigation paths.
Cluttered and confusing structure (click to enlarge)
Desktop: Interactive zoom controls
Scroll to zoom, click and drag to pan, or use buttons below
📱 Tap image to view fullscreen
Tap to view fullscreen
Plot twist: It looks MORE complex 😅 Why? The original hid problems—dead ends, missing labels, lost users, no references (credibility issues), text-heavy content, and unclear navigation. The redesign adds clear paths, citations, visual aids, and proper structure.
An expert review was conducted on the initial design of UX Toast, revealing critical issues that needed to be addressed:
Industry-standard UX resources and certifications
Wide range of UX courses and degrees
Practical UX challenges and tutorials
Affordable UX/UI courses at all levels
Task-based learning with downloadable resources
The rapid evolution of technology has necessitated the integration of mobile learning (m-Learning) into educational practices. Mobile learning allows students to access educational content anytime and anywhere, providing the flexibility to study at their own pace.
Accessibility in mobile learning is crucial for ensuring that all students, including those with disabilities, have equal access to educational resources. Incorporating accessibility and universal design principles is essential for compliance with federal laws.
Gamification in e-learning can significantly enhance student engagement and motivation. Integrating game elements into online learning environments helps achieve educational objectives and fosters a more interactive and enjoyable learning experience.
Usability is a critical factor in the success of mobile learning applications. Mobile devices' limitations, such as small screens and limited input capabilities, pose unique challenges that must be addressed through effective usability evaluation methods.
Mobile apps have transformed daily learning by offering interactive materials, simulations, and educational games. They cater to students accustomed to digital sources for information and entertainment, though challenges such as design limitations and technical hurdles need to be addressed.
Usability testing was conducted with three participants who provided valuable feedback on the initial design. The System Usability Scale (SUS) and Product Reaction Cards were used to gather quantitative and qualitative data.
SUS Score - Grade B (Good)
SUS Score - Grade A (Excellent)
SUS Score - Grade A (Excellent)
In this iteration, the usability testing process was revised to incorporate both online and face-to-face sessions. Participants were given specific tasks to perform and provided feedback on low-fidelity UI screens.
Information architecture improvements needed with better navigation and credibility through references
Visual representations and multimedia content crucial for comprehension and engagement
Consistent use of visuals and clear categorization essential for user experience
Insights from user testing were organized through affinity diagramming to identify patterns and prioritize design decisions.
User personas were developed based on research insights to guide design decisions and ensure the app meets diverse user needs.
High-fidelity prototype screens (click to enlarge)
The high-fidelity prototype incorporates all feedback from usability testing, featuring improved navigation, enhanced visual design, and comprehensive content organization.
View Interactive Prototype →
High-fidelity app screens showcasing design implementation (click to enlarge)
Base Unit
Grid system spacing
Body Text
Size/Line height (px)
Contrast Ratio
WCAG AA compliant
Touch Target
Minimum tap area
Complete design system overview (click to enlarge)
Primary Blue
Buttons & CTAs
Dark Gray
Text & backgrounds
White
Cards & surfaces
Heading Bold
Headers & titles
Body Regular
Content & descriptions
Caption Medium
Labels & metadata
Unified visual language across all screens and interactions
WCAG compliant with proper contrast ratios and touch targets
Modular components designed for future growth
Based on user feedback from multiple testing rounds, significant improvements were made to the interface design, navigation, and content presentation.
Clearer icons with text labels and intuitive information architecture
Visual aids, references, and better content organization
Improved contrast, text sizing, and screen reader support
The high-fidelity prototype testing involved participants performing specific tasks and providing feedback on various aspects of the design. Tasks included navigating the welcome page, exploring sections like Glossary and Profile, engaging with UX and UI design elements, playing a quiz game, and checking accessibility options.
Participants tested
Average SUS score
Tasks completed
Overall grade
SUS Score Progression Across Iterations
Lo-Fi V1 avg SUS
Hi-Fi avg SUS
across 3 rounds of iteration
Comprehensive testing across all features
SUS Score
Grade A - Excellent
Focused testing on interface elements
SUS Score
Grade A - Excellent
Screen recordings captured user interactions and decision-making processes (click to enlarge)
Detailed interviews provided qualitative insights into user experience (click to enlarge)
Average SUS Score
Hi-Fi final testing
Task Completion
All participants successful
Overall Grade
Industry-leading performance
Rounds of Testing
Lo-Fi → A/B → Hi-Fi
The UX Toast redesign successfully transformed a confusing, text-heavy learning app into an engaging, accessible, and user-friendly educational platform. The comprehensive research and iterative design process resulted in: