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
Contribution
Primary research
Concept ideation
Prototyping
High-fidelity designs
Front-end Development
Team
1 UX Designer
1 UX Researcher
1 Project Manager
2 Developers
Status
Phase-1 Shipped
Phase-2 In- Development
Problem Context
The FRCC website faced usability challenges, including cluttered navigation, low engagement, and limited accessibility, hindering users from efficiently finding information and programs.
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
(Understanding User Behavior)
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
(Benchmarking Best Practices)
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
(Gathering User Insights)
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
(Designing Solutions)
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
(Validating Designs)
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
(Optimizing for Usability & Engagement)
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.
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.
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.
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.