Redesigning FRCC's News Platform
This redesign elevated FRCC's Community Service News platform into a modern, high-performing editorial system serving 44,700 annual visitors. As the institution's primary storytelling and brand-building channel, the platform now supports clearer content discovery, intuitive navigation, and a scalable information architecture that drives high-value actions such as program exploration, article sharing, and newsletter subscriptions.
The redesign strengthened FRCC's digital presence across its multi-campus network, transforming the News site from a static archive into a strategic content engine that supports recruitment, recognition, and long-term audience engagement.
Compressed design-to-production timeline from 8 weeks to 3 weeks by integrating AI-assisted prototyping (Figma Make and Claude Code) into the design workflow, enabling engineering to complete the first development cycle without clarification gaps.
Read the full story on Medium ↗One story. Two paths.
The previous structure was a single undifferentiated menu over an unsorted feed. The redesign introduced two layers: eight topical sections for browsing and five strategic pillar tags that cut across them. Every story lives once and surfaces through both, and each path resolves to the same article detail.
- One undifferentiated menu that mixes every link.
- No topical grouping and no cross-cutting tags.
- A single unsorted feed; stories are hard to locate.
- Two-layer navigation: utility bar and category bar.
- Eight topical sections and five cross-cutting pillar tags.
- A sorted, sectioned feed with two clear paths to every story.
System view: a reader browsing by topical section and a reader following a strategic pillar resolve to the same article. The trace marks whichever path is active.
An archive, not an editorial experience.
The FRCC blog lacked a functional information architecture and coherent UI structure, limiting users to a single unfiltered feed with no clear paths to explore deeper or program-specific content. Inconsistent templates, weak metadata, and low-visibility CTAs reduced discoverability and conversion, while outdated visuals diluted brand trust.
These issues resulted in broken user flows: minimal exploration, negligible subscriptions, and stagnant engagement metrics, showing the platform could not support a structured, editorial-quality experience aligned with current UX and accessibility standards. Our high-level goals were to:
Before and after redesign
Grounded in real user and institutional needs.
To ground the redesign in real user and institutional needs, I conducted stakeholder interviews and user research before moving into design. Conversations with the project sponsor, marketing leadership, and the EVP of Communications clarified strategic priorities: connect every story to FRCC's strategic plan, increase content relevance across audiences, and grow an underutilized subscriber base.
I supplemented these insights with user interviews across four primary audience groups and translated them into actionable personas:
High-funnel readers who often arrive via search. They struggled to explore related topics or programs and wanted clearer categories, summaries, and prominent ways to subscribe or save content.
Task-oriented readers who preferred quick updates, visual cues, and interest-based filtering. They found the old layout text-heavy and difficult to scan.
Writers who wanted their work to be discoverable. They expressed frustration with buried posts, missing author pages, and limited editorial organization.
Leaders focused on enrollment and messaging. They emphasized tighter alignment with institutional strategy and better insight into how content drives downstream actions.
Across groups, common themes emerged: users valued structured navigation over an endless feed, needed clearer visual hierarchy, and expected the news experience to reflect FRCC's brand and strategic intent. Analytics reinforced these insights: 44,700 visits last year, with sessions averaging 1.36 minutes and mostly single-page, and 98% of traffic came from new readers with little return behavior, highlighting an opportunity to improve navigation, relevance, and subscription pathways.
Team discussion
From a dead-end feed to a mapped architecture.
I created current and proposed user flow diagrams. The current blog flow had almost no branching: users landed on a homepage post and could click Read More, then hit a dead-end. The redesigned flow introduced category pages, tag filters, search, and clear back paths to related content.
Before and after: user flow evaluation and redesign rationale
With insights in hand, I sketched an updated information architecture and user flows. The new IA was organized around two axes: user-facing topics and strategic themes. I defined a top navigation with FRCC-relevant sections, Top News, Academics, Student and Alumni, Community, Innovation, College Success, based on stakeholder input and content audit. In parallel, I mapped out strategic labels (Learning Without Limits, Vibrant Culture, College Excellence) to tag posts with FRCC's institutional priorities. This dual structure allowed readers to find content by either audience interest or by the College's strategic pillars.
Dual navigation framework: topical categories and strategic themes
Dual navigation framework: topical categories and strategic themes
Impact first, complexity deferred.
Next, I worked with the steering committee to prioritize features. We had to balance the College's strategic goals against development constraints. A key tradeoff was feature complexity vs. timeline: stakeholders wanted robust category and tag systems and accessibility compliance, but we agreed to focus first on the elements that would have the greatest impact (core navigation, essential CTAs, and content templates), while deferring more advanced search or personalization to later phases.
Decision-making rationale
As part of this process, I ran a series of A/B design tests to validate early assumptions before committing to a direction. These tests focused on header structure, feed layout, and the density of visible content. For example, we compared a hover-based header (Variant A) against a persistent category bar (Variant B), and a list-first article feed against a grid-first layout. Stakeholders consistently favored designs that surfaced more stories at once and reduced hidden interactions, so we treated the results of these comparisons as inputs for final prioritization.
Validating early directions: scope refinement through A/B testing
Validating early directions: scope refinement through A/B testing
We also debated the layout approach. Our internal design exploration included two header options (hover-revealed cards vs. split featured content) and two feed options (list-first vs. grid-first). The A/B tests showed a clear preference for the grid-based card system, which provided high visibility of content despite the slightly reduced focus on any single story. The grid maximized discoverability with more stories visible per scroll and allowed us to surface multiple CTA points (e.g., subscribe banners) across the interface.
Navigation, templates, and a consistent voice.
Navigation redesign: I refined the top navigation to include the main content areas (Top News, Academics, etc.) and ensured it remains consistent across all pages. Each major section now has its own category landing page (e.g., Academics), along with direct access to the main FRCC website, a dedicated Browse page, a Top Contributors page, a prominent site-wide search bar, and a Subscribe Now button placed in the header.
To reinforce conversions, I also added a second Join our FRCC News newsletter CTA at the bottom of listing pages, creating strong entry and exit points for subscription. The Browse / View All page consolidates every article and includes robust filters for categories, tags, contributors, and date, making it easy for readers to explore content in multiple ways.
Foundational UX structure: navigation, filters and page frameworks
I also planned new post categories with 2 wireframing options (News, Announcements, Student Stories, etc.) and set up an editorial calendar to ensure ongoing content across FRCC's strategic pillars. Importantly, the site voice was made consistent: headlines now match FRCC's brand tone. Content strategy: I collaborated with the Content Specialist to define templates and guidelines. Each article includes a featured image, title, date, author, category tag, establishing hierarchy at a glance.
Overall, these updates created a campus-news magazine feel: bold visuals and modular sections tell a story at every scroll. As one stakeholder noted in design review, "The new layout really feels like a professional news outlet now."
A system the brand can scale on.
During this phase, I conducted a full visual audit of the existing blog to understand how colors, typography, components, and layouts were being used, and where inconsistencies were creating friction. This inventory helped me define what the new system needed to standardize and scale. I then created a refreshed FRCC News design system grounded in the college's brand. It includes:
Design system
At the UI level, I introduced a modular card system used across all listing pages. Each card displays the article image, headline, metadata (date, author, category), and an excerpt. This consistent structure makes scanning effortless and creates a cohesive visual rhythm throughout the site. Accessibility was built in from the start: all colors meet WCAG AA contrast standards, all images should include alt text, focus states are clearly visible, and every template is fully responsive. The final visual language is clean, modern, and spacious, bringing clarity to the content while staying true to FRCC's brand identity.
Bringing the new FRCC News experience to life.
With the strategy, IA, and design system in place, I translated the work into a fully responsive interface across desktop and mobile. The goal was to create a reading experience that feels structured, modern, and effortless, regardless of device.
The layout emphasizes clarity and exploration: a persistent top navigation anchored by user-facing categories, a flexible grid that adapts from featured hero stories to standard cards, clear metadata patterns (tags, date, author) that help users orient quickly, a redesigned article template with improved typography, generous spacing, and strong CTAs, and related stories and share actions placed where engagement is most natural. Every component snaps into the grid cleanly, making the interface feel consistent and intuitive.
The mobile design prioritizes speed, readability, and thumb-friendly interaction. Instead of infinite scrolling, I introduced structured sections and collapsible menus: a simplified mobile nav with clear category access, scannable card layouts that maintain hierarchy at small sizes, improved article readability through larger line heights and tighter spacing rules, sticky share and subscribe actions placed where mobile users naturally pause, and tap-friendly filter and tag interactions on browse pages.
Explore the final designs directly in Figma
Validated before a line of code.
Before finalizing the redesign, I ran moderated usability sessions and click-through testing on the high-fidelity prototype. The goal was to validate core UX decisions, navigation, hierarchy, discoverability, and comprehension, before engineering investment.
92% of users correctly understood each top-level category (vs. ~40% previously). Users clearly distinguished Categories (content topics) from Tags (strategic themes).
86% successfully refined results using filters (up from 22%). Users preferred tag-based exploration over month archives, describing it as more relevant and easier to browse.
7 of 8 participants scrolled deeper than in the old layout. Full-width reading and improved typography increased perceived trust and professionalism.
No participants mistook the mid-article CTA as the end of the page. Many described the CTA as natural and not overwhelming, and 5 of 8 said they would likely subscribe from that location.
All participants said author bios improved credibility. Several naturally clicked the author name after reading stories they liked.
Final design discussion
Testing confirmed that the new IA was clear, intuitive, and aligned with how users think, that the dual-navigation model (Categories plus Pillar Tags) served both audience needs and FRCC's strategic themes, and that the design system reduced cognitive load and created visual consistency. The flow naturally supported all key business outcomes: discover content, stay longer, subscribe.
What readers and stakeholders said.
"As someone who publishes content here, I love how my articles look now. The visual treatment really makes them shine."
"This redesign significantly strengthened our digital brand presence. We've seen measurable improvements in engagement."
"The new blog is so much easier to navigate on my phone. I actually check it daily now!"
Great design makes itself invisible.
This project reinforced the critical importance of leading with empathy and data. The most impactful improvements came not from adding complexity, but from ruthlessly simplifying the experience around core user needs. Seeing measurable improvements in user satisfaction while simultaneously reducing cognitive load demonstrated that thoughtful constraint breeds innovation.