Structure a Clinical App Like a UX Pro

Create user stories, information architecture, and user flows for a clinical app.

Introduction

30 Second Summary

Think about the last time you used a health app or checked in at a doctor's office. Before any of those screens were designed, someone had to decide where every button, menu, and feature should go.

In this project, you will create the exact planning documents a professional UX designer produces before handing off a mobile app to a developer. Using a real clinical management scenario, you will structure an entire app experience from user needs through to developer-ready specifications.

What You'll Build

When you are done, you will be able to hand a developer your Whimsical workspace and watch them immediately understand every screen, decision, and edge case of the clinical management app you structured.

By the end of this project, you'll have:

A set of professional user stories you can hand to a developer as structured requirements, each one tracing a clinical staff need from action to outcome.
An information architecture mind map that shows exactly where every screen, feature, and data point lives inside the app.
User flow diagrams that walk through core clinical tasks step by step, showing what happens at each decision point and what the app does when things go wrong.
An optional Secret Mission to push your skills even further.

Do I need any design experience?

No design experience is needed. This project focuses entirely on UX structure (user stories, information architecture, user flows), not visual design. All work is done in Whimsical, a free browser-based tool that this project walks you through setting up.

Before We Start

Before we dive into creating any deliverables, let's lock in what you're about to build and why structuring the user experience matters before a single screen is designed.

Set Up Whimsical and Learn the Canvas

Before you can create any UX deliverables, you need a workspace where everything lives. A disorganized tool setup slows you down the moment real work begins, so this step gets you fully comfortable with the canvas first.

Whimsical is a browser-based diagramming tool built for speed. In this step, you will create your free account, then build a test flowchart and a test mind map so the tool feels natural before you tackle real clinical workflows.

In this step, get ready to:

Create your free Whimsical account and workspace.
Build a test flowchart with connected shapes and auto-layout.
Build a test mind map with branches and sibling nodes.

Create your Whimsical account

Whimsical runs entirely in your browser, so there is nothing to install. You just need a free account.

In your browser, go to whimsical.com.
Click Get started free.
Sign up with your email or Google account.
Follow the prompts to name your workspace. You can skip the invitation step if prompted.

After signing up, you land on your workspace dashboard. This is where all your boards, folders, and files live.

What is a Whimsical workspace?

A workspace is your home base in Whimsical. It holds all the boards you create, organized into folders and sections. On the free Starter plan, you get unlimited private boards and up to 2 free workspaces.

Don't see a workspace dashboard?

If you land on a blank board instead of a dashboard, click the Whimsical logo in the top left corner to navigate back to your workspace.

Help me find my Whimsical workspace dashboard.

Learn the flowchart basics

Flowcharts are the backbone of user flow diagrams. You will use them heavily in later steps to map how clinicians move through the app.

Create a new board by clicking Create new board in the top left corner of your workspace dashboard.
You will land on a blank canvas. Press S on your keyboard to open the diagram shapes panel.
Click on a rectangle shape to place it on the canvas.
Type a label inside the shape, such as Start.

You should see a single labeled rectangle on your canvas. Now add more shapes and connect them.

With the shape selected, look for the small circles on its edges. These are the quick add buttons.
Click one of the quick add buttons to create a new connected shape below (or beside) the first one.
Repeat this to add a third connected shape, so you have at least 3 shapes linked by arrows.
Label each shape with something simple like Step 1, Step 2, and End.

What are quick add buttons?

When you select a shape in Whimsical, small circles appear on its edges. Clicking one instantly creates a new shape and connects it with an arrow. This is the fastest way to build a flowchart without manually drawing connectors.

You can also press Alt plus any arrow key to add a connected shape in that direction. Try it now to see how fast you can build a chain of shapes.

Try the keyboard shortcut: select any shape and press Alt + the down arrow key. A new connected shape appears below.
Select one of your shapes and change its color using the color option in the floating context bar above the shape.
Try changing a shape's outline style too. In the context bar, look for the border style options: Fill, Border, and Dashed border.

Your canvas probably looks a little messy now. Auto-layout fixes that instantly.

Select all your shapes by pressing Ctrl + A.
In the context bar that appears, click Lay out vertically.

Your shapes snap into a clean top-to-bottom flow with all connectors automatically rerouted.

Navigate the infinite canvas

Hold Space and drag to pan around the canvas. Hold Ctrl and scroll to zoom in or out. Press 1 to fit all content on screen.

Learn the mind map basics

Mind maps are how you will build the app's information architecture in a later step. They let you organize ideas into a branching hierarchy, which is perfect for mapping out an app's structure.

On the same board (below your flowchart), click an empty area of the canvas.
Press M on your keyboard to create a mind map node.
Type a label for the root node, such as My App.

You should see a single node on the canvas. Now branch out from it.

With the root node selected, press Tab to add a child node. Type a label like Dashboard.
Press Enter to add a sibling node at the same level. Type Settings.
Press Enter again to add a third sibling. Type Profile.

You now have a root node with 3 branches. Try adding a deeper level.

Select the Dashboard node and press Tab to create a child under it. Type Recent Activity.
Try dragging one of the sibling nodes to rearrange the order of branches.
In the toolbar, experiment with the line style options. Toggle between curved and straight lines to see which you prefer.

What are the key mind map shortcuts?

Press Tab to add a child node (one level deeper). Press Enter to add a sibling node (same level). These two shortcuts let you build an entire hierarchy without touching the mouse.

Before you move on, take a moment to predict what your board should look like. How many shapes should be in your flowchart? How many branches should your mind map have?

Your board should have a flowchart with at least 3 connected shapes arranged vertically, and a mind map with a root node and at least 3 branches. Press 1 to zoom out and see everything at once.

Shapes or nodes not connecting?

Make sure you are using the quick add buttons (small circles on shape edges) for flowcharts, not just placing shapes independently. Shapes placed separately are not connected until you draw a connector between them.

For mind maps, make sure you press Tab or Enter while a node is selected. Pressing M on empty canvas creates a completely separate mind map.

Help me connect shapes in my Whimsical flowchart and mind map.

Your workspace is ready and the tool already feels familiar. Next up, you will use these skills to write professional user stories that capture what clinical staff actually need from the app.

Write User Stories for Clinical Staff

Your Whimsical workspace is set up and you're comfortable creating flowcharts and mind maps on the canvas. Now it's time to put the tool to work on real UX deliverables.

You know the app needs to handle patients from admission through treatment to discharge. But those ideas are still loose and unstructured. User stories translate each user need into a specific, actionable format that every deliverable you create after this can trace back to.

In this step, get ready to:

Identify the three main user types for a clinical management app.
Write at least 8 user stories covering the full patient lifecycle.
Review your stories for quality and flag any uncertainties.

Identify your user types and create a board

Before writing user stories, you need to know who the users are. A clinical management system has three key roles that interact with the app on a daily basis.

A Receptionist / front desk staff who handles patient admission and registration.
A Doctor / clinician who manages patient records, medical history, and treatment decisions.
A Nurse who updates patient status and vitals throughout the day.

Each role interacts with the app differently, so each needs its own set of user stories. Let's create a dedicated board for them.

In your Whimsical workspace dashboard, click Create new board in the top left corner.
Click the board's title at the top and rename it to Clinical App - User Stories.

Now create a sticky note section for each user type. Sticky notes are the perfect tool for capturing individual user stories because each note holds one discrete idea that you can rearrange later.

Press N on your keyboard to add your first sticky note.
Type Receptionist as the title for this section's header note.
Move your cursor to a different area of the canvas, then press N again to create a second sticky note.
Type Doctor as the header for this section.
Repeat the process one more time to create a Nurse header note.
Space the three header notes apart so each one has room for story notes underneath it.

Color-code your sections

Select each header note and change its color using the toolbar. For example, use a different color for each user type so you can tell sections apart at a glance.

You should now see three labeled sticky notes spread across your canvas, each marking a section for one user type.

Don't see a sticky note appearing?

Make sure you're clicking on the canvas first before pressing N. If your cursor is in a text field or the title bar, the shortcut won't trigger. Click an empty area of the canvas, then try pressing N again.

Help me add sticky notes to my Whimsical board

Write user stories for each user type

Every user story follows the same format: "As a [user type], I want to [specific action], so that [concrete outcome]." This structure forces you to name who needs the feature, what they need to do, and why it matters.

What is a user story?

A user story captures a single user need in one sentence. It is not a feature request or a technical specification. It describes a goal from the user's perspective.

The "so that" clause is the most important part. It reveals the underlying need behind the action. If you can't write a meaningful "so that," the story might not reflect a real user problem.

Start with the Receptionist section. The receptionist is the first person a patient interacts with, so their stories focus on admission and registration.

Click near your Receptionist header note, then press N to add a new sticky note below it.
Type your first user story. Here is an example to get you started:

"As a receptionist, I want to register a new patient with their personal and insurance details, so that their record exists in the system before they see a doctor."

Add at least 2 more sticky notes near the Receptionist header by pressing N for each one. Cover scenarios like searching for an existing patient and scheduling an appointment.

You should now have at least 3 sticky notes grouped under your Receptionist header. Move on to the Doctor section next.

Click near your Doctor header note, then press N to add a new sticky note.
Write stories focused on what a doctor needs during patient care. Here is an example:

"As a doctor, I want to view a patient's complete medical history on one screen, so that I can make informed treatment decisions without switching between records."

Add at least 2 more story notes for the Doctor section. Think about prescribing treatment, recording diagnoses, and initiating discharge.

Finally, fill in the Nurse section.

Click near your Nurse header note, then press N to add a new sticky note.
Write stories about updating vitals, monitoring patients, and preparing for discharge. Here is an example:

"As a nurse, I want to update a patient's vitals in real-time, so that the attending doctor always sees the latest readings."

Add at least 2 more story notes for the Nurse section.

Keep stories at the goal level

"I want to discharge a patient" is a goal. "I want a discharge button on the top right" is a solution. User stories describe what the user needs to accomplish, not how the interface should look.

If you catch yourself specifying a button placement, screen layout, or color choice, you have crossed from user story into design. Pull back to the underlying need.

Count the total number of story sticky notes across all three sections. You should have at least 8 stories total, covering admission, records management, treatment, and discharge.

Stuck on what stories to write?

Think about the full patient lifecycle. A patient gets admitted, has their information recorded, receives treatment, gets updates to their vitals, and eventually gets discharged. Each of those stages has at least one story per user type.

Help me brainstorm user stories for a clinical management app

Review and validate your stories

Writing the stories is only half the work. A quick quality review catches weak stories before they ripple into your information architecture and user flows later.

Read each story back and ask yourself: does the "so that" clause name a real clinical need, or is it just restating the action?

How to spot a weak "so that" clause

A weak clause just restates the action: "...so that I can register patients." A strong clause names the real need: "...so that their record exists in the system before they see a doctor." If your "so that" reads like a mirror of the "I want to," rewrite it to explain the why.

Check for lifecycle gaps. Make sure you have at least one story covering each of these stages: admission/registration, active care (viewing records, updating vitals), treatment (prescribing, diagnosing), and discharge.
Flag any story where you're unsure if it reflects real clinical practice. Select that sticky note and change its color to a different one from the toolbar.

Why flag uncertain stories?

In a real project, flagged stories are the ones you'd validate with actual users or subject-matter experts before building anything. Flagging them now keeps you honest about what you know versus what you're assuming.

Before you move on, take one final look at your board. Do you think every stage of the patient lifecycle is represented across your three user types?

You should see at least 8 story notes spread across three sections, with any uncertain stories standing out in a different color. Every stage of the patient journey from admission to discharge should be covered by at least one story.

Missing coverage for a lifecycle stage?

If you notice a gap (for example, no stories mention discharge), add a new story for it now. A common one to miss is the handoff between roles. Think about what happens when a receptionist finishes registration and the patient moves to a doctor's care.

Help me find gaps in my user stories for a clinical management app

Your user stories give you a clear picture of what each role needs from the app. Next up, you'll organize all of these needs into a structured hierarchy called an information architecture, which maps out exactly where every screen and feature lives inside the app.

Build the Information Architecture

Your user stories now capture what clinical staff need from the app. You have structured requirements for receptionists, doctors, and nurses covering the full patient lifecycle.

The next question is where each of those needs lives inside the app. Without a clear structure, features end up scattered across screens with no logic to guide users.

Information architecture solves this by organizing every screen and feature into a logical hierarchy. In this step, you will build that hierarchy as a mind map in Whimsical.

In this step, get ready to:

Create a mind map with the app's top-level sections and their sub-items.
Cross-reference the mind map against your user stories to find gaps.
Organize and color-code sections for clinical workflow logic.

Create the top-level structure as a mind map

What is information architecture?

Information architecture (IA) is the blueprint of an app's content and features. It defines what sections exist, how they are grouped, and how they relate to each other.

Think of it like the floor plan of a hospital. Before anyone picks paint colors or furniture, someone decides where the emergency room, patient wards, and reception area go. IA does the same thing for your app's screens.

Your clinical management app has distinct areas that users interact with. You will map them out as branches of a mind map, starting with the broadest sections and drilling into specifics.

In your Whimsical workspace, click New board to create a new board.
Name the board Clinical App - Information Architecture.
Press M on your keyboard to create a mind map node.
Type Clinical Management App as the root node text.

You should see a single node on your canvas. This is the starting point for your entire app structure.

Now think about the major areas of the app. Consider what your user stories told you about what clinical staff need to do: admit patients, manage records, handle treatment, and discharge patients.

Click on the root node, then press Tab to add a child node.
Type Dashboard as the first main section.
Press Enter to add a sibling node.
Type Patient Registration for the second section.
Continue pressing Enter and adding sibling nodes for Patient Records and Discharge.
Add any other top-level sections your user stories suggest, such as Settings or Reports.

You should now see your root node with at least 4 branches radiating outward. Each branch represents a major area of the app.

Nodes not appearing as branches?

Make sure you clicked on the root node before pressing Tab. If you pressed Tab without selecting a parent, the new node may be floating separately.

If you created disconnected nodes, delete them and try again by clicking the parent node first.

Help me connect nodes in my Whimsical mind map.

Each of these top-level sections needs detail. Think about what screens, data points, and features live inside each one.

Click on the Patient Records node and press Tab to add child nodes for: Personal Information, Medical History, Vitals, Prescriptions, Lab Results, Notes.
Click on Dashboard and add child nodes for the information a clinician sees first, such as Patient Summary, Notifications, and Quick Actions.
Click on Patient Registration and add child nodes for the data collected during admission, such as Personal Details, Insurance Information, and Emergency Contact.
Click on Discharge and add child nodes for what happens when a patient leaves, such as Discharge Summary, Follow-up Scheduling, and Billing Status.
Repeat for any additional top-level sections you created, adding at least 2-3 sub-items under each.

Your mind map should now look like a tree with a central root, 4+ main branches, and clusters of sub-items under each branch.

What does each level represent?

The root node is the app itself. The first-level branches are the major sections a user navigates between (like tabs or main menu items). The second-level nodes are the specific screens or data groups inside each section.

This three-level structure is a common pattern in mobile app design. It keeps the app navigable without burying features too deep.

Keep stories at the goal level

If you are tempted to add very specific nodes like "Save button" or "Blue header bar," pause. Those are design decisions, not architecture. IA defines what exists, not how it looks.

Cross-reference against your user stories

A mind map that looks complete can still have blind spots. The fastest way to find them is to test every branch against the user stories you already wrote.

Open your Clinical App - User Stories board in a second browser tab so you can see both boards.
Start with the first user story on your board.
Ask yourself: "Where in my mind map does this action live?"
If the story has no home in your IA, switch back to your IA board and add the missing section or sub-item.
Repeat this for every user story on your board.

After checking all your stories, flip the question around.

Look at each section in your mind map and ask: "Is there a user story that points to this?"
If a section has no user story justifying it, question whether it belongs. Some sections like Settings are legitimate even without a story. Others may be features you invented without a real user need.

Check your IA board. You should see new nodes or branches that were not there before you started cross-referencing.

Why cross-reference in both directions?

Checking stories against the IA finds missing sections (gaps). Checking the IA against stories finds unnecessary sections (bloat). Professional UX designers run both checks to keep the app lean and complete.

Organize for clinical workflow logic

Your mind map now has the right content, but the arrangement matters too. A clinical worker's most frequent action is finding an existing patient, and the sections should reflect the natural order of a shift.

Add a new top-level branch called Search / Find Patient by clicking the root node and pressing Tab.
Drag your nodes to rearrange the branches so they follow clinical workflow order: things staff do first (Dashboard, Search) sit in a prominent position, daily tasks (Patient Records) are easy to reach, and occasional tasks (Discharge, Reports, Settings) are further out.

You should see your Search / Find Patient node alongside the other main branches. In a real clinical app, quickly finding a patient is one of the most frequent actions.

Why is search its own section?

Clinical staff switch between patients dozens of times per shift. Burying search inside another section adds friction to the most common task. Giving it top-level prominence reflects how often it gets used.

Finally, color-code your branches so you can see the structure at a glance.

Select all patient-facing sections (Patient Registration, Patient Records, Discharge) by holding Ctrl and clicking each node.
In the toolbar that appears, change the line color to one color (e.g., blue) for all patient-facing sections.
Select the admin or support sections (Dashboard, Settings, Reports) and assign them a different color (e.g., green).
Give the Search / Find Patient node its own distinct color to reflect its cross-cutting importance.

Your mind map should now show clearly grouped sections in distinct colors. You can tell at a glance which parts of the app handle patient data and which handle admin functions.

Colors not applying to branches?

Make sure you are selecting the node itself, not the text inside it. Click the node border or background to select it, then use the toolbar to change the line color.

If the toolbar does not show a color option, try selecting a single node first to confirm the toolbar appears. Then hold Ctrl and add more nodes to the selection.

Help me change node colors in my Whimsical mind map.

Before you move on, take a moment to review your mind map. Do you think it captures every screen a clinical worker would need to do their job?

Your mind map should have a root node labeled Clinical Management App, at least 4 main branches (including Search / Find Patient), and at least 2-3 sub-items under each section. Every branch should be color-coded by category, and you should have confirmed that each user story maps to a section.

Does it feel complete?

If your IA feels like it covers everything, that is exactly how it should feel at this stage. Hold onto that confidence. In the next step, you will put this structure to the test by tracing a real user's journey through it step by step.

Your app now has a clear, organized structure. Next up, you will map how a user actually moves through the admission process, one screen at a time.

Map the Patient Admission Flow

Your information architecture gives the clinical app a clear structure. Every screen and feature has a logical home in the hierarchy.

But a mind map cannot answer one critical question: how does a user actually move through the app to complete a task? In this step, you will create a user flow diagram for the patient admission process, tracing the exact sequence of screens and decisions a receptionist encounters from start to finish.

In this step, get ready to:

Create a new Whimsical board with the patient admission happy path as a flowchart.
Walk through the flow as a real user to uncover hidden gaps and missing decisions.
Document your findings and note changes needed in your information architecture.

Map the happy path first

The happy path is the ideal scenario where everything goes right. No errors, no missing data, no unexpected situations. Start by mapping what happens when a receptionist admits a patient with zero complications.

Switch back to your Whimsical workspace dashboard.
Create a new board and name it Clinical App - User Flows.
Press S on your keyboard to open the diagram shapes panel.
Add a rounded rectangle to your canvas and label it Staff opens app. This is your start node.
Below it, add a regular rectangle labeled Open registration form. Connect the two shapes by clicking the small circle on the bottom edge of the start node and dragging to the rectangle.
Use Alt + Down arrow to quickly add more connected rectangles for each remaining step: Enter patient details, Confirm patient identity, Assign to a doctor, and Create patient record.

What do the different shapes mean?

Rounded rectangles mark the start and end of a flow. Regular rectangles represent actions the user takes. Diamonds represent decision points where the flow branches into two or more paths.

Insert at least 2 decision diamonds into your flow. For example, place a diamond labeled Is patient new? after Confirm patient identity, and a diamond labeled Is a doctor available? after Assign to a doctor.
Label every connector coming out of a decision diamond by clicking the arrow and typing Yes or No.
End the flow with a rounded rectangle labeled Patient admitted.
Select all your shapes, then choose Lay out vertically from the context bar to auto-arrange them.

Your canvas should show a top-to-bottom flowchart starting with Staff opens app and ending with Patient admitted, with at least 6 action steps and 2 decision diamonds between them.

Shapes not connecting?

Make sure you are dragging from the small circle that appears on the edge of one shape to the body of the next shape. If you click empty canvas space, you will create a floating arrow instead.

If your diamonds only show one outgoing arrow, click the diamond and drag a second connector from a different edge to create the alternative path.

Help me connect shapes in my Whimsical flowchart.

Walk through the flow as a real user

Your flowchart looks complete. Every step from opening the app to admitting the patient is there, with decision diamonds at the key branching points. But is it really complete?

Before you continue, look at your flowchart and think about your IA mind map. Do you think your current flow and information architecture already account for every scenario a receptionist might encounter during admission?

Go back to the start node of your flowchart. Imagine you are a receptionist. A real patient has just walked in and needs to be admitted.
Move through each step one at a time. At every step, pause and ask yourself two questions: "What could go wrong here?" and "What information do I need that I might not have?"
When you find a gap, do not fix the flowchart yet. Instead, add a sticky note next to the step where the gap appears.
Write a brief description of the problem on each sticky note.

You will likely find that your flow is full of holes. Here are gaps that commonly surface in a clinical admission flow:

What happens if the patient already exists in the system? The flow does not account for duplicate entries.
What if required fields are missing or incomplete? There is no validation step.
What if the system is offline or experiencing network issues? There is no error state.
What if no doctor is currently available to be assigned? The flow assumes one is always free.

Why does the IA suddenly have gaps?

Your information architecture showed where things live in the app. The flow reveals how a user moves through them. These are two different lenses on the same product.

Gaps are not mistakes. They are discoveries. A mind map organizes features into a hierarchy, but it cannot surface error paths, edge cases, or missing screens that only become visible when you trace a real task from start to finish.

Make sure you have at least 5 sticky notes on your flowchart. If you found fewer, walk through the flow again and think about what happens at each step if the receptionist makes a mistake, enters bad data, or gets interrupted.

Examine your findings

Now step back and look at the full picture of what you discovered. The gaps on your flowchart are not random. They fall into patterns that reveal what kinds of things your IA missed.

Count the sticky notes on your flowchart. In a clinical app, finding 5-10 gaps in a single flow is normal for a first pass.
Group your gaps into categories: are they about missing data, missing screens, missing decisions, or missing error handling?
Switch to your Clinical App - Information Architecture board.
For each gap, check whether your mind map already has a section that covers it. If not, add a note to the relevant branch describing what needs to be added.

Why update the IA now?

Going back and forth between your IA and your flows is exactly how professionals work. The two deliverables inform each other iteratively. The IA gives flows a starting structure. The flows reveal what the IA missed. You keep refining both until they are complete.

Before you review your work, predict: how many of your sticky-note gaps point to sections that are completely missing from your information architecture?

Switch between your User Flows board and your IA board. Every gap that has no corresponding section in the IA represents a discovery. You should see at least 2-3 notes added to your IA mind map about changes needed.

Only found 1-2 gaps?

Go back to your flowchart and try harder to break it. At each step, ask: what if the data is wrong? What if the user cancels halfway? What if the network drops? What if two staff members try to admit the same patient at the same time?

Also check your decision diamonds. Each diamond should have both a Yes and a No path leading to a complete resolution. If either path dead-ends, that is a gap.

Help me find more gaps in my admission user flow.

Your flowchart now tells a much more honest story than the happy path alone. Next up, you will transform those sticky-note gaps into real error paths and edge cases, and build a second flow for patient discharge.

Complete the Flows with Error Paths and Edge Cases

In Step 4, you walked through your admission flow as a real user and discovered gaps your information architecture never accounted for. Duplicate patients, missing fields, offline scenarios. Each sticky note on your flow represents a moment where a real user would be stuck with no way forward.

Those gaps are exactly what separates amateur UX documentation from professional work. A professional flow accounts for every path a user might take, not just the ideal one. This step transforms your incomplete flow into a developer-ready specification.

In this step, get ready to:

Fix your admission flow by adding error and alternative paths for every gap you discovered.
Create a complete discharge flow with its own decision points and error handling.
Update your information architecture to reflect all new screens and states your flows revealed.

Fix the admission flow with error and alternative paths

Your admission flow currently shows only the happy path. The sticky notes you added in Step 4 each represent a moment where a real user could get stuck. Turning these gaps into proper branches makes your flow complete and realistic.

Switch back to your "Clinical App - User Flows" board in Whimsical.
Find the step in your flow where the receptionist enters the patient's ID or name.
Press S to add a decision diamond directly after that step.
Label the diamond "Does patient already exist?"
Connect the "Yes" arrow to a new rectangle labeled "View existing patient record."
Connect the "No" arrow back to your original next step in the flow (creating a new record).

Your flow now splits into two branches at the duplicate-patient check. One path handles new patients, and the other redirects to an existing record.

Find the step where patient details are entered into the registration form.
Press S to add a decision diamond after it.
Label it "All required fields complete?"
Connect the "No" arrow back to the form step to create a loop.
Label that connector "Show error indicator."
Connect the "Yes" arrow to the next step in your original flow.

You should now see a loop in your flow. When required fields are missing, the user is sent back to the form with an error indicator instead of moving forward with incomplete data.

Press S to add a new rectangle near the bottom of your flow.
Label it "System/network error."
Add an arrow labeled "Retry" pointing back to the previous action step.
Add another arrow labeled "Save as draft" pointing to a new rounded rectangle end node labeled "Record saved locally."

Your flow now handles what happens when the network drops mid-admission. The user can either retry or save their progress locally.

Select all shapes on your original happy path.
Keep them in the default color.
Select the error path shapes: the missing-fields loop, the network error rectangle, and the "Save as draft" end node.
Change their color to red or orange using the toolbar color picker.
Select the alternative path shapes: the "View existing patient record" branch.
Change them to a different color, such as blue or green.

Your admission flow should now display at least three distinct colored paths branching from decision points. The default color traces the ideal path, red or orange marks error handling, and a third color marks alternative routes.

What do the colors communicate?

Color-coding is not decoration. It lets anyone scanning your flow instantly distinguish the intended path from error handling and alternative routes.

This is standard practice in professional UX documentation. When you hand this flow to a developer, they can immediately see which paths need error-handling code and which paths are the primary experience.

Shapes not connecting properly?

Make sure you are clicking the small circles on the edges of shapes to create connectors. Dragging from the center of a shape moves it instead of connecting it.

If your arrows are pointing in unexpected directions, try selecting the shapes you want to rearrange and using the context bar to choose Lay out vertically to auto-arrange them.

Can't get my flow paths to connect correctly

Create the patient discharge flow

Your admission flow handles how patients enter the system. Now you need a flow for how they leave. Discharge is more complex than it appears because the system must verify that everything is resolved before releasing a patient.

Scroll to an empty area below your admission flow on the same board.
Press S to add a rounded rectangle (start/end shape).
Label it "Doctor initiates discharge."
Add a rectangle and label it "System checks for pending items."
Add a decision diamond and label it "Are there pending items?"
Connect the "No" arrow to a new rectangle labeled "Generate discharge summary."
Connect the "Yes" arrow to a new rectangle labeled "Resolve pending items (unpaid bills, pending labs, unsigned notes)."
From "Resolve pending items," add an arrow looping back to "System checks for pending items."

You should now see the first half of your discharge flow. The pending-items check creates a loop: the system keeps checking until everything is resolved before generating the discharge summary.

After "Generate discharge summary," add a decision diamond labeled "Does patient need follow-up?"
Connect the "Yes" arrow to a new rectangle labeled "Schedule follow-up appointment."
Connect the "No" arrow to a rounded rectangle labeled "Patient marked as discharged."
Connect "Schedule follow-up appointment" to the same "Patient marked as discharged" end node.

Your discharge happy path is now complete. It runs from the doctor's initiation all the way through to the patient being marked as discharged, with two decision diamonds along the way.

Before the final "Patient marked as discharged" step, add a decision diamond labeled "Confirm discharge?"
Connect the "No" arrow to a new rectangle labeled "Cancel discharge, return to patient record."
Connect the "Yes" arrow to the "Patient marked as discharged" end node.
From the "Are there pending items?" diamond's "Yes" path, add a branch with a rectangle labeled "Alert doctor: unsigned notes require signature."
Connect that alert rectangle to "Resolve pending items" so the flow continues after the doctor signs.
Color-code your discharge flow the same way as the admission flow: happy path in the default color, error paths in red or orange.

Your discharge flow should now include error handling for accidental discharge and unsigned medical notes, both color-coded to stand out from the happy path.

Why does discharge need a confirmation step?

In clinical software, an accidental discharge could have serious consequences. A patient marked as discharged might lose access to active care records or medication orders.

The confirmation diamond is a safety net that prevents real harm. This is the kind of edge case that separates professional UX flows from simple diagrams.

Flow getting too crowded?

If your shapes overlap or connectors cross, select two or more connected shapes and use the context bar to choose Lay out vertically. This auto-arranges the selected shapes without breaking connections.

You can also hold Space and drag to pan around the canvas, or hold Ctrl and scroll to zoom in and out.

Help me organize my Whimsical flowchart layout

Update your information architecture

Your flows just revealed screens and states that your original information architecture never anticipated. Error states, draft records, pending item resolution, and follow-up scheduling all need a home in your app's structure.

Switch to your "Clinical App - Information Architecture" board in another browser tab so you can reference your flows side by side.
Review your completed admission and discharge flows and list every screen or state that does not yet appear in your mind map.

Press Tab to add child nodes for new screens your flows introduced. These likely include an error state screen, a "Save as draft" or draft records section, a pending items resolution screen, and a follow-up scheduling screen.
Check whether any new screens need a new main branch. If a screen does not fit under your existing branches, add a new one.
Rearrange nodes so the hierarchy still follows a logical clinical workflow order, from admission through active care to discharge.

Why update the IA now instead of at the start?

This back-and-forth between information architecture and user flows is exactly how professionals work. You could not have predicted these screens when you first built the IA because you had not yet walked through the flows.

The IA and flows inform each other iteratively until both are complete. What you just experienced is a core UX design skill.

Before you do a final check, think about this: how many new nodes did you add to your mind map? Try to count them from memory before looking.

Now scroll through both flows and compare them against your IA. Every screen, state, and decision in your flows should have a matching node in your information architecture.

Count the distinct error and alternative paths in your admission flow. You should have at least three: the duplicate-patient branch, the missing-fields loop, and the network-error state.
Check your discharge flow for its own decision points (pending items and follow-up) and at least two error paths (accidental discharge and unsigned notes).
Confirm that your IA mind map now includes nodes for all the new screens and states your flows revealed.

Fewer than 3 error paths in your admission flow?

Go back to your sticky notes from Step 4. Each sticky note represents a gap that should now be a proper branch in your flow. If you still have sticky notes without a matching path, add the missing branches now.

If you had fewer than 5 sticky notes originally, think about additional scenarios: what if the patient's insurance is invalid, or what if two patients have the same name?

Help me identify more error paths for my clinical app flow

Secret mission

Create a User Journey Map

Your user flows document every step and decision point a clinician takes. But they do not capture how clinical staff feel during those steps. In this mission, create a user journey map that reveals the emotional highs and lows of an entire clinical shift.

Clean Up Your Resources

This project runs entirely on Whimsical's free Starter plan, so there are no ongoing costs. Decide whether to keep your boards for future reference, or delete them entirely.

Resources you used:

Clinical App - User Stories board in Whimsical.
Clinical App - Information Architecture board in Whimsical.
Clinical App - User Flows board in Whimsical.
Clinical App - User Journey Map board in Whimsical (Secret Mission).
Any test boards you created while learning the canvas in Step 1.

Keep everything running

No action needed. Choose this if you want to keep your UX deliverables as a portfolio piece or continue refining them.

Your boards are stored on Whimsical's free Starter plan at no cost. They remain accessible whenever you sign back in.
The free plan includes unlimited private boards, so your project boards will not count against any limit.
Your Whimsical account also remains free. There is nothing to cancel or downgrade.

Pause - I'll come back to this later

Since Whimsical's free plan has no ongoing costs, there is nothing to shut down or pause. Your boards stay exactly as you left them.

Sign out of Whimsical if you want to close the browser session. Your boards are saved automatically and will be waiting when you return.
Whimsical keeps 7 days of version history on the free plan, so any recent changes are recoverable during that window.

Delete - I don't want to use this again

Remove all project boards from your Whimsical workspace. This cannot be undone.

Go to your Whimsical workspace dashboard where all your boards are listed.
For each of the following boards, open its options menu and select the delete option:
Delete any test boards you created while learning the canvas in Step 1.
Confirm that your workspace dashboard shows no remaining project boards.

Nice Work!

You just produced a professional UX documentation package for a clinical management app, entirely from scratch. These are the exact deliverables a UX designer creates before a single pixel gets placed or a single line of code gets written.

What you learned:

Translated clinical staff needs into professional user stories using the structured "As a [user], I want [action], so that [outcome]" format, covering three user types and the full patient lifecycle.
Built an information architecture mind map in Whimsical that organizes every screen and feature of the clinical management app into a logical, navigable hierarchy.
Mapped complete user flows for patient admission and discharge with decision points, error paths, and edge cases, and discovered gaps in your IA by walking through flows as a real user would.
Completed an optional Secret Mission to push your UX skills even further.

Ready to quiz yourself?