In DSGN-103, you learned the basics of UX — wireframing, user flows, and interface design. Now you're going deeper. This course is about understanding your users through research, building interactive prototypes that feel like real products, creating reusable UI kits that speed up your work, and iterating based on actual feedback instead of guessing.
Good UX isn't about making things pretty. It's about making things work — for real people, in real situations, with real frustrations. By the end of this course, you'll have a research-backed, tested, and refined design that you can confidently build or hand to a developer.
Every design decision should be backed by evidence, not assumptions. UX research gives you that evidence. You don't need a lab or a budget — you need curiosity and a willingness to listen to people who are not you.
Surveys
Surveys are the simplest way to gather data from many people at once. They work best for quantitative questions: "How often do you visit this site?" "What device do you use most?" "Rate this feature 1-5." Use Google Forms (free) to create surveys and distribute them through your email list, social media, or website.
Survey best practices:
- Keep it short. 5-10 questions maximum. Every additional question drops your completion rate by ~5%.
- Use closed-ended questions for data you want to analyze (multiple choice, rating scales) and one or two open-ended questions for insights you haven't thought of.
- Don't lead. "Don't you think our new design is great?" is a leading question. "How would you rate the new design?" is neutral.
- Test it. Send the survey to 3 friends first. If they're confused by any question, rewrite it.
User Interviews
Interviews give you qualitative depth that surveys can't. A 30-minute conversation with one user often reveals more than 100 survey responses. You're listening for stories, frustrations, workarounds, and language. Schedule video calls with 5-8 users (existing customers, followers, or target audience members). Record with permission.
Interview tips:
- Ask open-ended questions. "Tell me about the last time you..." not "Did you like..."
- Follow the thread. When they mention something interesting, ask "Tell me more about that."
- Don't sell or defend. You're here to learn, not to convince them your design is good.
- Take notes on exact words. The language your users use becomes the copy on your site.
Usability Testing
Usability testing is watching real people try to use your product. You give them a task ("Find and purchase an audio recording") and observe where they get confused, frustrated, or stuck. You can do this with a prototype — it doesn't need to be a finished product. Even 5 users will reveal the major usability problems. You can do this remotely over a video call with screen sharing.
🔨 Exercise 3.1: UX Research Plan
Plan and execute a small UX research study:
- Create a 7-question survey about your website or product using Google Forms
- Distribute it to at least 10 people (your email list, social media, friends in your target audience)
- Conduct 2 user interviews (15-20 minutes each) — record them and take notes
- Write a research summary: what did you learn? What surprised you? What should change?
Deliverable: Survey results, interview notes, and a 1-page research summary with actionable findings.
💡 Key Takeaway
You are not your user. What makes sense to you (the creator) doesn't always make sense to someone seeing your product for the first time. Research removes assumptions and replaces them with evidence. Even a tiny study beats no research at all.
Static wireframes show layout. Interactive prototypes show behavior. When you can click through a prototype that looks and feels like a real app, you can test it, present it to clients, and validate ideas before writing a single line of code. Figma makes this accessible for free.
Interactive Prototyping in Figma
Figma's prototyping mode lets you connect frames with interactions: click a button and navigate to another screen, hover over an element and see a tooltip, scroll through a feed. The result is a clickable prototype that simulates the real experience.
Key concepts:
- Flows — A flow is a connected series of frames that represent a user journey (e.g., landing page → product page → checkout → confirmation). Define your flows before you start connecting things.
- Interactions — The triggers (click, hover, drag, scroll) and responses (navigate, open overlay, swap component) that make your prototype interactive.
- Overlays — Modal windows, dropdown menus, and tooltips that appear on top of the current screen without navigating away. Essential for realistic prototypes.
- Scroll behavior — Set frames to scroll vertically or horizontally to simulate long pages and carousels. Fix elements like navigation bars so they stay in place while content scrolls beneath them.
Smart Animate
Figma's Smart Animate feature creates smooth transitions between frames when matching layers change properties (position, size, opacity, rotation). This lets you create sophisticated animations without a dedicated animation tool:
- Page transitions — Slide, fade, or dissolve between screens for a polished feel
- Micro-interactions — Button hover states, toggle switches, expanding cards
- Loading states — Skeleton screens transitioning to loaded content
- Onboarding flows — Step-by-step animations that guide users through features
The key to Smart Animate: keep layer names consistent between frames. If a button is called "btn-primary" on Frame 1, it must be "btn-primary" on Frame 2 for Figma to animate the transition between their states.
🔨 Exercise 3.2: Interactive Prototype
Build a multi-screen interactive prototype in Figma:
- Design a 5-screen user flow (e.g., homepage → category → product → cart → confirmation)
- Add click interactions to navigate between all screens
- Include at least 2 overlays (e.g., a modal and a dropdown menu)
- Use Smart Animate for at least 3 transitions (button hover, page transition, element state change)
- Test the prototype in Figma's presentation mode and fix any broken connections
Deliverable: A shareable Figma prototype link demonstrating a complete interactive user flow with animations.
💡 Key Takeaway
Interactive prototypes are your most powerful communication tool. They show clients, collaborators, and testers exactly how something will work — no imagination required. Build the habit of prototyping before building.
A UI kit is a library of reusable design components — buttons, input fields, cards, navigation elements, icons — that you use across all your projects. Think of it as your design toolbox. Instead of redesigning a button every time you need one, you grab it from your kit and drop it in. This speeds up your work dramatically and ensures visual consistency.
Figma Components
In Figma, a component is a reusable design element. When you create a component, every instance of it stays linked to the master. Change the master, and all instances update automatically. This is the foundation of any UI kit.
- Master components — The "source of truth." You define the component once (a button, a card, a form field) and it lives in your component library.
- Instances — Copies of the master that you use in your designs. They inherit the master's properties but can have individual overrides (like different text or colors).
- Variants — Different versions of the same component. A button component might have variants: primary, secondary, disabled, hover, and small/medium/large. All organized under one component.
What to Include in Your Kit
A complete UI kit for a creator's website should include:
- Typography — Heading styles (H1-H6), body text, captions, labels. Define size, weight, line height, and color for each.
- Colors — Your brand palette as color styles. Primary, secondary, accent, background, text, success, error, warning. Both light and dark mode if applicable.
- Buttons — Primary, secondary, ghost, disabled states. Small, medium, large sizes. Hover and active states.
- Form elements — Text inputs, dropdowns, checkboxes, radio buttons, toggles, text areas. All with default, focus, error, and disabled states.
- Cards — Product cards, content cards, profile cards. Reusable containers for displaying grouped information.
- Navigation — Header, footer, sidebar, breadcrumbs, pagination. The structural elements that appear on every page.
- Icons — A consistent icon set. Use a free library like Heroicons or Lucide for consistency.
- Spacing and grid — Define your spacing scale (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px) and grid system.
Auto Layout
Figma's Auto Layout makes components responsive. When you apply auto layout to a frame, its children automatically arrange themselves (like CSS flexbox). This means your button text can change and the button resizes automatically. Your card content can vary in length and the card adjusts. Learning auto layout is essential for building components that work in real design contexts.
🔨 Exercise 3.3: Build Your UI Kit
Create a comprehensive UI kit in Figma:
- Define your color palette as Figma color styles (at least 8 colors: primary, secondary, backgrounds, text, states)
- Create typography styles for H1-H4, body, caption, and label
- Build a button component with 3 variants (primary, secondary, disabled) and 2 sizes (medium, large) using auto layout
- Build 3 additional components: a form input field, a content card, and a navigation header
- Organize everything in a clean component page with clear sections and labels
Deliverable: A Figma file containing your complete UI kit with components, color styles, and typography styles.
💡 Key Takeaway
Your UI kit is a force multiplier. Building it takes time upfront, but every project afterward moves faster and looks more consistent. Start simple, add components as you need them, and keep it organized.
Design is never "done" on the first try. The best designs go through multiple iterations based on real feedback. The Module 1 research methods feed directly into this process: you research, design, test, learn, and redesign. This cycle is the core of professional UX work.
The Iteration Cycle
- Design — Create or update your design based on current knowledge
- Prototype — Build it into an interactive, testable prototype
- Test — Put it in front of real users and observe what happens
- Analyze — Identify patterns in the feedback. What confused people? What worked well?
- Prioritize — You can't fix everything at once. Focus on the changes with the biggest impact on usability
- Iterate — Make changes and go back to step 2
Most projects need 2-3 iterations to reach a solid design. The first version will have obvious issues. The second version fixes those but reveals subtler ones. By the third version, you're polishing rather than restructuring.
Processing Feedback
Not all feedback is equal. Learning to process feedback effectively is a core UX skill:
- Observe behavior, not just opinions. When a user says "I like this design" but took 45 seconds to find the buy button, their behavior is more revealing than their words.
- Look for patterns. If one person struggles with something, it might be them. If three people struggle with the same thing, it's your design.
- Separate problems from solutions. Users are excellent at identifying problems ("I couldn't find X") but often suggest bad solutions ("You should add a popup"). Listen to the problem, then design the solution yourself.
- Quantify when possible. "Task success rate dropped from 90% to 60% after the redesign" is actionable. "Some people didn't like it" is not.
Design Handoff
When your design is tested and refined, you need to hand it off for development — even if the developer is you. Figma's Inspect panel shows CSS values, measurements, and colors for every element. Add annotations for interactions that aren't obvious from the static design: hover states, loading behavior, error handling, edge cases (what happens when a name is 50 characters long?). Clear handoff documentation prevents "that's not what I designed" moments.
🔨 Exercise 3.4: Test, Iterate & Deliver (Course Deliverable)
Complete a full iteration cycle on your prototype:
- Run a usability test with your interactive prototype from Exercise 3.2 — have 3-5 people attempt specific tasks while you observe
- Document findings: what worked, what confused people, task success rates
- Prioritize the top 3 issues to fix
- Redesign and update your prototype based on the findings
- Prepare a design handoff document: annotated screens, interaction notes, component specifications
Deliverable: Usability test findings, a revised prototype link, and a handoff document ready for development.
💡 Course Complete
You now have real UX research skills, can build interactive prototypes, maintain a UI kit, and iterate designs based on evidence. This is professional-level UX work. Next up: GRPH-200 Advanced Image & Video Editing, where you'll level up your visual production skills.