Overview
The Front Range Community College (FRCC) website is a vital resource for students, faculty, and prospective applicants. This project focuses on improving navigation, accessibility, and usability to enhance the user experience.
As a UX Designer at Front Range Community College (FRCC) my work prioritizes clarity, usability, and accessibility, driving continuous improvements through iterative design and usability testing.
Timeline
May '24 - Present
Role
UX Designer
Front-end Development
Accessibility improvements, ensuring WCAG 2.1 AA compliance
Contribution
Primary research
Concept ideation
Prototyping
High-fidelity designs
Front-end Development
Supported accessibility efforts through audits, usability testing, and implementing improvements with the team.
Team
2 UX Designer/Researcher
1 Web Manager
2 Developers
4 Accessibility Department
Objective
To enhance the usability and aesthetic of the course exploration process on the homepage by redesigning tabs, reducing clutter, and streamlining navigation.
Challenges Identified
Tabs were oversized and poorly organized, leading to navigation difficulties.
The announcement section lacked interactive elements, resulting in low user engagement.
The homepage design created visual clutter that overwhelmed the users.
Limited options for filtering programs based on user preferences hindered exploration.
Solutions Implemented
Targeted design solutions to streamline navigation, enhance engagement, and improve accessibility, creating a more
intuitive and user-friendly experience.
Tab Redesign
Resized and refined course tabs for clarity and simplicity.Grouped content into visually distinct and user-friendly categories
Enhanced Navigation
Introduced advanced filtering options such as location, program type, and modality (online/in-person).Added a prominent search bar to assist users in quickly finding programs of interest.
Cursor Enhancement
We conducted 10 semi-structured interviews with current students, prospective applicants, staff, and parents. These interviews aimed to explore user needs, challenges, and expectations regarding website navigation, accessibility, and content relevance.
Improved Visual Hierarchy
Utilized SVGs for sharp iconography, improved font sizes and spacing to align with WCAG 2.1 AA standards, and applied accessible color palettes. Ensured adaptive designs for seamless transitions across devices.
55%
Elevated user engagement though cursor enhancement after implementation through
25%
Improved readability and accessibility through user testing
65%
Enhanced clarity and ease of course navigation through user testing
User Research & Design Process
We conducted extensive research to understand the FRCC website user experience, uncovering insights into how students and users navigate, retrieve information, and make decisions.
01. Observation Study
Observed students, prospective applicants, and staff using the FRCC website to find information about programs, admissions, and campus resources.
Identified navigation patterns, common behaviours, and major pain points.
02. Competitor Analysis
Analyzed 5 higher education websites—Colorado Community Colleges Online, Arapahoe Community College, Colorado State University, Red Rocks Community College, and the University of Colorado Boulder.
Identified industry standards, usability best practices, and areas where FRCC could differentiate itself.
03. Semi-Structured Interviews
Conducted 10 semi-structured interviews with students, prospective applicants, staff, and parents.
Explored user needs, challenges, and expectations regarding website navigation, accessibility, and content relevance.
04. Wireframing & Prototyping
Developed low-fidelity wireframes to explore layout, navigation, and information architecture.
Created high-fidelity interactive prototypes for testing core user journeys (e.g., applying for programs, finding resources).
Iteratively refined designs based on stakeholder feedback
05. Usability Testing
Conducted usability tests to measure task completion rates, error frequency, and time on task.
Identified pain points in navigation, search functionality, and content discoverability.
Used heatmaps and session recordings to understand real user interactions.
06. A/B Testing & Iterative Refinements
Ran A/B tests on key UI elements (e.g., navigation menus, and button placements) to evaluate user preferences.
Conducted tree testing & card sorting to refine site structure and information architecture.
Analyzed post-launch analytics to measure impact and continuously improve the experience.
Cursor Enhancement
Enhanced the announcement section with interactive cursor designs and animations to boost user engagement.
Custom Cursor Design
Created a responsive cursor using CSS and JavaScript that changes shape (e.g., arrow to hand icon) when hovering over announcements.
Ensured the cursor design aligns with the website’s overall aesthetic.
Hover Effects and Animations
Added subtle hover effects like scaling, opacity changes, and shadows to make announcements visually engaging.
Used CSS transitions for smooth animations to provide immediate feedback.
Dynamic Content Display
Implemented a carousel or sliding mechanism to display multiple announcements in a compact space.
Added navigation arrows and dots for users to manually browse through announcements.
Accessibility Features
Ensured hover effects and animations comply with WCAG 2.1 AA standards.
Added keyboard navigation support for users relying on assistive technologies.
Improved Visual Hierarchy
Improved the visual hierarchy to enhance readability, accessibility, and overall user experience.
SVGs for Sharp Iconography
Replaced outdated icons with scalable vector graphics (SVGs) for crisp, high-quality visuals.
Ensured icons are consistent in style and size across the website.
Enhanced Typography and Spacing
Adjusted font sizes, weights, and spacing to align with WCAG 2.1 AA standards.
Used a clear hierarchy (e.g., headings, subheadings) to guide users through content.
Accessible Color Palette
Applied a colour palette with clear contrast ratios to ensure readability.
Ensured text and interactive elements maintain accessibility compliance.
Adaptive Design
Designed layouts to seamlessly transition across devices (mobile, tablet, desktop).
Ensured consistent and intuitive user experiences on all platforms.
Course Search Tab Redesign
Redesigned the course search tabs to simplify navigation, improve organization, and enhance user engagement.
Resized and Refined Course Tabs
Reduced tab size to minimize clutter and improve visual appeal.
Grouped content into clear categories like "Programs by Interest" and "Online vs. In-Person" for better organization.
Advanced Filtering Options
Added filters for location, program type, and modality to help users narrow down their search.
Included a "Popular Programs" section to highlight frequently searched courses.
Prominent Search Bar
Introduced a search bar with autocomplete functionality for quick program searches.
Ensured the search bar is prominently placed for easy access.
Interactive Elements
Added hover effects to indicate interactive tabs and filters.
Included tooltips to provide additional information about programs or filters.
Blog Redesign (Wireframing-Stage)
Redesign the blog to improve navigation, categorization, visual hierarchy, and overall accessibility for students, faculty, and prospective users.
Challenges Identified
Poor content organization, no clear categories or tags
Limited search functionality and navigation cues
Visual hierarchy overshadowed by images, making scanning difficult
No onboarding or guidance for new users
Impact
Users can now quickly filter and navigate content by categories and tags
Improved clarity and readability, making content discovery faster and easier
Accessibility compliance reinforced, enhancing inclusivity for all users
Subscription feature will increase user retention and create new engagement opportunities
Solutions Implemented
Information Architecture: Introduced goal-oriented categories, tags, and filters for easy content discovery
Visual Hierarchy: Rebalanced text and images for better scannability and readability
Navigation & Search: Added visible search bar, breadcrumbs, and filter indicators
Engagement: Highlighted related posts, recent/popular posts
Accessibility: Ensured WCAG 2.1 AA compliance across all redesigned components
Intro & Metadata: Added short blog introduction, author information, and post dates
Subscription Integration: Strategically placed subscription buttons across multiple touchpoints to support ongoing engagement and business growth, while maintaining a clean and unobtrusive design
.
You Belong Here
Campaign
The 'You Belong Here' campaign was a strategic initiative to unite Front Range Community College’s (FRCC) three campuses under one inclusive brand identity while celebrating a record-breaking graduation milestone in May 2025 -awarding 5,700 degrees and certificates to nearly 4,200 students. At its heart, the campaign recognized belonging as a critical driver of student success and retention—especially for our diverse student body.
Medallion Awards 2025 Campaign Submission
Accessibility Remediation – FRCC Website
After an external audit by Access Living in March 2025, we launched a full-site accessibility remediation to address WCAG 2.1 AA issues. As the UX Designer with front-end expertise, I partnered with our developer and content manager to resolve barriers using manual code review, spreadsheet tracking, and automated tools like WAVE and Siteimprove.
Progress Metrics
External | Access Living | 41 |
Internal | WAVE, Siteimprove | Supplemental validation & ongoing monitoring |
Resolved: 32 (78%). In Progress: 9 (22%). Outstanding: 0
Process Highlights
Manual code review + WCAG testing
Spreadsheet tracking system for 41 issues (show a blurred screenshot to demonstrate rigor)
Iterated with Modern Campus CMS support on complex templates and forms
Developed internal accessibility checklist to future-proof updates
Impact
78% of identified accessibility issues resolved within 3 months
,
.
OnBrand: FRCC’s First Branded Marketing Newsletter
Led the design and launch of OnBrand, FRCC’s first branded marketing newsletter. The quarterly publication strengthens brand alignment, showcases success stories, and equips faculty and staff with tools to amplify FRCC’s voice.
Progress Metrics
FRCC lacked a consistent, branded channel to share marketing insights, updates, and success stories across faculty, staff, and leadership. Existing communications were fragmented, making it hard to create alignment and amplify the college’s brand.
Objective
Design and launch a quarterly marketing newsletter in Mailchimp that communicates FRCC’s story effectively, aligns teams across the institution, and reflects the college’s brand identity.
Process
Designed a modular Mailchimp template that can be reused for future newsletters
Structured content hierarchy (Insights & Trends, Success Stories, Tips, Behind the Scenes, Priorities) for easy scanning and navigation
Collaborated with the Communications leadership team to align tone of voice and messaging
Applied WCAG accessibility practices for email (alt text, color contrast, heading structure, mobile responsiveness)
Conducted internal testing to ensure cross-device and cross-client readability
Impact
Successfully launched FRCC’s first branded marketing newsletter
Improved internal communications by centralizing updates into a unified channel
Delivered a scalable system in Mailchimp that supports ongoing campaigns with minimal overhead
Strengthened FRCC’s brand presence with a bold, consistent, and accessible digital communication tool
Final Designs
FRCC Website
With that, we concluded the website redesign project for Front Range Community College. Our final step was a closing review meeting to present the updated designs and deliver all project files for implementation.