Yeltic Learn Training App Redesign
ROLE:
Product designer
DURATION:
4 Weeks
Product Showcase
Introduction
Project overview
Yeltic Learn is a corporate training app that helps employees build hard and soft skills through short educational capsules ("Nanos") and structured learning paths, using immersive technologies like AR, VR, and simulations.
I was brought into the project after the initial app failed user testing.
The original design suffered from major usability, accessibility, and architectural flaws that made it difficult to navigate and frustrating to use. My task was to lead a fast-tracked redesign to rescue the product, rebuild user trust, and prepare the app for broader company rollout.
My role
I led the full UX and UI redesign, covering information architecture, interaction models, navigation, visual system definition, accessibility improvements, and overall user flow optimization.
Context
This was a B2B project where companies license the app for their employees.
The redesign MVP was completed in 8 weeks and focused on shipping a stable, scalable mobile app ready for client deployment.
Problem
What wasn't working
When I joined Yeltic Learn, the app was already struggling.
Early user feedback was clear: it was confusing, overwhelming, and hard to navigate. The design lacked negative space, ignored accessibility basics, and had no clear structure — making even simple tasks frustrating.
Users described it as “too dark,” “too crowded,” and “too confusing.” Without a major redesign, the app risked losing engagement and failing its educational mission.
Research & Insights
To understand the root of the app’s usability issues and guide the redesign, I focused on two key research efforts:
Pilot Feedback Analysis
After the initial app launch, we gathered real user feedback from early testers. Some clear patterns emerged:
-
Users couldn’t easily locate content.
-
Visual overload made it difficult to focus or scan information.
-
Basic educational flows weren’t clear, causing users to abandon tasks halfway.
-
Navigation felt random, with no clear sense of progression.
Competitive and Comparative Analysis
I analyzed top educational apps and content-driven platforms like Coursera, Skillshare, and even Netflix to understand proven engagement patterns.
-
Content exploration must feel intuitive and rewarding.
-
Visual hierarchy and white space are crucial for reducing cognitive load.
-
Educational platforms succeed when they balance learning structure with discovery freedom.
The new design strategy
Based on critical usability gaps and pilot feedback, we developed a design strategy focused on clarity, accessibility, and user control—while modernizing the interface and aligning it with emerging product goals.
Core Pillars
Streamlined Navigation:
Reduced cognitive load by reorganizing IA and introducing clear page hierarchy.
Modular Content Architecture:
Restructured lessons and learning paths to support chunked, flexible progression.
Visual Clarity & Space:
Introduced more white space, consistent layouts, and visual grouping to reduce overwhelm.
Increased Feedback & Progress Indicators:
Added visual signals to help users track status and build momentum.
Future-Proof Design System:
Created a scalable design language for upcoming content and gamification features.
The Wireframes and Flows
I started with handmade sketches to rethink layout and structure, then moved into digital wireframes focused on clarity and usability. The goal was to simplify navigation, reduce clutter, and make key actions—like starting content or tracking progress—feel intuitive and seamless.
First Round of Mockups
First looks, first fixes
This first round of mockups marked a major leap forward from the original app—but it still had rough edges. Visually, the screens lacked cohesion: inconsistent styling, scattered typography, and no clear visual language. Information was present but not always useful or prioritized well. Some UX patterns felt generic or clunky, with navigation behaviors that could easily lead to confusion or missed actions.
While it was a necessary first pass that addressed the major usability issues, it was clear that this version needed refinement—visually, structurally, and interactively—to reach its full potential.
Final Iteration: A Unified, Scalable Product
The final iteration brought everything together into a cohesive, scalable system. By now, the app had evolved past MVP mode—this was about tightening the seams.
Key improvements included:
-
A clear visual language grounded in contrast, hierarchy, and consistency.
-
Refined navigation that adapted to user behaviors uncovered in earlier rounds.
-
Stronger content framing that emphasized personalization, learning outcomes, and discoverability.
-
Reusable components that ensured future scalability across content types and partner programs.
This round was less about reinventing and more about elevating—removing friction, aligning interactions, and delivering a smoother, more intuitive experience that finally felt complete.
Content Details Screen
We simplified the capsule detail screen by reducing redundant CTAs and introducing a cleaner layout. Secondary actions were grouped with consistent icons, and learning path components now appear on scroll, keeping the experience focused but flexible.
Immersive Interactions Screen
We removed the fixed header to maximize immersion and introduced floating buttons for cleaner access to controls. CTAs are now clearer, with better contrast, spacing, and typography for legibility.
User Progress Screen
The radar chart was replaced with digestible data tiles and trends, making progress easier to understand at a glance. We added clear performance stats, historical comparisons, and split views between achievements and usage behavior.
My Learning” Nav Tab
The original learning tab was limited to just lessons and evaluations, with little visual appeal or depth. The new version introduces tabs for favorites, in-progress, downloads, and evaluations—each with tailored insights. Users now get context-specific data like completion rate, scores, or progress directly from the list, paired with a more visual, scroll-friendly layout.
Results
After launch, the redesigned app showed strong adoption across both new and returning users. The visual overhaul, improved architecture, and smoother flows translated directly into measurable engagement.
Designing for Scale: Translating Mobile into Tablet
Once the mobile experience was defined, we adapted it for tablet, maintaining consistency while optimizing layouts for larger screens. We introduced split views, modals, and new information hierarchies to better use horizontal space and reduce cognitive load. Key elements like search, learning content, and immersive modules were restructured to feel natural and intuitive on tablet, preserving flow while increasing functionality.
