Bits & Pixels
Gamifying coding education for a unique mobile learning experience
Company
Bits & Pixels
Role
Freelance Product Designer
Timeline
4 weeks
Team
Founder, Marketing Director, 2 Product Designers (incl. me)
Overview
Bits & Pixels is a mobile-first coding education startup. Its tagline: "Explaining complicated coding Bits with simple animated Pixels." The product's edge is experience: in-course gaming for retention, a Duolingo-style mobile flow, and assignments tied to real-world cases from professionals in the field.
My role
This was a freelance engagement with an early-stage edtech startup. I worked alongside a second product designer. Before any wireframes, the two of us sat down with the founder and the marketing director to define the brand and product positioning.
Discovery
What the founders told us.
Before any wireframes, we ran a structured brand and product brief with the founder and the marketing director. These are the four things we walked out with.
The product
A mobile-first platform for online coding and programming courses.
The founders called out **experience** as the differentiator: in-course gaming for retention, a Duolingo-style mobile app, and assignments tied to real-world cases or projects from professionals.
Instructor credibility is surfaced through real-content samples that show the simplification of complicated topics.
Quotes
Explaining complicated coding Bits with simple animated Pixels.
The audience
Ages 18 to 34, mostly men, interested in tech and online learning.
Social class C+, B, B+, and A.
Four archetypes named by the founders: school students, university students, fresh CS grads, and career shifters moving into coding from outside tech.
The competitors named
Yanf3.com
Elmentor.com
Udemy.com
The brand voice they wanted
Quotes
One of a kind learning experience that is simple, to the point, and valuable.
Fully integrated learning solution with a rich user experience.
Fully integrated experience that is Professional yet simple to understand.
Screen architecture
Mapping every screen, one card at a time.
After the brand brief, we mapped every screen with the content blocks inside it, then walked the founder and the marketing director through it card by card. The point wasn't pixels yet. It was scope alignment: this is the app, and here is everything that has to be in it.
Sign in
Sign in with Google, LinkedIn, or GitHub
"Don't have an account? Visit our website and purchase a course."
Onboarding
Three-step intro: Review Knowledge, Take Games, View Notes
Get Started CTA
Home
Review Knowledge module (triggered by finished courses or paused lessons)
Explore Courses grid: thumbnail, progress, finished lessons, course name, instructor name
Rating shown only after 5 to 10 feedbacks (two card variants)
Get Started / Continue Learning CTA
Course Structure
Course title, progress, chapters, lessons
Per-chapter and per-lesson status
View Notes shortcut
Take Game CTA
Course Notes
Course title and chapter / lesson title
Illustration or image
Text description
Bullet points
Code blocks
Take Game
Game details
Logos of related topics (next phase)
Start Game CTA
Game
Question number indicator
Question types: MCQ, Sorting, Complete
Check Answer CTA
Game Mistakes
Illustration
"Let's review your mistakes" prompt
Show the right answer after a second wrong attempt
Game Finish
Performance band: Exceptional [5/5], Perfect [4/5], Good [3/5], Needs Work [2/5]
Score as stars or correct-answer count
Lessons to be reviewed (next phase)
Finish · Take Game Again (when score is under 60%)
Course Feedback
Text field
Stars or emojis
Submit
Profile / Knowledge / Notifications
Shared list-and-section scaffold across three tabs
Filter by item
Create new item
Item list with cards
Section with items, subitems, and per-section actions
Visual exploration
Looking at edtech and gamification.
Before locking the visual language, we pulled together a board of references from edtech and gamification apps. The point wasn't to copy any of them. It was to surface the visual moves that consistently make learning products feel both serious and playful.
Ideation
The Ideation.
Wireframes
Picked from the SQL Fundamentals course because they show every distinct surface in the learning loop, end to end.
Final solution
The Final UIs
The wireframes went to the founder and the marketing director for review. With their feedback folded back in, we moved into the polished UIs.
Home
Lesson
Game tab
Game map
Game question
Game finish
Closing
How it ended
Shortly after the final UIs were handed off, the team decided to pivot the product from a mobile app to a web platform. The reasoning was practical: a web product meant easier adoption for the audience, and significantly less engineering lift for an early startup team. The Bits & Pixels mobile work closed here.
