Intake Wizard Case Study

Overview

We recently undertook the challenge of design the Intake Wizard to enhance usability, efficiency, and user satisfaction. The previous design had several pain points, including unclear navigation, slow search functionality, and a cluttered interface. Our goal was to create a more intuitive, visually appealing, and functional file tracking system.

Solution

Allow users to see detail in thumbnail view with indication. Display information with trendy font with clean design.

Challenges

  1. Poor Navigation – Users struggled to locate files quickly due to an inefficient folder hierarchy.
  2. Cluttered UI – Too much information was displayed at once, leading to cognitive overload.
  3. Lack of Status Visibility – Tracking file approval/rejection status was not intuitive.

Project Timeline

  • Project Planning

Wireframing
User Journey UX
Sitemaps

  • Consultation

Research
Setting Goals
Scope Agreement

  • Content & Design

Content Creation
Desktop Design
Mobile Design

  • Development

Code & Functionality
Optimisation & Performance
QA & Testing

  • Website Launch

Post-Live Checks
Publishing & Promoting
Support & Maintenance

Design Process

  • Interviews
  • Shadowing
  • Seek to understand
  • Non-judgemental

  • Personas
  • Role objectives
  • Decisions
  • Challenges
  • Pain points

  • Share ideas
  • All ideas worthy
  • Diverge/converge
  • "Yes/and" thinking
  • Prioritize

  • Mockups
  • Storyboards
  • Keep it simple
  • Fail fast
  • Iterate quickly

  • Understand impediments
  • What works?
  • Role play
  • Iterate quickly

Participant Demographics

User Persona

I learned about the users by creating detailed profiles called user personas, helping me understand their needs, goals and frustrations.

David Herston

Organization

20

Location

New York

Age

24 Years

Occupation

Sales Manager

Biography

  • Works at a mid-sized B2B SaaS company specializing in workflow automation.
  • Leads UI design for form-based applications (multi-step forms, dynamic inputs, validation).
  • Collaborates with product managers, developers, and UX researchers.
  • Previously worked at a fintech startup, optimizing checkout flows and onboarding forms.

Frustrations

❌ Users abandon long forms due to poor navigation.
❌ Lack of real-time feedback (e.g., inline validation).
❌ Inconsistent UI patterns across different steps.
❌ Slow performance with dynamic fields/conditional logic.
❌ Stakeholders prioritize aesthetics over usability.

Needs

✅ Design a seamless, intuitive form wizard that reduces user drop-offs.
✅ Ensure accessibility & responsiveness (mobile/desktop).
✅ Minimize cognitive load with clear progress indicators.
✅ Improve validation & error handling for complex inputs.
✅ Test & iterate with real user feedback.

Personality

Internet

Socialmedia

Online Shopping

Personality

Extrovert

Introvert

Thinking

Feeling

Empathy Mapping

Empathy maps provides a simple view of what users say, think, feel, and do. It helps to understand their experiences.

Says

  • “I’ve invested in upgrades—buyers should appreciate that.”
  • “Why is the agent’s commission so high?”
  • “Can we stage the home to attract more buyers?”

Think & Feel

  • “I need to get the best price for my property.”
  • “Are buyers seeing the true value of my home?”
  • “What if my property sits on the market too long?”
  • “A good agent will market my home effectively.”

Does

  • Stages the home for better photos.
  • Compares market prices before listing.
  • Negotiates commission with the agent.

Typography

A great design system helps you design and build digital products a lot faster because they give you access to icons, typography rules, color palettes, and other design rules to follow during app or web development and the Fonts for apps play a major role in your users’ experience. We have used more advanced and trending font.

Colors

Primary Colors

Main Gradient Colors

Text Colors

Icon Set

As a pictogram, an icon is a graphical representation of an object, place or idea.

User Research

Users struggle to stay consistent without reminders or clear weekly tracking.
Many users find layout cluttered and confusing, especially for beginners
Users want runtime indications

What We Have Done

In this screen:

  • We improve the responsive design.
  • Users can check status and total calculation at runtime.

In this screen:

  • We add tabs in screen.
  • Transaction details with prominent input fileds.

Low Fidelity

Low-fidelity refers to a state of reduced quality or detail, commonly used in contexts like audio, visual representations, and prototyping.

High Fidelity (Desktop)

Prototype

Play

What I’d Do Differently

  • Simplify Complex Features: Avoid overloading dashboards; use progressive disclosure for advanced options.
  • Optimize for Mobile Earlier: Design responsively from the start rather than retrofitting later.
  • Document Design Decisions: Keep better records of UX choices to streamline collaboration with developers.

Challenges Overcome

  • Sections: Created interactive elements to reduce the learning curve.
  • Cross-Team Alignment: Used wireframes and prototypes to bridge gaps between designers and stakeholders.

What I Have Learned

  • User-Centric Approach Matters: Prioritizing intuitive navigation and clear data visualization significantly improves usability.
  • Consistency is Key: Maintaining uniform design elements (colors, fonts, buttons) enhances user experience and brand identity.
  • Feedback Loops Help: Regular user testing revealed pain points early, allowing for iterative improvements.