Product Designer

Teammie: Solving the “Experience Paradox” for Junior Designers

Role:

Product Lead & Full-Stack Developer (Design + Code)

Team:

2 Designers

Timeline:

14 Weeks

Tech Stack:

Next.js, MongoDB, Tailwind CSS

Prototype:

View Live Site ↗

Summary

Junior designers face a difficult time in the experience gap. They need experience to get a job, but they need a job to get experience. Teammie is a two-sided marketplace designed to break this cycle by connecting design students with real-world engineering projects.

Unlike a traditional design project, I owned this product from concept to deployment. I led a team of 2 designers, managed the PRD, designed the UX/UI, and coded the final MVP in Next.js.

Solution

Teammie connects design students with engineers, designers, and businesses to collaborate on real-world projects. The platform helps students to find a designer who wants them to design their products, and only for designers who want to build a portfolio, gain experience, and develop the skills needed to excel in their careers.

Scroll to read more

The Problem

Through 5 user interviews with design students, we validated a critical friction point in the education-to-career pipeline.

The Experience Gap:

Students: 100% of interviewees wanted to solve real user problems but ended up doing generic "redesigns" because they couldn't find engineers to build their ideas.
Founders/Devs: Often have great functional ideas but lack the design skills to make them usable.

The Opportunity: Create a "dating app" for collaboration—matching technical founders with creative talent to ship portfolio-worthy products.

How might we bridge the gap between technical founders who need design help and students who need real-world experience, enabling themto build and ship portfolio-worthy products together?

Product Strategy

As the Project Lead, my first task wasn't design—it was Operations. I had 17 weeks to ship a working full-stack application.

The PRD (Product Requirement Document): I defined the MVP scope to ensure we didn't overbuild.

Must-Haves: User Auth, Project Posting, Filtering, Application System.
Nice-to-Haves (Cut): Real-time Chat, Portfolio Hosting (Moved to V2).

The Gantt Chart: I managed the cross-functional timeline, aligning design sprints with development sprints to ensure blocking issues were resolved early.

Gantt Chart

Interaction Architecture

Before touching pixels or code, I needed to define the structural logic of the application. I mapped the "Golden Path" for our two distinct users (Creators vs. Joiners) to ensure the system could handle the handshake between them.

The User Flow: I defined the step-by-step logic for project creation to minimize friction.

Logic: Sign Up → Create Profile → Post → Project Dashboard
Dev Impact: This flowchart didn't just guide the design; it became the direct blueprint for my

Next.js Routing structure, ensuring I knew exactly which routes (like `/dashboard` and `/create`) required authentication middleware vs. public access.

Usability Pivot

We conducted Mid-Fidelity testing with 3 users to validate the core flows. The results forced a major pivot in our information architecture.

The Failure:

The Issue: 100% of participants found the main "Category Filter" misleading. They expected it to sort by Industry (Fintech, Health), but it sorted by Role (Designer, Dev).
The Banner Blindness: 67% of users ignored the main value prop banner because it looked too much like an ad.

The Fix: I redesigned the filter logic to be explicit tags (Skill-Based) rather than generic categories, and moved the value proposition into the hero text for immediate readability.

Designing for Next.js

Designing for a product you have to code yourself changes how you approach UI. Since I am a designer and developer, I had to balance Aesthetic Ambition with Technical Feasibility.

The Constraint: I chose Next.js (React) for performance and SEO. This meant I needed a component-based design system that mapped 1:1 with React components.

The Execution:

Atomic Design: I built the Figma file to mirror the code structure (Atoms = Buttons, Molecules = Search Bars).
Grid Logic: I used Tailwind CSS utility classes in my head while designing, ensuring every padding and margin in Figma was a valid Tailwind class (e.g., `p-4`, `gap-6`).

Solution

Reflection

Cold Start Project:
Technically, the app works. But a marketplace needs liquidity (users) to be useful. I learned that building the platform is only 40% of the work; marketing it to get the first 10 project posts is the real challenge.

What I'd do differently:
I would focus on "Single-Player Mode"—building tools that are useful for a single user (like a Project Planner) to attract traffic before the network effect kicks in.