Personalized design education, built for the way designers actually learn.
Duration
3 weeks
Role
Research & Discovery - UX/UI
Tools
Figma, FigGam, Claude, ChatGPT
Project overview
Layrd is a mobile learning app designed for the next generation of designers. This project explores how personalized, bite-sized education can feel as engaging as the content itself — where discovering a course, tracking progress, and watching a lesson all feel effortless.
The interface was designed with simplicity, accessibility, and content hierarchy in mind, allowing learners to focus on the educational experience rather than navigating complex layouts.
Goals
Design a mobile-first learning experience tailored to designers at every level
Make course discovery and progress tracking feel intuitive and low-friction
Create a visual identity that reflects the quality of the education inside
Timeline
Research
week 1
Conducted competitive analysis and user interviews to understand learner behaviors, expectations, and common UX patterns across modern e-learning platforms.
Wireframing
week 1
Created low-fidelity wireframes to define navigation structure, organize content hierarchy, and establish intuitive learning user flows.
Prototyping
week 2
Built interactive prototypes and conducted usability testing to validate navigation clarity, learning interactions, and overall user experience.
UI Design
week 2
Developed a clean visual system using neutral backgrounds, vibrant accents, and consistent components to enhance usability.
rESEARCH
Competitive analysis
UI Style guide
Color palette
Typography
COMPONENTS
icons (by CRISTIAN MUÑOZ)
illustraitions (by streamline)
Wireframes
DESIGNED PAGES
Personalized Onboarding
Users select their interests and learning goals to create a tailored experience.
Course Discovery
Browse trending, popular, and categorized courses through organized layouts.
Detailed Course Pages
Access lessons, instructor information, ratings, and comments in one streamlined view.
Learning Player
Simple media controls and progress tracking create a focused learning environment.
Profile & Settings
Manage account preferences and saved courses with minimal friction.
Challenges
- Balancing depth of content with a simple, scrollable mobile UI
- Differentiating Layrd in a saturated e-learning market (Udemy, Coursera, Skillshare)
- Designing for multiple user levels — beginner to advanced — without overwhelming either
Outcome
A complete mobile UI system with onboarding, course discovery, video playback, and profile
A brand identity (Layrd) that scales from app icon to full wordmark
A design system with reusable components, consistent color styles, and typography
This project helped me strengthen my approach to designing structured mobile experiences and scalable UI systems. It also improved my ability to balance aesthetics with usability in content-heavy interfaces.