THE CHALLENGE
Here’s a polished, concise version that keeps everything you’re trying to say:
The university website lacks cohesion, which undermines user trust. To increase student applications—particularly from international audiences—we must establish credibility through a unified, streamlined web experience. This requires building a maintainable system that delivers accurate, accessible information for all campuses and programs within a single, centralized website.
THE SOLUTION
A redesign eliminating redundant content management, combining the websites into one unifying website, and supported a smooth accreditation review.
THE PROCESS
Empathize — Research & User Understanding
-
Conducted a full audit of four separate campus websites to understand user frustration points.
-
Reviewed analytics and user session recordings to identify where users struggled to find programs, compare campuses, or start applications.
-
Benchmarked competitor websites in higher education and healthcare to understand industry standards and opportunities.
-
Identified primary user goals: exploring programs, comparing locations, and applying with confidence.
Define — Problem Statements & Requirements
-
Synthesized research into key problems: inconsistent content across campuses, poor navigation, outdated branding, and low accessibility compliance.
-
Identified business requirements tied to accreditation deadlines and the need for centralized content management.
-
Defined core UX problems:
-
Users cannot trust that program information is accurate.
-
Users cannot easily navigate or compare campuses.
-
Internal teams waste significant time maintaining duplicate content.
-
-
Created information architecture requirements for a unified, scalable site.
-
Encorporate new branding guidelines: https://branding.phsu.edu/
BRANDING
Primary & Secondary Colors
PHSU Primary -Light
#009999
PHSU Primary
- Medium
#006666
PHSU Primary - Dark
#003333
PHSU Secondary - Bright
#009999
PHSU Secondary - Dark
#009999
Department Colors
School of Dentistry
#7D0D5C
School of Medicine
#CD3915
Public Health Program
#E18872
School of Nursing
#64D6D7
School of Behavioral & Brain Sciences
#E7B90C
Futura PT Book
Aa Uses: Main Text Font
Paragraph - 16pt
Header 6 - 18pt
Header 5 - 24pt
Header 4 - 32pt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elit neque, interdum tristique orci at, placerat cursus libero. Sed posuere ultricies eleifend. Duis interdum id felis eu varius. Sed ipsum sem, auctor vel arcu non, sodales fringilla orci. Etiam mattis est vel hendrerit fermentum. Maecenas turpis felis, semper elementum tristique eu, vehicula molestie dui.
Header 3 - 48pt
Header 2 - 56pt
Header 1 - 72pt
Times New Roman
Aa Uses: Decorative Text
Paragraph - 16pt
Header 6 - 18pt
Header 5 - 24pt
Header 4 - 32pt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elit neque, interdum tristique orci at, placerat cursus libero. Sed posuere ultricies eleifend. Duis interdum id felis eu varius. Sed ipsum sem, auctor vel arcu non, sodales fringilla orci. Etiam mattis est vel hendrerit fermentum. Maecenas turpis felis, semper elementum tristique eu, vehicula molestie dui.
Header 3 - 48pt
Header 2 - 56pt
Header 1 - 72pt
Ideate — Content Strategy, IA & Solution Exploration
-
Consolidate all campus content into a unified CMS framework to eliminate redundancy.
-
Build a structured JSON model to dynamically deliver accurate, location-specific program details.
-
Reorganize the entire navigation system to fit user mental models.
-
Propose and advocate for a global search feature to improve discoverability across thousands of pages.
-
Explore layout patterns, user flows, and content structures to support the redesigned experience.
.png)
INFORMATION ARCHITECTURE
To the left is an example of the Information Architecture (IA). After gathering all the content and studying the page breakdowns on each campus website, we wanted to consolidate as much as possible. Here you can see how to navigate through the site and how it's structured.
View Full Document
Prototype — Wireframes, Flows & High-Fidelity UI
-
Prioritized WCAG/ADA accessibility, improving contrast, spacing, form usability, and mobile layouts.
-
Simplified critical flows (program exploration → comparison → application) to reduce friction.
Created responsive wireframes in Figma for homepage, programs, schools, news, library, and informational pages.
Interactive Wireframe
Play with me!
WIREFRAMES
Developed high-fidelity prototypes incorporating modern UI elements and updated branding.
Hi-Fidelity Prototype
Play with me!
Hi-Fidelity Page Design
Test — Usability Testing & Iteration
-
Ran usability tests with unbiased participants via Maze.
-
Identified friction points in program exploration, search behavior, and mobile navigation.
-
Iterated on page layouts, button hierarchy, IA labels, and responsive behaviors.
-
Conducted accessibility audits and refined both design and code for WCAG compliance.
Implement — Development, QA & Launch
-
Built reusable, scalable front-end components using HTML, CSS, JS, jQuery, PHP, and XSL.
-
Integrated components with the CMS to support modular editing and content consistency across campuses.
-
Performed QA reviews for accessibility, performance, responsive behavior, and design fidelity.
-
Supported a smooth launch that passed accreditation review and significantly reduced content-management overhead.
THE RESULT
40% faster load times across core pages
Received positive feedback from marketing, admissions, and leadership
Resolved key accessibility and content duplication issues
Improved conversion flow from homepage to program inquiry
Established a stronger infrastructure for future development
Built a system ready to scale with new campuses and future programs
Unified all campuses into a single trusted web presence