An educational mobile app designed to teach coding fundamentals to beginners through playful visuals and guided interaction.
My Contributions
Primary Project Focus
Diego
Co-Lead UX/UI Designer & Frontend DeveloperMy responsibility was to shape the core user experience and interaction model of DinoCode, ensuring coding concepts feel approachable and rewarding.
Strategy
Defining the beginner-first UX strategy
Onboarding
Designing onboarding and learning flows
Structure
Structuring lesson progression and interaction patterns
Accessibility
Ensuring clarity and accessibility across screens
Developing
My development responsibility was the on-boarding flow, and major components. I worked to complete these tasks with Next.js. Over the course of three days, working with Rehan, we had completed the frontend mvp application.
Project Context & Goal
Learning to code can be intimidating for beginners due to unfamiliar terminology, abstract logic, and dense interfaces. Many educational tools assume prior knowledge, creating early struggles for new learners.
The Design Goal
The goal of DinoCode was to lower the barrier to entry by designing a mobile experience that feels:
Approachable rather than intimidating- Structured rather than overwhelming
- Encouraging rather than discouraging
Focused entirely on design thinking, UX structure, and visual communication.
Design Choices & Principles
Beginner first
DinoCode is focused on beginners, not further education
Curated Testing
All quizzes are created directly from the content taught on DinoCode
One Concept at a Time
DinoCode teaches HTML CSS & JS separately before combining them
Visual Feedback
Animations and graphics were used over text-heavy explanations.
Progress & Play
EXP, badges and quizzes were used to create a sense of progression
Competition
Leader boards and friend's progression to create competition
Key UX Flows
End-to-End Learning
The experience was designed as a structured progression:
Onboarding → course selection → lesson → quiz → feedback → progression.
Onboarding Experience
The onboarding experience quickly establishes what DinoCode is, who it's for, and how learning works. The goal was to reach the first interactive moment as fast as possible.
Value Prop
Quickly setting expectations for absolute beginners.
Low Friction
Minimal sign-up barriers to get into the first lesson.
Gamification & Interaction
Gamification was intentionally used to sustain motivation without overwhelming beginners. Feedback was designed to be encouraging and informative rather than punitive.
Quizzes
Bite-sized knowledge checks after every lesson.
Progress
Visual tracking to show how far you've come.
Social
Leaderboards and friend activity for motivation.
Visual & UI Collaboration
I collaborated closely with my team across low-fi, mid-fi, and a final hi-fi redesign to ensure clarity, consistency, and approachability.
Typography & Colors
Content Scope & Learning Areas
HTML
Structural fundamentals and the skeleton of the web.
CSS
Styling, layouts, and visual communication.
JavaScript
Logic, interactivity, and modern app functions.
Advanced frameworks and libraries are positioned as future features.
Outcomes & Design Takeaways
Key Results- A complete beginner-first UX system
- Clear lesson progression model
- Cohesive visual and interaction language
Simplification is Key
The core UX principle behind DinoCode was simplification. Keeping concepts whole but accessible.
Confidence Matters
Visual clarity directly impacts user confidence and retention.
Emotional Design
Educational design must be intentional in the way it is instructional.
Reflection
“DinoCode strengthened my ability to design for education, accessibility, and first-time users. With no development constraints, the project allowed deep focus on UX fundamentals and interaction clarity.”