Everyone had the content. Nobody had the order.
A four-person team builds a learning platform for people trying to break into UI/UX, and immediately runs into the same problem every new designer faces: too many directions, not enough runway to chase them all.
Scroll to begin ↓"We weren't short on ideas. We were short on time. Figuring out which ideas earned a place in the MVP was the real design problem."
The Problem
For our final group project, the brief was open: pick a product, design it, and code it ourselves. That last part mattered. This wasn't a design exercise with engineering handed off to someone else, it was meant to build the muscle of translating a Figma file into a working site, the same muscle that separates a designer who can spec something from one who understands what it costs to build.
We chose to build for people just outside the field looking in: aspiring UI/UX designers who know they want in, but don't know where to start. That's a real, specific gap. There's no shortage of UI/UX content online, YouTube tutorials, Medium posts, bootcamp ads, but very little of it is sequenced. We set out to build UI/UX Nest: a guided starting point, not another firehose of scattered resources.
Research & Discovery
We ran interviews and a short survey with people either learning UI/UX on their own or actively considering it, to find out where they got stuck. One answer came back again and again, in different words but the same shape: people didn't need more material, they needed to know where to start and what order to learn things in.
Not a lack of resources, but no clear starting point among the resources that already exist.
A structured learning path, something that told them what to learn first, second, and after that.
Several wanted help that went past theory, into building a portfolio and resume.
People learn differently, some wanted to watch, some wanted to read, neither alone was enough.
This was a real interview-and-survey round, but a small, informal one run by a four-person student team on a fixed bootcamp timeline, not a validated research study. We treated the pattern as a strong directional signal, not statistically rigorous data, and it's the reason "find your starting point" became the spine of the whole product instead of one feature among many.
Define & Ideate
With four people, a self-chosen concept, and no client to draw a line for us, scope creep showed up immediately. Everyone had a feature they were excited about, and almost all of them were genuinely good ideas. The defining tension of this project wasn't disagreement about quality, it was about fit: which of these ideas served "help someone find their starting point," and which were exciting tangents that would eat the time we didn't have.
Sorting features this way turned an emotional argument, whose idea gets cut, into a practical one: does this serve the starting point, or does it serve a more advanced stage we don't have time to build well? That question didn't make every disagreement painless, but it gave us a shared standard to argue against instead of arguing against each other.
Design Decisions
A curriculum that's a path, not a library
The core deliverable became a phased curriculum: a sequence of phases, each broken into specific topics, each topic paired with a short video tutorial and a written summary of that same video. That pairing was deliberate, not redundant. The research told us people learn differently, some want to watch, some want to read a quick recap before or instead of watching, and building both into every topic meant neither type of learner had to settle for the format that didn't suit them.
Introduction to UI/UX
The absolute starting point: what the field is, how UI and UX differ, and the vocabulary everything after this builds on.
Video + summaryCore concepts & tools
Design principles and a first hands-on pass at Figma, the tool nearly every later step assumes familiarity with.
Video + summaryPortfolio & resume
Turning what was just learned into something a hiring manager can evaluate.
Guided stepsJob prep & networking
What roles exist, what they pay, and where to find the people already doing them.
Reference + directory
Color as a wayfinding system, not decoration
Once the curriculum had multiple phases and topics, the real risk wasn't visual dullness, it was a learner losing their place. We assigned a distinct color to each topic area and carried it consistently across every related screen, the topic card, the video page, the written summary. That gave a learner a quiet, constant answer to "where am I in this," without needing a progress bar to spell it out every time.
A style system built to hold four people together
Because four people were building different pages simultaneously, the style system wasn't decoration, it was infrastructure. Without a shared visual language locked down early, each teammate's section would have drifted: slightly different blues, different type hierarchies, different button shapes. The system gave everyone the same rules to code against, which is what made the final product feel like one site instead of four.
The two main colors, a sky blue (#30ABF0) and a deep teal (#06405A), were chosen to feel approachable and calm without tipping into clinical. The sky blue carries the primary UI weight, buttons, active states, key labels, while the dark teal grounds the overall layout. The highlight palette of four distinct hue pairs, purple, gold, brown, and teal-sage, served a functional purpose as much as a visual one: each topic area in the curriculum got its own color, so a learner always had a quiet visual cue for where they were without needing a label to say it.
Typography split across two distinct roles. Monda handled all headline levels in regular weight, clean and geometric without being cold. Audiowide handled topic numbers at 60pt with 10% letter spacing, giving the curriculum structure a stamp-like presence that made navigating phases feel intentional rather than arbitrary. Inter Light carried all body copy, subtitles, quotes, and list items, keeping the reading experience low-friction once you were inside content. The illustration style followed the same logic: 2D pop art characters, bold, friendly, and retro-chic, were chosen specifically to counterbalance information density. A curriculum platform has a lot to say; the illustrations gave the eye somewhere to rest.
Splitting design and code without losing consistency
Because we each had to code our own sections, I coded the video/curriculum pages myself, and then went back through every other teammate's code afterward to check it against a shared structure, naming conventions, component patterns, the same handful of decisions that keep four people's code from reading like four different sites stitched together. That review pass was as much a part of my role as leading design decisions: as team lead, the job wasn't to have the loudest opinion in the room, it was to make sure everyone's ideas made it into the product fairly, while still holding the line on what the MVP needed to be.
Putting It in Front of People
We tested the prototype with people in roughly the same position as our original interviewees, and the findings validated the two biggest structural bets we'd made.
- The minimalist layout was easy to follow, and testers said it made the key features, the curriculum path especially, stand out rather than compete with decoration
- The per-topic color coding helped people track where they were in the curriculum without being told explicitly
- Pairing video and written summaries on every topic was called out specifically as useful for accommodating different learning styles
The same testing also surfaced the features we'd cut for scope, mentorship matching, community forums, and a job board, as things people wanted next. We treated that as confirmation rather than a miss: those ideas were good in our scope ledger for a reason, and now we had real user signal, not just internal instinct, pointing at them as the right next phase rather than the right first one.
Results & Reflection
This was a bootcamp final project on a fixed timeline, not a shipped product, there's no deployment or usage data to point to. What I can speak to is the process: real interviews that shaped a genuine prioritization decision, a built and reviewed codebase across four people, and usability testing that confirmed both what we built and what we were right to defer.
Pull final screenshots and the Figma prototype link in once available, lo-fi through hi-fi, to show the progression from wireframe to the final UI/UX Nest branding.
What I'd do differently: set an explicit scope budget before ideation started, not during it. The ledger above worked, but we built it reactively, after feature ideas had already multiplied and people were attached to them. Naming the budget up front would have made the cuts feel like a plan we'd agreed to in advance, rather than a negotiation we had to have in the moment, every time.