Beautiful design means nothing if people can't use it. User Experience Design (UX) is the practice of making things that actually work for real humans — not just things that look pretty in a portfolio. This course teaches you to think like a user before you think like a designer.
By the end of this course, you'll understand user-centered design principles, know how to research your audience, wireframe solutions, prototype interactions, and build with reusable UI components. You'll be working in Figma (free tier) for all practical work.
UX isn't just a buzzword on a job listing. It's a discipline — and it starts with understanding what it actually means and why it matters for everything you create.
What Is UX?
User Experience (UX) is every interaction a person has with your product, service, or content. It's the entire journey: discovering your site, navigating it, completing a task, and deciding whether to come back.
UX encompasses:
- Usability — Can they accomplish what they came to do?
- Accessibility — Can everyone use it, regardless of ability?
- Desirability — Do they want to use it? Does it feel good?
- Findability — Can they find what they're looking for?
- Credibility — Do they trust it?
Notice that "looks nice" isn't on the list. That's UI (user interface), which is a piece of UX, not the whole thing. A gorgeous website that nobody can navigate has terrible UX.
User-Centered Design (UCD)
UCD is the core philosophy: design for the user, not for yourself. This sounds obvious, but it's the most violated principle in design. Creators constantly build what they think is cool instead of what their audience actually needs.
The UCD process:
- Understand — Research who your users are and what they need
- Specify — Define the problems you're solving
- Design — Create solutions (wireframes, prototypes)
- Evaluate — Test with real users, gather feedback
- Iterate — Improve based on what you learned, then repeat
This isn't a one-time process. It's a loop. Ship, learn, improve. The best products aren't designed perfectly the first time — they're refined through iteration.
The Design Thinking Process
Design thinking is a structured approach to creative problem-solving. It has five stages:
- Empathize — Observe and interview your users. Understand their frustrations, goals, and behaviors. Don't assume — ask.
- Define — Synthesize your research into a clear problem statement. "Users need a way to [goal] because [insight]."
- Ideate — Generate lots of possible solutions. Quantity over quality here — brainstorm without judgment.
- Prototype — Build quick, rough versions of your best ideas. Paper sketches, clickable wireframes, anything testable.
- Test — Put prototypes in front of real users. Watch them use it. Don't explain — observe.
If you're not embarrassed by your first prototype, you spent too long on it.
💡 Key Takeaway
UX is about empathy, not decoration. Every design decision should answer: "Does this help the user accomplish their goal?" If not, cut it.
🔨 Exercise 1.1: UX Audit
Pick a website or app you use regularly. Spend 20 minutes evaluating it across the five UX dimensions (usability, accessibility, desirability, findability, credibility):
- Try to complete 3 common tasks. Time yourself. Note any friction.
- Rate each dimension 1-5 and explain why
- Identify 3 things that work well and 3 things that frustrate you
- Propose one improvement that would have the biggest impact
Deliverable: A 1-page UX audit with ratings, observations, and your improvement proposal.
You can't design for users you don't understand. Research isn't optional — it's the foundation everything else is built on. Skip it, and you're just guessing with extra steps.
Personas
A persona is a fictional but research-based representation of your target user. Not a demographic profile — a character with goals, frustrations, and behaviors.
A good persona includes:
- Name and photo — Makes them feel real. Use stock photos, not real people.
- Demographics — Age, occupation, location. Keep it brief.
- Goals — What are they trying to accomplish? Why?
- Pain points — What frustrates them about current solutions?
- Behaviors — How do they currently solve this problem? What tools do they use?
- Quote — A one-liner that captures their mindset. "I just want to find what I need without clicking through 10 pages."
Most projects need 2-4 personas. More than that and you're designing for everyone, which means you're designing for no one.
User Stories
User stories translate user needs into actionable requirements. The format:
"As a [type of user], I want to [action] so that [benefit]."
- "As a new visitor, I want to see pricing upfront so that I can decide if this is in my budget."
- "As a returning listener, I want to find new content easily so that I don't have to scroll through things I've already heard."
- "As a mobile user, I want to navigate with one hand so that I can browse while commuting."
Write user stories for every feature you plan. They keep you focused on why something exists, not just what it does.
Journey Mapping
A user journey map visualizes the complete experience a user has with your product, from first awareness to long-term loyalty (or abandonment).
A journey map includes:
- Stages — Awareness → Consideration → First Use → Regular Use → Advocacy
- Actions — What is the user doing at each stage?
- Thoughts — What are they thinking? What questions do they have?
- Emotions — Are they excited, confused, frustrated, satisfied?
- Touchpoints — Where do they interact with you? (social media, website, email, etc.)
- Opportunities — Where can you improve the experience?
Map the journey as it currently is (warts and all), then create an ideal version you're designing toward.
💡 Key Takeaway
Research isn't about getting the "right answer." It's about reducing how wrong you are. Even 5 user interviews will reveal patterns you never would have guessed.
🔨 Exercise 2.1: Create 3 User Personas
Build 3 personas for your target audience (the audience from your creator business plan or a project you're working on):
- Research first: browse relevant subreddits, read comments, look at who's engaging with similar content
- For each persona, fill out: name, photo, demographics, goals, pain points, behaviors, and a quote
- Make them different from each other — they should represent distinct segments of your audience
- Write 3 user stories for each persona (9 total)
Deliverable: 3 completed persona cards with user stories. Use Figma, Google Docs, or even a simple template.
Before you design anything pixel-perfect, you need to figure out what goes where and how it flows. That's wireframing. And before you build anything real, you need to test if it works. That's prototyping.
Low-Fidelity Wireframes
Low-fi wireframes are rough sketches of layout and structure. No colors, no real images, no fancy fonts. Just boxes, lines, and labels.
Why start low-fi:
- Speed — You can sketch 10 ideas in the time it takes to design one
- Focus — Without visual polish, feedback stays on structure and flow
- Low attachment — It's easier to throw away a sketch than a polished design
- Collaboration — Anyone can understand and contribute to a wireframe
Start on paper. Seriously. Grab a pen and sketch out your screen layouts. Draw rectangles for images, lines for text, and boxes for buttons. Five minutes of sketching saves hours of Figma rework.
Mid-Fidelity Wireframes
Once you've settled on a direction from your sketches, move to digital wireframes in Figma. These are cleaner but still grayscale:
- Use real content hierarchy (actual headlines, realistic text lengths)
- Show proper spacing and alignment
- Include all interactive elements (buttons, form fields, links)
- Design for mobile first, then expand to desktop
High-Fidelity Prototypes
High-fi prototypes look like the final product. Real colors, real images, real interactions. In Figma, you connect frames together to create clickable flows that simulate the actual experience.
Building a prototype in Figma:
- Design your screens — Each major view is a separate frame
- Connect interactions — In Prototype mode, drag connections between elements and frames
- Set transitions — Choose animations (dissolve, slide, instant) that feel natural
- Add smart animate — For elements that exist on both screens, Figma will animate between states
- Test in Preview — Click the Play button to walk through your flow
Figma Essentials for This Course
You'll need these Figma basics:
- Frames — The container for each screen. Use device presets (iPhone 14, Desktop 1440px).
- Auto Layout — Makes elements stack and space automatically. Essential for responsive thinking.
- Components — Reusable elements (buttons, cards, nav bars). Change the master, all instances update.
- Prototype mode — Tab at the top of the right panel. This is where you connect screens.
- Styles — Save colors, fonts, and effects as reusable styles. Your mini design system.
💡 Key Takeaway
The purpose of a wireframe isn't to look good — it's to think clearly. Sketch first, refine later, and always test with someone who isn't you.
🔨 Exercise 3.1: Wireframe a Mobile App Screen
Design a key screen for a mobile app (your own project or a practice concept):
- Sketch 3 different layout options on paper (take photos of your sketches)
- Pick the best one and recreate it in Figma as a mid-fidelity wireframe
- Include: navigation, main content area, at least one interactive element (button, form, etc.)
- Use proper mobile dimensions (375×812 for iPhone or similar)
Deliverable: Paper sketches (photographed) + Figma wireframe. Share the Figma link.
🔨 Exercise 3.2: Build an Interactive Prototype
Expand your wireframe into a clickable prototype:
- Design at least 4 connected screens (e.g., home → detail → form → confirmation)
- Add interactions in Figma's Prototype mode — every button and link should go somewhere
- Include at least one transition animation
- Test it yourself: can you complete the main task without getting stuck?
- Have someone else try it without any instructions from you. Watch what they do.
Deliverable: A shareable Figma prototype link. Note any observations from your user test.
Every interface is built from the same handful of components. Learn them, and you can design anything. A design system is just these components organized into a reusable kit.
Core UI Components
Buttons
- Primary — The main action. "Sign Up," "Buy Now," "Submit." One per view, bold and obvious.
- Secondary — Supporting actions. "Cancel," "Learn More." Less visual weight.
- Ghost/Outline — Tertiary actions. Border only, no fill. Used for less important options.
- States — Every button needs: default, hover, active (pressed), disabled, and loading states.
Forms
- Text inputs — Always include labels (not just placeholders — placeholders disappear when you type).
- Validation — Show errors inline, next to the field, in red. Show success states too.
- Grouping — Related fields together. Name fields in one group, address fields in another.
- Progressive disclosure — Don't show 20 fields at once. Reveal as needed.
Navigation Patterns
- Top nav bar — Standard for desktop. Logo left, links center or right.
- Hamburger menu — Mobile standard. Three lines → slide-out menu. Use it on mobile, not desktop.
- Tab bar — Bottom navigation for mobile apps. 3-5 icons max.
- Breadcrumbs — Show where you are in a hierarchy. Essential for content-heavy sites.
- Sidebar — For apps with many sections. Collapsible on smaller screens.
Building a Design System
A design system is a collection of reusable components with clear rules for how to use them. It's not a Figma file — it's a decision record.
Your minimum viable design system:
- Color palette — Primary, secondary, neutral, success, warning, error colors. Define exactly.
- Typography scale — Heading sizes (h1-h4), body text, captions. Pick one or two font families.
- Spacing system — Use a consistent scale (4px, 8px, 16px, 24px, 32px, 48px). No random numbers.
- Component library — Buttons, inputs, cards, nav elements as Figma components.
- Usage guidelines — When to use what. "Primary buttons for the main CTA only. Never two primary buttons in the same view."
In Figma, build your components as main components in a dedicated page. Then use instances throughout your designs. Change the main component → every instance updates. This is how real teams work.
Why Design Systems Matter for Creators
You might think design systems are only for big companies. Wrong. As a content creator, having a consistent set of templates, colors, and components means:
- Your brand looks professional and cohesive
- You create new content faster (templates, not from scratch every time)
- Your audience recognizes your content instantly
- You can scale — hand off templates to collaborators without explaining everything
💡 Key Takeaway
Design systems aren't about perfection — they're about consistency. Even a simple system with 5 colors, 3 font sizes, and a handful of components will save you hours and make everything you create look more professional.
🔨 Exercise 4.1: Build a Mini Design System (Course Deliverable)
Create a design system in Figma for your brand or project:
- Define your color palette (primary, secondary, neutral, and at least 2 semantic colors)
- Set up a type scale (headings, body, captions) with specific sizes and weights
- Build at least 5 reusable components: primary button, secondary button, text input, card, and navigation bar
- Include hover/active states for interactive components
- Create one complete screen using only your design system components
Deliverable: A Figma file with a "Design System" page containing all components, and at least one screen built with those components.
💡 Course Complete
You now understand UX principles, can research your users, wireframe solutions, prototype in Figma, and build with a design system. Your designs aren't just pretty — they work for real people. Next up: DGTL-112 Social Media Content Creation, where you'll put these design skills to work across platforms.