Design a Complete User Experience

Putting It All Together

In the previous lesson, we explored design systems and component libraries. Now let’s build on that foundation. Over the past seven lessons, you’ve learned to use AI for user research, persona building, wireframing, UX copy, accessibility, and design systems. Each skill is valuable on its own. But the real power comes from combining them into a complete workflow.

This capstone walks you through designing a full user experience from scratch, using AI at every stage. You’ll see how each lesson connects and how the AI-assisted workflow compresses what used to take weeks into days.

The Challenge: Design a Freelancer Invoice App

Here’s your brief:

Product: A mobile-first invoicing app for freelancers Problem: Freelancers spend hours creating invoices, chasing payments, and tracking what’s owed. Most invoicing tools are built for businesses with accounting teams, not solo freelancers juggling multiple clients. Target users: Independent freelancers (designers, developers, writers, consultants) who invoice 5-20 clients per month Key constraint: Must be usable one-handed on a phone while commuting

Follow along with each phase, using your AI assistant to complete the exercises.

Phase 1: Research and Discovery

Start by understanding the problem space. Even without access to real users, AI helps you build a foundation of informed assumptions that you’d validate later with real research.

Exercise 1: Competitive landscape

I'm designing a mobile invoicing app for freelancers.

Analyze the competitive landscape:

KNOWN COMPETITORS:
- FreshBooks
- Wave
- Invoice Ninja
- PayPal invoicing
- Square Invoices

For each, summarize:
1. Primary target audience
2. Key strengths for freelancers
3. Key weaknesses for freelancers
4. Pricing model
5. Mobile experience quality

Then identify:
- Gaps that all competitors share
- Features freelancers need that no competitor does well
- The biggest opportunity for differentiation

Exercise 2: Research questions

Based on the competitive analysis, generate a user research plan:

1. List 10 interview questions for freelancers about
   their invoicing workflow
2. What behavioral data would you want to observe?
3. What survey questions would help quantify the problem?
4. What assumptions are we making that need validation?

Review the output. Which questions would you actually ask? Which assumptions feel risky?

Phase 2: Persona Development

Using the competitive landscape and your understanding of freelancers, build personas.

Exercise 3: Create two personas

Create two user personas for a freelancer invoicing app:

PERSONA 1: A freelancer who invoices frequently (15+ clients/month)
and values speed above all else

PERSONA 2: A freelancer who invoices occasionally (3-5 clients/month)
and needs guidance through the process

For each persona, include:
- Name, age, profession
- Goals (what they need from invoicing)
- Frustrations (what's broken in their current process)
- Behavioral patterns (how they currently handle invoicing)
- A scenario showing them using the app
- Decision factors (what would make them switch from
  their current solution)

Ground these in realistic freelancer experiences.

Review the personas. Do they feel like real people you could design for? Refine any details that feel generic or stereotypical.

Phase 3: Information Architecture

Before wireframing screens, map the app’s structure.

Exercise 4: Define the IA

Design the information architecture for a freelancer
invoicing app with these core features:

- Create and send invoices
- Track payment status
- Manage client directory
- View earnings and reports
- Set up payment methods (bank, PayPal, etc.)
- Invoice templates and customization
- Recurring invoices
- Payment reminders

Provide:
1. App navigation structure (tab bar items for mobile)
2. Screen hierarchy (which screens live under which sections)
3. Content model (what data objects exist and how they relate)
4. User flows for the top 3 tasks:
   - Creating and sending a new invoice
   - Checking on unpaid invoices
   - Adding a new client

Keep the navigation to 4-5 primary destinations maximum.

Phase 4: Wireframing

Now design the key screens.

Exercise 5: Generate wireframe concepts

Design wireframe concepts for the 3 most important screens
in the freelancer invoicing app:

SCREEN 1: Home/Dashboard
- User persona: Both Maya (power user) and Alex (casual user)
  need to find value here
- Must show: total outstanding, overdue invoices, recent activity
- Must enable: quick invoice creation
- Constraint: one-handed phone use

SCREEN 2: Create Invoice
- Must be completable in under 60 seconds for repeat clients
- Fields: client, line items, amount, due date, notes
- Consider: how to auto-fill from previous invoices
- Constraint: minimal typing on mobile

SCREEN 3: Invoice Detail / Payment Status
- Shows a single invoice with full details
- Status prominently displayed (draft, sent, viewed, paid, overdue)
- Actions: send reminder, mark as paid, edit, duplicate
- Shows payment history if partially paid

For each screen, provide:
1. Two structural approaches
2. Content hierarchy (most prominent to least)
3. Key interaction patterns
4. How the screen adapts for power users vs. casual users

Pick the approach you prefer for each screen. Sketch it in your design tool.

Quick Check

At this point in the process, you should have: competitive analysis, two personas, information architecture, and wireframe concepts for three key screens. Notice how each phase feeds the next. The personas inform the wireframes. The IA determines the navigation. The research shapes the feature set. AI accelerated each phase, but your design judgment connects them.

Phase 5: UX Copy

With wireframes roughed out, write the interface copy.

Exercise 6: Write key UX copy

Write UX copy for the freelancer invoicing app.

VOICE: Friendly, efficient, confidence-building
(freelancers often feel awkward about money--the app
should make invoicing feel professional and easy)

Write copy for:

1. DASHBOARD EMPTY STATE (first-time user)
   - Headline, body, CTA

2. CREATE INVOICE FLOW
   - Screen title
   - Field labels and placeholder text
   - Submit button label
   - Confirmation message after sending

3. OVERDUE INVOICE NOTIFICATION
   - Push notification text
   - In-app banner
   - Suggested reminder email to client (that the freelancer
     can send with one tap)

4. ERROR STATES
   - Invoice send failed (network issue)
   - Invalid email address for client
   - Payment method not configured

5. SUCCESS STATES
   - Invoice sent successfully
   - Payment received
   - Recurring invoice set up

Phase 6: Accessibility Audit

Before finalizing, check accessibility.

Exercise 7: Audit your design

Perform an accessibility review of a freelancer invoicing app
with these UI elements:

COLORS:
- Primary action: #2563EB (blue)
- Success/Paid: #059669 (green)
- Warning/Overdue: #D97706 (amber)
- Error/Failed: #DC2626 (red)
- Text: #111827 on #FFFFFF background
- Secondary text: #6B7280 on #FFFFFF background

INTERACTIVE ELEMENTS:
- Tab bar with 4 icon-based navigation items
- "Create Invoice" floating action button
- Invoice status badges (Draft, Sent, Viewed, Paid, Overdue)
- Swipe-to-send-reminder gesture on invoice list items

Check:
1. Color contrast for all text/background combinations
2. Color-independence of status indicators
3. ARIA labels for all icon-based elements
4. Accessibility of swipe gestures (need alternative)
5. Touch target sizes
6. Screen reader flow for the dashboard

Pay attention to the swipe gesture issue. Swipe-based interactions must always have a non-gesture alternative for users who can’t perform swipe motions.

Phase 7: Design System Foundation

Finally, establish the design system foundation for your app.

Exercise 8: Define your component library

Define the core component library for the freelancer invoicing app.

Based on the screens we've designed, list the components needed:

For each component, provide:
1. Component name
2. Variants needed
3. Props/configuration options
4. Accessibility requirements
5. One-line usage guideline

Organize into categories:
- Foundation (tokens, typography, spacing)
- Navigation (tabs, headers, breadcrumbs)
- Inputs (text fields, dropdowns, toggles)
- Display (cards, badges, lists, charts)
- Feedback (alerts, toasts, loading states)
- Actions (buttons, FABs, menus)

Prioritize: which 10 components should be built first
to enable the MVP screens?

Reflection: The AI-Assisted Design Process

Look at what you’ve accomplished in this capstone:

Phase	Traditional Time	AI-Assisted Time
Competitive analysis	2-3 days	30 minutes
Persona development	1-2 days	1 hour
Information architecture	1 day	30 minutes
Wireframe exploration	2-3 days	2 hours
UX copy	1-2 days	1 hour
Accessibility audit	1 day	30 minutes
Design system foundation	2-3 days	1 hour

Total: 10-15 days compressed to 1-2 days.

And here’s what’s critical: the quality isn’t lower. You’re doing the same work. You’re just spending your time on judgment and decisions instead of on the mechanical parts of research synthesis, documentation writing, and consistency checking.

What You’ve Built (Your UX Toolkit)

Across this course, you’ve assembled a toolkit of AI prompts and workflows for:

Research synthesis - Analyzing interviews, surveys, and competitive data
Persona building - Creating and maintaining data-driven personas
Wireframing - Exploring structural options and component designs
UX copy - Writing buttons, errors, empty states, and microcopy
Accessibility - Auditing contrast, ARIA, keyboard navigation, and color independence
Design systems - Documenting components and maintaining consistency

Each skill is reusable. Save your best prompts. Refine them for your specific products. Build a personal library of AI-assisted UX workflows.

What Comes Next

This course gave you the methods. Mastery comes from practice. Here’s your roadmap:

This week: Apply one technique from this course to your current project
This month: Build a complete prompt library for your most common UX tasks
This quarter: Establish AI-assisted workflows as standard practice on your team
Ongoing: Keep refining prompts as AI tools improve–what works today will work even better tomorrow

Final Key Takeaways

AI compresses UX process time without reducing quality–you spend time on decisions, not mechanics
Every phase of UX design benefits from AI: research, personas, wireframes, copy, accessibility, systems
The human designer’s value increases with AI–judgment, empathy, and creative vision are more important than ever
Build a reusable prompt library for your recurring UX tasks
Always validate AI outputs against real user data and your domain knowledge
Accessibility from the start is cheaper and better than retrofitting
Design systems maintained by AI documentation stay alive longer

Congratulations on completing the course. Go design something that makes someone’s day a little easier.