heydesigner.com

Product design is the end-to-end process of deciding what a digital product should do, how it should work, and how it should look and feel — then shipping it and improving it based on real use. It runs from early research and strategy through wireframes, prototypes, usability testing, and design handoff, and it continues after launch through iteration. It's the right lens when you're building or reshaping an actual product (an app, a platform, a service experience) rather than producing a one-off asset like a logo or a campaign. If your problem is "we need a thing that works and that people can use," that's product design. If it's "we need to be recognized and understood," that's closer to branding.

How product design differs from UX, UI, and branding

These terms overlap in practice, but they answer different questions. The distinctions matter most when you're scoping a project or hiring.

Product design is the broadest of the four: it usually contains UX and UI work, and it needs to stay consistent with branding. A product designer may do all of this on a small team, or specialize on a large one. The practical test is scope — if the work includes deciding what to build and owning the result after launch, it's product design, not just UX or UI execution.

What the work actually involves, stage by stage

A typical engagement moves through these stages. They aren't strictly linear — research often reopens after testing — but each stage has a concrete purpose and output.

1. Discovery and framing

Understand the business goal, the users, and the constraints. Inputs: stakeholder interviews, existing analytics, support tickets, competitive review. Output: a clear problem statement and success criteria you can measure later.

2. Research

Talk to users, observe behavior, and review data. The goal isn't a report — it's decisions. Output: user needs, jobs-to-be-done, and prioritized problems worth solving.

3. Strategy and structure

Decide what to build first and how it fits together. Output: information architecture, user flows, and a rough scope. This is where a product designer earns their keep — choosing what not to build.

4. Wireframes and prototypes

Move from structure to testable form. Low-fidelity wireframes test layout and logic cheaply; interactive prototypes test whether people can complete a task. Output: wireframes, clickable prototypes, and the questions each is meant to answer.

5. Usability testing

Put prototypes in front of real users and watch what breaks. Output: usability findings ranked by severity, plus specific fixes. Testing five users surfaces most major issues; you don't need a large sample to learn a lot.

6. Visual design and design systems

Apply the brand and build reusable components. A design system — tokens, components, states, and usage rules — is what keeps a product consistent as it grows. Output: high-fidelity screens and a documented component library.

7. Handoff and build support

Give engineers what they need: specs, states (empty, loading, error, edge cases), assets, and access to the design file. Handoff is a conversation, not a file drop — expect questions and adjust in review.

8. Iteration after launch

Ship, measure against the success criteria from discovery, and improve. Output: prioritized changes based on real behavior, not opinion.

Common deliverables

• Problem statement and success metrics
• User research findings and personas or jobs-to-be-done
• User flows and information architecture
• Wireframes and interactive prototypes
• Usability test findings with severity ratings
• High-fidelity screens and a design system
• Developer specs covering states and edge cases
• Post-launch iteration recommendations

How product designers work with everyone else

Product design sits between business, engineering, and the user, so most of the job is coordination.

• With product managers: align on priorities, scope, and what "done" means. The PM owns the why and when; the designer owns the what and how it works.
• With engineers: agree early on feasibility and constraints. Involving engineers during wireframing prevents expensive rework later.
• With marketers and brand: keep the product consistent with how the company presents itself. A strong identity that the product ignores creates a credibility gap.

The site's own framing supports this: Kevin Woo Designs describes combining "strategic expertise with hands-on support" and delivering "measurable results across every touchpoint," with services spanning product strategy, UI/UX design, design systems, and growth. That's the product-design range — strategy through shipped interface — rather than a single narrow craft.

Signs a product design effort is going wrong

Watch for these, and course-correct early:

• Design starts before the problem is defined. If no one can state the user problem and how you'll measure success, you're decorating, not designing.
• Prototypes never meet real users. Untested assumptions are the most common source of rework.
• No design system. Inconsistency creeps in, and every new screen costs more than the last.
• Handoff is a file drop. If engineers can't ask questions, edge cases get guessed and quality drops.
• Launch is treated as the finish line. Without a measurement and iteration plan, you can't tell whether the design worked.

A concrete example

Take a redesign of a daily-use tool for a chronic condition, like the insulin pump work described on the site. The product-design version of that job isn't "make the screen prettier." It's: research how people actually manage treatment day to day, define what the tool must teach versus what it must do, structure the flow so it fits into a real routine, prototype and test it with users, design the interface and its states, hand it to engineers with edge cases covered, then measure whether people use it correctly and iterate. That's the full arc — and it's why product design is a process, not a deliverable.

If you're scoping this work, start by writing down the problem and how you'll know it's solved. Everything else follows from getting that right.

UX design is the end-to-end process of shaping how people experience a product—researching who they are, structuring what they need, testing whether it works, and refining it until it does. It is not the same as UI design, though the two overlap heavily in practice. If you are hiring for UX, evaluating a UX portfolio, or deciding whether your project needs a UX engagement, the sections below cover what the work actually includes, what it produces, and where it stops.

UX design is about the whole experience, not the screens

A common misconception is that UX is "how the app looks and feels." That is closer to UI. UX covers the full arc of a person's interaction with a product: how they find it, what they expect, what they do first, where they get stuck, and whether they come back.

Kevin Woo Designs frames its work as "creating impactful designs with strategic vision, delivering measurable results across every touchpoint"—the phrase every touchpoint is the tell. UX work spans onboarding emails, error states, empty screens, and support flows, not just the polished hero screen.

The core activities of a UX engagement

Most UX projects move through these stages, though the order flexes and stages repeat.

1. User research

Interviews, surveys, analytics review, and competitive audits. The output is not "insights" in the abstract—it is a set of documented user needs, pain points, and jobs-to-be-done that later decisions can be traced back to.

2. Information architecture

Deciding what content and features exist, how they are grouped, and how users navigate between them. Deliverables include sitemaps, navigation models, and content inventories.

3. Wireframes and user flows

Low-fidelity layouts and step-by-step diagrams showing how a user moves through a task. Wireframes deliberately strip out visual design so the structure can be evaluated on its own.

4. Prototypes

Clickable or coded versions of the flow that let someone actually try it. Fidelity ranges from a linked set of screens to a near-functional build.

5. Usability testing

Watching real or representative users attempt tasks, then recording where they succeed, hesitate, or fail. Findings are usually ranked by severity and tied to specific screens.

6. Iteration

Fixing what testing surfaced, then testing again. This loop is where most of the value accumulates.

UX vs. UI: where the line actually sits

In practice the roles blur. At small studios and startups, one designer often does both. Kevin Woo Designs lists "Product UI, UX Design" as a single service line alongside "Design Systems" and "Product Strategy," which reflects how most real engagements are scoped—not as two separate hires but as one continuous effort.

What a UX deliverable looks like

If you are reviewing a proposal or a portfolio, here is what to expect from genuine UX work versus a visual mockup:

UX deliverables

• A research summary with quoted user statements and source
• A user flow diagram with decision points marked
• Annotated wireframes explaining why each element is placed where it is
• A usability test report with task success rates and severity-ranked issues
• A prioritized backlog of recommended changes

Visual mockup (UI)

• High-fidelity screens showing color, type, imagery, and spacing
• Component states (hover, disabled, error)
• A style guide or design system reference

A mockup alone tells you what the product will look like. It does not tell you whether anyone can use it.

How UX connects to strategy and measurable outcomes

UX is not a downstream polish step. It feeds directly into product strategy: research determines which problems are worth solving, and testing determines whether the chosen solution actually solves them.

Kevin Woo Designs describes combining "strategic expertise with hands-on support for sustainable growth" and cites over 380 successful projects and 100+ clients, with more than 80% of work coming from referrals. Referral-heavy studios typically earn that repeat business because UX decisions are tied to outcomes clients can see—conversion, retention, task success—rather than to aesthetic preference.

The concrete link usually looks like this:

• Research identifies a drop-off point in a signup flow
• Wireframes and a prototype propose a restructured flow
• Usability testing measures whether completion improves
• Design system updates lock in the fix so it applies everywhere

That chain is what separates a UX engagement from a redesign.

When you actually need UX work

You likely need a UX engagement if:

• Users complete tasks but slowly, or abandon partway
• Support tickets repeat the same confusion
• You are adding a feature and do not know where it belongs
• You are entering a new market or audience (Kevin Woo Designs notes tailoring experiences that "honored both Eastern nuance and Western expectations" for a global audience—a case where research into user expectations is not optional)
• You have analytics showing a problem but no explanation for it

You may not need a full UX engagement if the structure is validated and you only need visual refinement, or if you are testing a concept too early to have users to research.

FAQ

Is UX design the same as product design? Largely overlapping. Product design usually implies broader ownership—strategy, roadmap input, and business outcomes—while UX is more focused on the user-facing experience. Many studios use the terms interchangeably.

How long does a UX engagement take? It depends on scope. A focused usability study can run in weeks; a full research-to-design-system effort runs in months. Ask for a phased proposal so you can stop after research if the findings change your priorities.

Can UX be done after the UI is designed? It can, but it costs more. Testing a finished visual design usually surfaces structural problems that require redoing the visual work. Testing wireframes catches the same problems earlier and cheaper.

What should I ask a UX designer in an interview? Ask them to walk through a project where testing changed their recommendation. If they cannot name a specific instance where user evidence overrode their initial instinct, you are likely talking to a UI designer with a UX title.

Icons8 is a library of icons, illustrations, and 3D assets drawn by its own designers so that styles stay consistent across formats, available for download in SVG and PNG, with an MCP server for AI agents and coding tools. It fits designers who need a matching set fast — a UI, a deck, or a landing page — and who want vector files they can still edit. It is less suited to work that requires a fully custom visual language, since ready-made assets carry the house style of whichever set you pick.

Start by matching the asset style to the project

The fastest way to waste time is to pick assets one at a time by look. Decide the style first, then filter everything to that style.

The consistency claim in Icons8's own description — icons and illustrations "drawn by our own designers so every style matches" — is the practical reason to filter by one style across all three asset types rather than mixing a 3D illustration with an outline icon set.

Pick the file format by what happens next

• SVG — editable vector. Use it when the asset will be recolored, resized without loss, animated, or handed to a developer. This is the default for UI work.
• PNG — raster. Use it for quick mockups, slides, and anywhere you cannot paste or render vector files.

If you are unsure, download SVG. You can always export a PNG from it later; you cannot cleanly go the other way.

Keep a set consistent

1. Choose one style (for example, a single outline weight) before searching.
2. Filter icons, illustrations, and 3D to that same style so a page does not mix visual languages.
3. Reuse the same icon for the same meaning across screens — a second "settings" icon in a different style is a common slip.
4. Check the set covers your edge cases (empty states, errors, onboarding) before committing, not after you have built ten screens.

Check licensing and pricing before client work

Icons8 lists a pricing page, which is the place to confirm what a given use requires. Before shipping assets in client or commercial work, verify the license terms for the specific asset and plan rather than assuming downloads are unrestricted. Pricing and plan details are not covered here — check the site directly, since terms and prices change.

Getting assets into your workflow

• Figma and design tools — SVG imports as editable vector layers, so you can recolor and resize inside the file.
• Web — SVG inline or as a file keeps icons sharp at any size and lets CSS control color.
• Presentations — PNG avoids font and vector rendering issues in slide software.

Icons8 also offers an MCP server for AI agents and coding tools, which is relevant if you are wiring asset lookup into an automated or agent-driven workflow rather than browsing manually.

Customize or download ready-made?

Download ready-made when the asset is generic — a search icon, a folder, a chart — and speed matters more than uniqueness. Customize (recolor, adjust stroke, simplify) when the asset sits in a branded context or appears at large size where its original style would clash. Build fully custom only when the visual language itself is the product, since that is where a shared library stops helping.