Project Overview
Transforming a short design exercise into a meaningful learning experience.
First, I analyzed the challenge - to design a digital learning experience that helps users discover structured, engaging content and track their progress over time.
Then, I asked myself what kind of learning would truly feel meaningful and relevant?
That question led me to focus on communication skills - an area where many professionals, like Emily, want to feel more confident and articulate in their everyday interactions.
Finally, I set out to design a learning journey that feels light, motivating, and easy to maintain - short daily sessions guided by AI, turning practice into progress.
From Brief to Concept
Translating the design challenge into a clear product vision.
01. Shaping the Learning Concept
Exploring learning models to define the right direction for Emily
I explored two models:
An open course marketplace and a unified learning experience.
Because Emily values focus and simplicity, I chose the unified model - guided by AI, structured into short sessions, and designed to build lasting learning habits.
Clarity + Diversity = A truly innovative learning experience
Merging structure with choice creates a new kind of learning journey.
02. Competitor Research & Inspiration
Insights from leading learning experiences
To explore how successful learning platforms keep users motivated and consistent,
I analyzed leading guided-learning experiences - including Duolingo, Fabulous, and Elevate.
These insights helped me define key design directions for My App:
Guided freedom
allowing exploration without overwhelming the user
Proven Habit
Guided micro-learning fosters consistency and motivation.
Visible progress
using small wins to reinforce motivation
ECHO App
Empowering professionals to improve their communication skills through short, interactive sessions with instant feedback and visible progress.
03. Echo Learning Framework
Three elements that make learning focused, personal, and fun.
After exploring how people stay motivated in digital learning, I translated those insights into a framework that connects structure, motivation, and experience.
Together, these three layers define how Echo helps professionals build real communication habits - one short session at a time.
Personalized Learning
Daily structure that turns micro-learning into lasting growth.
Each day, Echo creates a personalized learning session built from the topics Emily selected during onboarding.
This keeps her experience fresh and balanced, helping her strengthen multiple communication skills in just a few focused minutes a day.
Motivation & Gamification
Making learning engaging and rewarding.
Echo combines XP, streaks, and small wins to help users stay motivated and consistent.
Progress bars and visual rewards turn effort into tangible achievement - encouraging learners to keep moving forward.
AI Mentorship
Personal guidance that keeps learners confident and supported.
Echo’s AI mentor provides immediate feedback, encouragement, and suggestions for improvement.
Its warm tone and conversational approach make the experience feel human, supportive, and emotionally balanced.
.png)
From Principles to Experience
Translating Echo’s learning framework into a seamless daily journey
04. Mapping Emily’s Daily Journey
The flow focuses on the core learning experience — from daily session preview to completion — turning Echo’s framework into a real, interactive journey.
From Flow to Form
Translating the daily learning journey into wireframes that bring structure, hierarchy, and focus to each step.
05. Wireframing the Experience
Exploring the daily learning flow through fast, AI-assisted iterations.
To create the wireframes, I used Figma Make - both my starting point and main workspace for this phase.
I built the initial prompt with ChatGPT, generated first concepts in Figma Make, and then refined every element manually - improving hierarchy, layout, and iconography. This process helped me move quickly from idea to structure while keeping full creative control.
From Structure to Style
Applying a design system to transform wireframes into a cohesive, interactive prototype.
.png)
06. UI Design & Prototyping
Turning structure into a functional, visual experience.
For the UI phase, I imported a ready-made design system from Figma Community into Figma Make and used it to bring consistency and polish to the prototype.
Starting from the wireframes I had refined earlier, I adapted colors, typography, and components to fit Echo’s learning tone - calm, motivating, and clear.
This stage completed the loop from AI-generated wireframes to a cohesive, designed prototype built entirely in Figma Make.
Make ➜ Figma ➜ Make
Where AI exploration meets human refinement.
07. From Prototype to Final Design
Evolving Echo from fast AI exploration to a crafted visual experience.
After creating the interactive prototype in Figma Make, I continued refining the design beyond the home-assignment scope of time working with figma.
I replaced stock photos with AI custom illustrations, adjusted the color palette and typography, and added visual consistency and warmth that align with Echo’s calm and motivating tone.
While this design isn’t final, it feels like a strong foundation - a version I’m proud of, and one that could evolve into a real, functioning product.
.png)
.png)
Turning rejection into reflection - and reflection into growth
Reflection
This project reminded me how much I enjoy turning structure into story - connecting logic, learning, and emotion through design.
Even within a short time frame, I found that working iteratively with AI and design tools can lead to surprising depth and meaning.
It became more than an assignment - it was a chance to rediscover my own process and creative rhythm.