Home/Works/University Star Redesign
Case Study · Student Newspaper

University Star Redesign

subtitle

FocusUI, Interaction, IA, Editorial Web
RoleWeb Editor
Year2025
ToolsFigma · (add CMS/stack)

Overview & Context

The University Star is the student-run newsroom for Texas State University—publishing breaking news, features, sports, and opinion for a campus-wide audience. The site is the primary digital front for that reporting: fast updates, long-form stories, multimedia, and archives readers return to on phone and desktop.

Readers scan headlines between classes; editors and reporters publish on deadline. The redesign had to serve both: clear hierarchy and legibility for readers, and predictable patterns for a rotating student staff training new people each semester.

University Star — previous or new site overview. Replace with screenshot.

[FIG 01] SITE OVERVIEW OR BEFORE / AFTER

Role & Scope

I served as Web Editor, leading the digital side of the paper: IA and navigation, UI and interaction patterns, and coordination with editors and reporters so the site matched how the newsroom actually publishes. (Adjust title or responsibilities to match your org chart.)

  • UI design and interaction patterns for article, section, and hub pages
  • Information architecture: sections, tags, archives, and wayfinding
  • Editorial UX: headline hierarchy, bylines, related stories, breaking vs. feature treatment
  • Responsive layout and touch-friendly affordances for mobile readers
  • Accessibility aligned with WCAG-oriented practices for a public university site

Challenge

The previous experience made it harder than it should be to find fresh coverage, distinguish breaking updates from features, and read long stories comfortably on small screens. The redesign focused on clarity, consistency, and patterns that scale as sections grow.

Design Principles

  • Scan first — strong headline and deck hierarchy; support skimming without losing depth
  • Trust through structure — predictable article templates and navigation across sections
  • Mobile-realistic — thumb reach, readable line length, fast perceived performance
  • Editorial alignment — UI choices that reflect newsroom priorities (urgency, accuracy, transparency)

Information Architecture & Navigation

Mapped primary entry points—home, section fronts, search or archive, and article deep links—and simplified paths so repeat visitors could jump to Sports, News, or Opinion without hunting. (Describe your actual navigation model: mega-menu, hub pages, breadcrumbs, etc.)

Sitemap or navigation — replace with diagram or screenshot.

[FIG 02] IA / NAVIGATION

UI & Reading Experience

Typography, spacing, and component rhythm were tuned for news: article title → deck → byline/meta → body, with pull quotes and inline media that do not break reading flow. Color and contrast support long reading sessions and meet institutional expectations for accessibility.

Article template or component examples — replace.

[FIG 03] ARTICLE / SECTION UI

Interaction Design

Interaction work focused on states that matter in a news context: hover/focus for links and cards, expandable sections if any, sticky or persistent elements for long articles, and clear feedback when content loads or updates. (Add specifics: menus, carousels, live or blog layouts, comments—whatever you shipped.)

Editorial & Workflow

As Web Editor, part of the job is bridging design and the newsroom: templates that reporters can use correctly, naming conventions for categories, and training so student staff do not fight the CMS. (Name your CMS—WordPress, SNO, custom, etc.—and how constraints shaped UI.)

Outcomes & Reflection

Add quantitative or qualitative outcomes if you have them: analytics, survey, newsroom feedback, awards. This project sits at the intersection of UI, interaction, information architecture, editorial/content design, and accessibility for a public-facing university publication—useful angles to emphasize in interviews depending on the role.

  • UI / visual design — hierarchy, grids, components, brand within university guidelines
  • Interaction design — behavior, motion (if any), feedback, responsive patterns
  • Information architecture — navigation, taxonomy, findability
  • Editorial UX — story formats, labels, urgency, readability
  • Accessibility — inclusive defaults for a broad campus audience
  • Collaboration — editors, photographers, advisors; iterative rollout with a student team