menu
UMSI Engaged Learning Office: Guided Student Resource Mobile Portal
UMSI Engaged Learning Office: Guided Student Resource Mobile Portal
UMSI Engaged Learning Office: Guided Student Resource Mobile Portal
A mobile-first web case study transforming dense student resources into an accessible, stage-based portal built with semantic HTML5 and CSS Grid.
A mobile-first web case study transforming dense student resources into an accessible, stage-based portal built with semantic HTML5 and CSS Grid.
Role: Web Developer & UX Designer
Context: Development course client project for UMSI ELO
Tools: HTML5, CSS3, JavaScript, GitHub Pages, WAVE, Axe, W3C Validator
Role: Web Developer & UX Designer
Context: Development course client project for UMSI ELO
Tools: HTML5, CSS3, JavaScript, GitHub Pages, WAVE, Axe, W3C Validator
The Problem
The Problem
The UMSI Engaged Learning Office (ELO) helps students find hands-on learning experiences, client projects, and community partnerships. However, its existing web resources functioned like a passive repository of links, leading to user confusion:
Passive Link Overhead: Students struggled to identify which resources they needed at different stages of their engaged learning projects.
Dense & Overwhelming Content: Unstructured text made it difficult to scan for actionable steps, worksheets, or templates.
Inconsistent Accessibility: Prior site templates lacked keyboard navigation shortcuts and structured landmark standards required for screen reader users.
The UMSI Engaged Learning Office (ELO) helps students find hands-on learning experiences, client projects, and community partnerships. However, its existing web resources functioned like a passive repository of links, leading to user confusion:
Passive Link Overhead: Students struggled to identify which resources they needed at different stages of their engaged learning projects.
Dense & Overwhelming Content: Unstructured text made it difficult to scan for actionable steps, worksheets, or templates.
Inconsistent Accessibility: Prior site templates lacked keyboard navigation shortcuts and structured landmark standards required for screen reader users.
Research & Structural Planning
Research & Structural Planning
Rather than building a standard, static list of documents, I analyzed student workflows to transform the site into an interactive guided learning resource:
Lifecycle Stage Mapping: Divided the student journey into four project phases: Home/Overview, Preparing for Your Experience, During the Experience, and Ending/Next Steps.
Task-Oriented Content Hierarchy: Organized dense client guidelines into bulleted action steps, comparative tables, and clear call-to-action buttons.
U-M Brand Compliance: Applied official University of Michigan color palettes, accessible high-contrast backgrounds, and clean sans-serif typography.
Rather than building a standard, static list of documents, I analyzed student workflows to transform the site into an interactive guided learning resource:
Lifecycle Stage Mapping: Divided the student journey into four project phases: Home/Overview, Preparing for Your Experience, During the Experience, and Ending/Next Steps.
Task-Oriented Content Hierarchy: Organized dense client guidelines into bulleted action steps, comparative tables, and clear call-to-action buttons.
U-M Brand Compliance: Applied official University of Michigan color palettes, accessible high-contrast backgrounds, and clean sans-serif typography.
Design & Technical Decisions
Design & Technical Decisions
Semantic HTML & Keyboard Navigation:
Structured every page with semantic landmarks (
<header>,<nav>,<main>,<footer>) and a strict<h1>–<h3>heading hierarchy to allow screen reader users to skip through major sections effortlessly.Built a hidden "Skip to Main Content" link as the first focusable element on every page to streamline keyboard-only navigation.
Semantic HTML & Keyboard Navigation:
Structured every page with semantic landmarks (
<header>,<nav>,<main>,<footer>) and a strict<h1>–<h3>heading hierarchy to allow screen reader users to skip through major sections effortlessly.Built a hidden "Skip to Main Content" link as the first focusable element on every page to streamline keyboard-only navigation.
Mobile-First & Responsive Layouts:
Designed default layouts for mobile viewports 375x615 px before scaling up to tablet and desktop screen sizes.
Utilized CSS Grid to format navigation menus into a compact 2x2 grid on mobile screens, saving vertical screen real estate.
Re-engineered resource listings on the During Your Experience page from plain lists into comparative tables detailing each tool's category, name, and operational purpose.
Mobile-First & Responsive Layouts:
Designed default layouts for mobile viewports 375x615 px before scaling up to tablet and desktop screen sizes.
Utilized CSS Grid to format navigation menus into a compact 2x2 grid on mobile screens, saving vertical screen real estate.
Re-engineered resource listings on the During Your Experience page from plain lists into comparative tables detailing each tool's category, name, and operational purpose.
Touch Targets & Media Optimization:
Styled primary action links with rounded corners and generous padding to ensure tap targets met mobile usability guidelines.
Set
max-width: 100%andheight: autoacross all images, embedded YouTube videos, and data tables to prevent horizontal scrolling issues on small screens.Added
@media (prefers-reduced-motion: reduce)rules to respect user motion preferences.
Touch Targets & Media Optimization:
Styled primary action links with rounded corners and generous padding to ensure tap targets met mobile usability guidelines.
Set
max-width: 100%andheight: autoacross all images, embedded YouTube videos, and data tables to prevent horizontal scrolling issues on small screens.Added
@media (prefers-reduced-motion: reduce)rules to respect user motion preferences.
The Results
The Results
The redesigned UMSI Engaged Learning Office portal successfully turned a cluttered set of documents into an accessible, mobile-first guided resource. By organizing tools by project lifecycle stages, styling clear touch targets, and maintaining strict U-M brand guidelines, the new site significantly reduced information friction for undergraduate and graduate students.
The final codebase passed all W3C HTML, WAVE, and Axe accessibility audits with zero core compliance errors, demonstrating how intentional semantic markup and responsive CSS create inclusive digital experiences.
The redesigned UMSI Engaged Learning Office portal successfully turned a cluttered set of documents into an accessible, mobile-first guided resource. By organizing tools by project lifecycle stages, styling clear touch targets, and maintaining strict U-M brand guidelines, the new site significantly reduced information friction for undergraduate and graduate students.
The final codebase passed all W3C HTML, WAVE, and Axe accessibility audits with zero core compliance errors, demonstrating how intentional semantic markup and responsive CSS create inclusive digital experiences.
