Deliverable 06 · Design
Wireframes & Prototype
Annotated low-fidelity layouts for the key templates, usability findings, and the approved clickable prototype.
Gray boxes before green ones
Every key template started as a low-fidelity wireframe: gray boxes, crossed-out image placeholders and lines standing in for text. No color, no fonts, no photos. That keeps the conversation on what matters first: what each page is for, what people need to find, and in what order.
Why low-fi
Structure before style
When a page is gray, nobody debates the shade of green. Reviewers react to hierarchy, priorities and missing content, which is exactly the feedback that is cheap to act on at this stage.
Why low-fi
Fast to change
A wireframe can be redrawn in minutes during a meeting. Moving the Apply button or regrouping the portal menu cost nothing here and would have cost hours after the Drupal build.
Why low-fi
Desktop and mobile together
Each template was drawn at both sizes side by side. Most prospective students first meet the college on a phone, so the mobile layout was never an afterthought.
Client sign-off
See it before we build it
The college asked to see the design before any Drupal work began. Once the wireframes were agreed, they became a clickable, full-color prototype covering the homepage, a program page, Our History, the Hawk Portal and the Staff Dashboard. The client reviewed it, asked for one revision (the icon set was redrawn as simpler line icons) and then approved it. That approved prototype is the blueprint the live site was built from.
Homepage
The homepage is a switchboard. Its first job is to send three very different visitors (future students, current students, families and community) to the right place in one click, then show that Palmetto Ridge is a living campus with a long history.
1Header with a permanent Apply button. Six main menus plus an Apply button that never scrolls away. A slim utility bar above holds the Hawk Portal link for current students.
2One headline, two actions. “Rooted in history. Built for what’s next.” with Explore programs and Visit campus. No carousel: rotating slides hide most of their content from most visitors.
3Where are you headed? Three audience paths (Future Students, Current Students, Families & Community), each a large photo card with a single clear next step.
4Six areas of study. Health Sciences, STEM, Business, Skilled Trades, Arts and Public Service, each linking straight into the pre-filtered program finder.
5News and events side by side. A lead story with two smaller ones, next to the next five dates on the calendar. Both are live Drupal Views, so the homepage never goes stale.
6A closing call to action. “Your next chapter starts at the Ridge” with Apply and Request info, so nobody has to scroll back up.
1Headline and one button above the fold. On a 375px screen the hero keeps the headline and a single primary action; the second action moves just below.
2Audience paths stack. The three path cards become a vertical list with full-width tap areas.
3Areas of study as a 2-column grid. Short labels and icons keep all six visible in two thumb-scrolls. The menu itself collapses behind a single Menu button with Apply kept beside it.
Program detail
One template for all 33 programs, from Associate Degree Nursing to Welding. Every program answers the same questions in the same place: what is it, how long does it take, what does it lead to, and how do I start?
1Area, name and a one-line promise. The page hero carries the area of study as an eyebrow, the program name and its summary. Breadcrumbs lead back to the finder.
2Plain-language description. The Drupal body field, written for a first-generation student who may not know what “A.A.S.” means. Editors get headings and lists, not layout tools.
3A sticky fact card. Credential, credit hours, typical length, format and median South Carolina salary stay in view while you read, ending in Request info. These are structured fields, so they also feed the finder’s filters.
4Where it leads. Careers and typical roles as short tiles, because “what job does this get me?” was the first question in every interview.
5Closing call to action. Apply or Request info. On mobile the fact card moves above the description so the essentials are never more than one scroll away.
Program finder
The Programs of Study page is the most-used tool for prospective students. It has to work for someone who knows exactly what they want (“nursing”) and for someone who only knows they like working with their hands.
1One filter bar. A keyword search (“e.g. nursing, welding, business”), Area of study and Credential, with Apply and Reset. These are Drupal Views exposed filters, so the URL can be shared or bookmarked.
2Cards that answer the first question. Area tag, program name, credential and length on every card, so people can compare without opening each page.
3A friendly empty state. “Nothing matches yet. Try clearing your search.” instead of a blank grid. On mobile the grid becomes a single column and the filters stack into a compact panel.
Hawk Portal
The student portal’s home screen. Students sign in for a handful of reasons (today’s classes, a deadline, their balance), so the dashboard should answer “do I need to do anything?” in a few seconds.
1Navigation grouped by need. Three short groups instead of a long list: Academics (classes, grades, degree progress), Money (balance, financial aid) and Connect (advisor, announcements, campus life).
2A greeting with one alert. “Welcome back, Jordan” with the single most urgent message, such as “Spring 2027 registration opens Nov 2.”
3The main column is for today. Today’s classes, then announcements. Announcements are real Drupal content that staff publish through the normal review workflow.
4The side column is for status. Degree progress, account balance with Pay now, a to-do list, upcoming deadlines and your advisor’s contact.
1Sidebar becomes a horizontal nav. The three groups turn into a scrolling row of pills at the top, so the content starts immediately instead of after a long menu.
2One column, priority order. Classes first, then balance and deadlines, then everything else. The order follows what students said they check most.
Staff Dashboard
Where staff land after signing in. Most college web editors update the site a few times a month, so the dashboard replaces Drupal’s admin menus with plain-language tasks and a clear view of what needs attention.
1A personal greeting. “Good afternoon, Maya.” uses the staff member’s full name, not their username, and sets a human tone for a tool people often find intimidating.
2Four numbers that matter. Items waiting for review, upcoming events, new enrollment inquiries and recently published pages.
3“What would you like to do?” Action tiles in plain words: Write a news story, Add an event, Update a program, Post a portal announcement. Tiles only appear if your role allows that task.
4Review queue and calendar side by side. “Needs your attention” lists drafts sent for review; “Coming up on the calendar” shows the next events.
5Enrollment inquiries table. Name, program of interest, student type and status, visible only to the Admissions role. Below it, short guides: how publishing works and which content type to use.
Usability testing
Before sign-off, seven participants (fictional for this demo: four prospective or current students, two parents and one staff editor) worked through five tasks on the clickable prototype. Each session took about 25 minutes. We measured whether people completed each task without help.
| Task | Round 1 | After changes | What we saw |
|---|---|---|---|
| Find a nursing program and how long it takes | 6 of 7 | 7 of 7 | The fact card answered “how long” instantly; one person searched “RN” and got no match until synonyms were added to summaries. |
| Request information about a program | 5 of 7 | 7 of 7 | Two people looked for Apply in the header first and could not find it on smaller screens. |
| Sign in to the Hawk Portal and find your balance | 6 of 7 | 7 of 7 | The Money group made balance easy to find. One participant felt “stuck” on the sign-in screen with no way back. |
| Find this week’s events | 7 of 7 | 7 of 7 | Everyone used the homepage calendar list; nobody needed the menu. |
| As staff, find new enrollment requests | 3 of 7 | 6 of 7 | The original label “Leads” confused everyone except the admissions participant. |
What changed
Renamed
“Leads” became “Enrollment inquiries”
Sales language did not match how college staff talk. The content type, dashboard card and admin list now all say Inquiries.
Added
“Back to the website” on portal sign-in
The sign-in screen is a focused page with no main menu. A clear link home means nobody feels trapped there.
Moved
Apply button into the header
It was only in the hero and the footer. Now it sits beside the main menu on every page and stays visible next to the mobile Menu button.
Palmetto Ridge Junior College is a fictional institution. This case study demonstrates process and deliverables for portfolio purposes.