Overview

The project aimed to redesign the BYU Dining Services website to enhance its visual appeal and promotional visibility, resulting in a modern, engaging design that improved stakeholder satisfaction and user engagement.

ROLE: Lead Designer

TIMELINE: Fall 2023 – Spring 2024 (Ongoing)

Dining Services
Home Page

BYU Dining Services

April 2024

Tools Used

Before

Problem & Goal

BYU's dining website was outdated and failed to showcase campus promotions effectively.

Goal: Create a visually engaging hub that highlights all dining locations and ongoing promotions.

Constraints

Stay within BYU brand guidelines (navy/royal blue, established fonts)
Work within CMS limitations (Brightspot)
Design for easy student staff updates
Account for part-time student development team

The
Process

My process generally goes through 5 Phases: Research & Discovery, Planning, Sketching & Wireframing, Prototyping, and Final Design Handoff

Milanote Board - University Home Page Examples_edited.jpg

Research & Discovery

Analyzed 30+ university food service websites to identify opportunities:

Iconography drives user engagement
Interactive maps improve navigation
Strategic brand color usage adds visual interest and hierarchy

Wireframes

Wireframes were essential for testing layout and flow before diving into visual design. I focused on three key areas: making promotions more visible, simplifying navigation, and creating modular content blocks that could be easily updated.

Several iterations happened at this stage based on stakeholder feedback. The initial wireframes were adjusted to make navigation clearer and ensure promotional content got the prominence it needed. This iterative process helped me refine the structure to better serve users while staying aligned with our overall strategy.

Scroll

AFter

Final Design

This project strengthened my fundamentals in typography and visual hierarchy while delivering a modern solution that enhances user experience within brand guidelines.

Hero Section - The promotional carousel features full-width visuals with headline, pre-headline, body copy, and CTA components. Content updates seamlessly through the CMS, adapting to BYU Dining's evolving marketing needs.

Interactive Campus Map - A unified navigation hub addresses the challenge of 560-acre campus wayfinding. Users can click pins or menu items to focus locations, access mobile ordering, or launch device directions.

Modular Layout System - Three layout variations (left, centered, right) create dynamic content flow while maintaining topic separation. This system streamlined future website decisions and development processes using reusable components.

Visual Strategy - High-quality imagery from in-house photographers, BYU stock, and Adobe Stock replaced illustration-heavy approaches. Fixed backgrounds, thumbnails, and strategic overlays elevated visual engagement while preserving brand identity.

The redesign transforms an outdated, visually unappealing site into a vibrant, user-friendly platform that effectively showcases promotions and improves overall engagement.

Scroll

Outcomes

The redesign delivered clearer visual hierarchy, enhanced user engagement, and improved promotional visibility. Stakeholders reported significantly higher satisfaction, with one comparing the result favorably to Apple's website design standards.

Impact

Stakeholders responded positively to the transformation. Leadership appreciated how easy it became to find promotions and navigate the site, with one comparing the final result to Apple's website. The redesign gave BYU Dining a more professional online presence that better reflects the quality of their campus services.