Cecilia Kim Design Project Launch Framework

// When should you use the Design Project Launch Framework?

Use this skill at the very start of any new design engagement — freelance or internal — before a single screen is designed. Trigger it whenever you need to onboard a client, establish visual direction, or structure a project across UI, UX, branding, or landing page deliverables.

// What information do you need before starting a design project?

• Project typerequired
  Is this a product (web/mobile app), landing page/website, branding/identity, or a combination?
• Client's product descriptionrequired
  What problem does the product solve, who is it for, and what makes it different from alternatives?
• Existing brand assets
  Any existing logos, colors, typography, or previous design work the client has. Can be none.
• Client's visual references
  Apps, websites, or brands the client admires. Can be vague (e.g. 'something minimal').
• Timeline and budget constraintsrequired
  Deadlines and financial scope for the project.
• Decision-maker structurerequired
  Is one person approving all work, or is there a team involved in sign-off?
• Feature wishlist
  Everything the client wants the product to do, including dream ideas and competitor features they admire.

// What core principles guide this design launch method?

// How do you apply the Design Project Launch Framework step by step?

1. 1

   Identify the project type and set the psychological frame

   Determine upfront whether this is product design (mobile/web app), landing page/website, branding/identity, or a combination. Each has a different psychological goal: product design = reduce cognitive load and friction; landing pages = persuasion and removing hesitation; branding = emotional connection and familiarity. This frame changes every decision from step one. If it is a combined engagement, plan to sequence branding → product UI → landing page.

2. 2

   Run the Design Discovery Call

   This is one of the most important conversations in the entire project. Capture: (1) what the product is at a fundamental level — problem it solves, who it is for, what makes it different; (2) ideas and features the client has in mind; (3) any visual direction or references they can point to — apps, websites, brands they admire; (4) existing brand assets or previous design work; (5) timeline and budget constraints; (6) the decision-maker structure — one approver or a team? It is completely okay if the client has no visual direction. Document everything and follow up with a written summary to ensure both sides are fully aligned on what the project involves.

3. 3

   Run the Screenshot Frenzy — UI inspiration gathering

   This phase is purely visual — completely separate from UX research. Go wide: Mobin (real shipped products, filter by app name, screen type, industry, or UI pattern), Twitter design accounts, Dribbble (polished, experimental, great for imagination), Behance (full case studies with process reasoning), Spotted and Prod (live product UI). Save everything that catches your eye without judging in the moment. Cast a wide net. Apply the UI lens only: ask how colors work together, what emotions they evoke, how gradients and shadows are used, what the spacing feels like, how typography creates visual hierarchy.

4. 4

   Organize screenshots into distinct vibes and categories

   After the screenshot frenzy, divide saved references into clear, named visual directions — e.g., clean and minimal with white space and restrained typography; colorful and bold with saturated colors and playful elements; dark mode with high contrast and dramatic lighting. Organize what emerged organically from your research. Also factor in industry design language conventions: AI products use soft gradients and depth; crypto/web3 uses neon, dark mode, geometric shapes; fintech uses blue, white space, conservative typography; health/education uses bright approachable colors; sleep apps use purple and deep blue. Know these conventions so you can choose intentionally to follow or break them.

5. 5

   Build abstract mood boards on Pinterest

   Separate from UI screenshots, create mood boards that capture the overall emotion the product should convey — not specific screens or UI patterns. Include photography, illustration, color palettes from nature or art or fashion, textures and materials. The question to answer is: should this product feel cozy and warm, clean and professional, bright and energetic? This helps align with clients who cannot articulate a UI style but can point to a mood board and say 'yes, this feels correct' or 'this feels too cold and corporate.'

6. 6

   Present curated directions to the client and align on visual direction

   Organize all screenshots and mood boards in Figma, divided into clear sections — each section is a distinct direction or vibe. Add labels and notes to guide the client. Do not dump hundreds of screenshots on them without a framework. Walk them through each direction in a meeting, explain your thinking, and let them react. The client will pick one to three directions that resonate. They may say 'I love the color of this style but the typography of that one.' By the end of this meeting, vague words like 'modern' or 'clean' are replaced with concrete shared references. This is the alignment moment — the client now has ownership over the visual direction.

7. 7

   Create UI mockup explorations — three to five options

   Translate the agreed inspiration and mood board direction into actual mockup screens — visual explorations only, not fully designed screens with real content or features. These are not UX wireframes. Show different executions of the chosen direction: vary rounded vs angular shapes, color balance using primary vs secondary colors, typography hierarchy, information density, shadow weight. Create approximately three to five options so the client has choices without being overwhelmed. The client will mix and match elements across options — this is expected and normal. The goal is to help them understand their own preferences and develop a vocabulary to express exactly what they want.

8. 8

   Finalize UI direction from client feedback

   After the client picks and combines preferred elements across mockup options, synthesize those choices into one consolidated UI direction. This is the locked visual language: colors, typography, spacing, hierarchy, shadow style, corner radius, and overall visual personality. Do not proceed to UX until this is approved. Having UI locked means you will not be trying to do two things at once in later phases.

9. 9

   Run the Feature Brain Dump

   Now switch completely into UX mode — the mindset is entirely different. Get every single thing the client wants the product to do on the table: every dream idea, every feature they have seen in competitor apps they might want to include. Do not judge or filter at this stage. Capture the complete vision even if you know things will change. It is important to let the client express their full vision before narrowing anything down.

10. 10

    Refine to the MVP

    MVP = minimal viable product — only the core features that genuinely must be there for the product to launch. This typically results in approximately three to five main screens and features. Have an honest conversation with the client: cutting features from the MVP does not mean those features will not exist in the future; it means you are being strategic about what to build first. Build based on real user feedback, not assumptions. This is often a hard conversation but leads to better products.

11. 11

    Map the screen flow

    Create a simple diagram — screens as labeled boxes, arrows showing navigation paths. This is the map of how a user will move throughout the product. Example: product viewed → add to cart → cart screen → payment info → confirm → confirmation screen. Each step is a screen, each arrow is a user action. Use this map to identify missing steps and unnecessary steps. Gaps and confusion in the flow are much cheaper to fix here than after wireframes are built.

12. 12

    Create wireframes one screen at a time

    Wireframes are low-fidelity layouts — black, white, or grayscale — showing structure and placement of elements without any visual detail. Simple boxes and rectangles indicate buttons, text areas, and images. The point is to solve structural problems without being distracted by colors or fonts. Apply the UX lens: where is the search bar? Are primary buttons easy to reach on a phone? Are tap targets big enough? Does the flow make sense? How many steps does it take to complete a core task? Use Mobin filtered by screen type and UI pattern to study how other apps handle navigation, search, settings, checkout flows, and profile screens — follow conventions users already understand unless you have a clear reason to break them.

13. 13

    Share wireframes with client for iterative feedback

    Share wireframes as they are built and collect feedback in structured rounds. Be flexible but protect yourself with clear contract terms: specify how many revision rounds are included per phase and what counts as a revision vs a new feature request. Structured revision rounds prevent scope creep and encourage clients to give consolidated, helpful feedback rather than drip-feeding small changes indefinitely. Additional revisions beyond the agreed rounds are billed separately.

14. 14

    Combine UI and UX — apply visual direction to approved wireframes

    Once wireframes are client-approved, take the locked UI direction — colors, typography, hierarchy, spacing, visual personality — and apply it to each wireframe screen. This is where the product starts to feel real. Check in with the client after a few main screens to confirm direction. Expect small tweaks — a color that looked great on a mockup may not work on a dense information screen, spacing may need adjustment when everything is in place — but there should be no major surprises since the big decisions were made earlier. Also create all additional state screens: error states, empty states, loading states, and success states.

15. 15

    For branding projects: develop brand concepts from mood board direction

    After aligning on mood board direction (same process as product design), create several logo directions that each interpret the agreed-upon mood differently. Present to client, discuss what resonates, allow mixing and matching of elements. Once the logo is finalized, build the rest of the brand system around it: color palette (primary and secondary colors across all touchpoints), typography system (headline, body, special applications with usage guidelines), logo variations (full logo, simplified icon, light/dark background versions), and additional elements as scoped — tagline, illustration style, photography direction, iconography standards, motion principles. Reference full brand identity systems from Figma Community (Airbnb, Uber, Google, etc.) to see how all elements work together. Use fonts.google.com for typography exploration — font personality shapes brand personality significantly.

16. 16

    For landing page projects: define the primary goal and map required sections

    Before touching any visual design, determine exactly what the landing page must accomplish — app downloads, waitlist signups, user education, pricing transparency, or lead generation. The goal dictates every section included and which elements to emphasize. Then apply UX lens to structure: what does the hero communicate? Is a feature section needed and how should it be organized? Is a pricing section needed? Sections should build on each other top to bottom — this sequencing is a UX decision. Anticipate visitor objections and answer them on the page: Why trust this company? What makes it different? How much does it cost? What do others think? Is it easy to use? Then apply UI lens for look and feel — apply the brand identity to create a cohesive, recognizable page. Use Mobin's landing page section to study how real companies structure hero sections, feature sections, pricing tables, testimonials, and footers. Browse Framer templates for layout, interaction, and animation inspiration.

// What does this framework look like in real projects?

// What mistakes should you avoid when starting a design project?

• Expecting the client to deliver a complete brief with everything figured out — clients know what they want only when they see it; your job is to show options and guide reactions.
• Mixing UI and UX research into a single phase — saving a screenshot because it looks beautiful is UI inspiration; saving it because the layout is smart and the flow is intuitive is UX inspiration. Keep these completely separate.
• Starting product or landing page design before branding is finalized — you will most likely have to redo a lot of the work when the brand direction changes.
• Dumping hundreds of raw screenshots on the client and asking what they think — this is overwhelming and gives them no framework for making decisions. Always curate into distinct, labeled directions.
• Designing UX structure (wireframes, flows) before the UI direction is locked — you end up trying to do two things at once and producing confusion.
• Accepting the full feature wishlist as the project scope without refining to an MVP — clients often come with huge lists, but designing everything at once prevents you from doing any of it well.
• Allowing projects to drag on with scope creep — without a contract specifying revision rounds per phase and what constitutes a new feature request vs a revision, projects expand indefinitely.
• Breaking design conventions without understanding what they are first — you should know the norms in the specific industry before deciding to follow or intentionally deviate from them.
• Reinventing UX patterns that users already understand — if your navigation works differently from any other app in your category without a clear reason, you are creating unnecessary friction.
• Skipping the written follow-up summary after the Discovery Call — verbal alignment is not enough; both sides must be fully aligned in writing on what the project involves before moving forward.

// What are the key terms in the Design Project Launch Framework?

Design Discovery Phase

The introductory client call whose goal is to extract maximum context: what the product is, what problem it solves, who it is for, what makes it different, what features are envisioned, any existing visual direction, and all practical constraints including timeline, budget, and decision-maker structure. One of the most important conversations in the entire project.

Screenshot Frenzy

An uninhibited, wide-net inspiration gathering session where the designer saves everything that catches their eye across multiple sources (Mobin, Dribbble, Behance, Twitter, Spotted, Prod) without judging in the moment. Filtering and organization into distinct vibes happens afterward.

UI Lens

The perspective applied when evaluating design references purely for aesthetics and emotional response: how colors work together, what emotions they evoke, how gradients and shadows are used, what spacing feels like, and how typography creates visual hierarchy. UI is what someone feels before they even interact with the product.

UX Lens

The perspective applied when evaluating design for usability, clarity, logic, and how well the product works for real users: placement of navigation elements, tap target sizes, accessibility, how many steps complete a core task, and whether the flow makes sense. Good UX is often invisible because when things work well, users simply accomplish what they came to do.

Distinct Vibes

The named categories that emerge organically during the Screenshot Frenzy — curated groups of references that each represent a coherent visual direction (e.g., clean and minimal, colorful and bold, dark mode high contrast). These are presented to the client as separate, understandable options rather than a random pile of screenshots.

Mood Board

An abstract, conceptual collection of images gathered primarily from Pinterest that captures the overall emotion a product or brand should convey — photography, illustration, color palettes from nature or art or fashion, textures and materials. These are not UI references; they are feeling references used to align with clients who cannot articulate a visual style but can react to emotional cues.

MVP (Minimal Viable Product)

Only the core features that genuinely must exist for the product to launch — typically three to five main screens and features. Cutting features from the MVP does not mean those features will not exist in the future; it means being strategic about what to build first so the team can learn from real users and refine based on real feedback.

Feature Brain Dump

The UX phase where every single feature the client wants — dream ideas, competitor features, long-term vision — is captured on the table without judgment or filtering. The complete vision must be expressed before any narrowing happens.

Screen Flow

A simple structural diagram — screens as labeled boxes, arrows indicating navigation paths — that maps how a user will move throughout the product. Used to identify missing steps and unnecessary steps before wireframes are built.

Wireframes

Low-fidelity layouts in black, white, or grayscale using simple boxes and rectangles to represent buttons, text areas, and images. Wireframes focus purely on structural problems — layout and placement — without any visual detail like colors or fonts.

Industry Design Language

The visual patterns, conventions, and trends that users in a specific industry have come to expect — e.g., blue for fintech trust, purple/deep blue for sleep, neon dark mode for crypto, bright approachable colors for health and education, soft gradients and depth for AI products. Understanding these conventions is essential for making intentional choices about when to follow or break from them.

UI Mockup Explorations

Three to five visual exploration screens created after visual direction alignment — not fully designed screens with real content, but concrete executions of the chosen direction showing different approaches to color balance, typography, shape language, shadow, spacing, and hierarchy. Used to help clients understand their preferences and develop vocabulary to express what they want.

// FREQUENTLY ASKED QUESTIONS