UI/UX Flow Charts | Site Dev | Palmetto Ridge Junior College

How people move through the site

Five flows cover the tasks that matter most to our personas. We tested each one on a phone before building it, and every step maps to a real page or screen in the Drupal build.

How to read the flows

Start: where the person begins

Step: a page or action

Decision: a question with two answers

End: the outcome

The five flows

Find a program and request info (Destiny, Marcus)
Apply and enroll in five steps (Destiny)
Find what is due in the Hawk Portal (Jordan)
Publish a news story (Maya)
Check if campus is closed for weather (any visitor)

All participants, figures and quotes are part of this fictional case study.

Find a program and request info

The flow that matters most to enrollment. Before the redesign, this ended in a shared inbox. Now it ends in a tracked record.

Flow A: Prospective student to Admissions follow-up

Persona: Marcus Holloway, returning adult, on his phone after work

Taps “Find your program” on the homepage

Program finder: filters Business & Hospitality, evening and online

Opens Accounting: sees credential, length, format, cost

Ready to ask a question?

If not yet

Compares with Business Administration, returns later

Request Info form, program pre-selected (five required fields)

Inquiry saved privately with status New

Admissions sees it under Enrollment inquiries on the Dashboard

Counselor calls and sets status to Contacted

1The program finder at /academics/programs filters by pathway, format and credential, so Marcus sees only what fits his schedule.

2The Request Info form carries the program forward. He never retypes what he already chose.

3Inquiries are private records only the Admissions role can see. Status (New, Contacted) replaces the shared inbox.

Apply and enroll in five steps

We rewrote a maze of pages into five numbered steps, with financial aid as a clear branch rather than a detour.

Flow B: From application to first day

Persona: Destiny Grant, first-generation senior, with her mom

Opens “Apply” from the program page

Step 1: Submit the free application

Has she filed the FAFSA?

If no

Plain-language FAFSA guide with school code and a help session to book

Step 2: Financial aid reviewed and award shown

Step 3: Placement or send transcripts

Step 4: Orientation and advising

Step 5: Register for classes in the Hawk Portal

1The five steps live on Apply, each with what to bring and how long it takes.

2The FAFSA branch links to Tuition & financial aid and includes a Spanish summary for family members.

3In testing, 7 of 8 participants could say what came next at every step without help.

Find what is due in the Hawk Portal

Current students needed one place that tells them what to act on. The portal leads with alerts, not menus.

Flow C: Clearing a hold before registration

Persona: Jordan Reyes, sophomore, between classes

Signs in to the Hawk Portal

Sees today’s classes and a hold alert at the top

Does the hold block registration?

If no

Checks deadlines and degree progress, done

Taps “Book advising” from the alert

Advisor clears the advising hold

Registers on November 2, the first day

1The Hawk Portal shows holds, balance and degree progress before anything else.

2Announcements and deadlines are managed in the CMS by Student Affairs, so dates change in one place.

3Every alert has one action button. Jordan never has to guess which office to call.

Publish a news story

The editor flow is part of the product. It had to move a story from draft to homepage the same day, with a review step that does not slow anyone down.

Flow D: Draft, review, publish

Persona: Maya Alvarez, Director of Communications, and a Content Editor on her team

Editor opens the Dashboard

Quick action: “Add news story”

Writes the story, adds a photo with alt text, saves as Draft

Sends for review: status becomes Needs review

Story appears in Maya’s review queue

Approved?

If no

Back to Draft with a note explaining what to fix

Maya publishes: status becomes Published

Story shows on the homepage and on /news; every revision is kept

1The Dashboard uses plain words (“Add news story”, “Waiting for your review”) instead of Drupal’s admin menus.

2Content Editors can draft and submit; only the Communications role can publish. Athletics edits its own team pages the same way.

3Revisions mean a mistake can be rolled back in two clicks, which made the team comfortable publishing faster.

4Average time to publish in pilot use: same day, down from five days on the old CMS.

Is campus closed for weather?

The Lowcountry gets hurricanes and flooding. When weather hits, the site has one job: answer the question in seconds on a phone.

Flow E: Urgent update on a phone

Persona: Any visitor, often a student or parent at 6 a.m.

Opens the site on a phone

Is there an active alert?

If no

No banner: campus is open on the normal schedule

Alert banner at the top of every page: “Campus closed today”

Taps “Details” to open the full news update

Knows what is closed, what moves online and when the next update comes

1Communications can turn the banner on from the Dashboard in under a minute, with no developer involved.

2The banner links to a story on News, so details stay in one place and are easy to update.

3The same alert appears in the Hawk Portal, so signed-in students see it too.

Flow principles

Four rules we held every flow to, from the first sketch to final testing.

Rule 1

One next step

Every screen has a single primary action. If a person has to choose, the choice is a clear yes or no.

Rule 2

Phone first

Each flow was tested on a phone before a desktop. No step depends on a PDF or a wide table.

Rule 3

Nothing disappears

Inquiries get a status, drafts get a reviewer, changes get a revision. Work is always somewhere visible.

Rule 4

Plain words

We name things the way students and staff say them: “Request info”, “What’s due”, “Waiting for your review”.