← All Posts

Designing the Home Page Experience

Quick Summary

Main focus: designing and building the new homepage for the Gliding Stars website, focusing on storytelling, visual energy, mobile responsiveness, and creating a much clearer first impression for families, volunteers, and community members.

Building the Most Important Page

After finishing the foundational framework of the website, the next major step was building the homepage.

And honestly, the homepage felt like the most important page on the entire site.

This is the page that introduces people to Gliding Stars for the very first time.

It needs to:

  • explain the organization clearly
  • create an emotional connection
  • guide people where they need to go
  • and visually reflect the excitement and warmth of the program itself

One of the biggest problems with the old homepage was that it felt emotionally flat.

It technically contained information, but it did not feel like Gliding Stars.

After spending months around the organization, I knew immediately that I wanted the new homepage to capture:

  • movement
  • excitement
  • joy
  • music
  • skating
  • volunteers
  • and community

right away.

Replacing the Static Ice Background

The very first major change I made was replacing the old generic ice background image with a full video hero section.

Because by this point in the internship, I had already gathered a huge amount of high-quality video footage from:

  • Monday night practices
  • rehearsals
  • setup
  • the spring show
  • and the banquet

And honestly, video communicates the energy of Gliding Stars far better than a static image ever could.

The homepage now immediately opens with:

  • moving footage of the skaters
  • volunteers helping on the ice
  • smiling faces
  • lighting from the show
  • and moments of excitement and celebration

The goal was to instantly give visitors a glimpse of what the organization actually feels like in person.

The Gliding Stars logo is still prominently featured in the hero section, along with the organization’s motto:

“I can do it! I can skate!”

I also added a much shorter supporting tagline underneath it:

“Building confidence, independence, and community on the ice.”

That line felt important because it quickly communicates the emotional and practical purpose of the organization without overwhelming visitors with too much text immediately.

Making the Homepage Feel Structured

Another issue with the previous homepage was that information felt randomly stacked together without much hierarchy or intentional structure.

So one of my biggest goals was making the page feel:

  • cleaner
  • easier to scan
  • more visually balanced
  • and more inviting

Immediately below the hero section, I created a highlighted mission statement area featuring a star icon above the text.

The section reads:

“Gliding Stars of Erie is an adaptive ice skating program that helps individuals with disabilities grow physically, socially, and emotionally through the sport of ice-skating.”

I intentionally kept this section short and easy to read.

One thing I kept reminding myself throughout development was: people do not read websites word-for-word the way they read essays.

They scan.

Especially on mobile devices.

So information needed to feel digestible and visually separated.

Improving the Three Main Information Sections

One thing I actually liked from the old homepage was the idea of having three featured information sections.

Three-column layouts work really nicely because:

  • they stack naturally on mobile
  • feel balanced on desktop
  • and allow information to be separated clearly

The problem on the old site was not the concept itself.

The problem was the execution.

Previously:

  • one section did not even include an image
  • two sections were heavily redundant
  • text blocks were too long
  • and everything was center-aligned in difficult-to-read ways

So I rebuilt the entire section from scratch.

Each featured section now includes:

  • a high-quality matching image
  • a clear heading
  • a short readable description
  • and a clear call-to-action button

The three homepage sections became:

About Us

Learn the history behind the Gliding Stars of Erie organization, who we are today, and how we help handicapable individuals.

Button: Learn More

Our Program

See how the season is structured and find current schedules, updates, and photo galleries of our Stars.

Button: View Schedule

Get Involved

Join as a skater, volunteer, or supporter and become part of the Gliding Stars family.

Button: Join Us

This section immediately felt dramatically cleaner and more welcoming than the original site.

More importantly, it actually guides users somewhere useful instead of forcing them to hunt around the site trying to figure out where information lives.

Featuring Emma & Dan’s Journey

Another feature I added to the homepage was a highlighted section for Emma and Dan Perritano’s fundraising journey supporting Gliding Stars.

One thing I wanted the new website to support was the ability to feature current events or special initiatives dynamically without redesigning the entire page every time.

So I built this section in a way that can easily be enabled or disabled directly through the site’s markdown content files.

Visually, I made the section stand out by using:

  • a slightly different blue background
  • white text
  • a featured image
  • and a stronger visual emphasis

The section includes information about:

  • Emma and Dan’s long-distance walking journey
  • Emma’s disability story
  • Dan’s background with adaptive athletics
  • and their upcoming walk across Ohio benefiting Gliding Stars

It also ends with a direct donation call-to-action.

I liked this section because it immediately demonstrates:

  • community involvement
  • local connection
  • storytelling
  • and active fundraising efforts

instead of making the homepage feel static.

Making the Ice Show Feel Important

Another thing I absolutely wanted to improve from the old homepage was how the annual show was presented.

Previously, the homepage basically just had a random embedded YouTube video dropped onto the page with almost no context.

And after experiencing the show myself, I knew that was underselling one of the most important parts of the entire organization.

So instead of simply embedding a video by itself, I created a dedicated section introducing the show first.

The section reads:

“Each season builds toward a final performance where every skater has the opportunity to shine. It’s a moment of confidence, pride, and celebration for skaters and families alike.”

Then underneath that:

“View our 2025 show recording below for a taste of what it’s like to see our Stars shine!”

Only after that introduction does the embedded show video appear.

That small amount of context completely changes how visitors emotionally understand the video before watching it.

Constantly Designing for Mobile

One thing that remained consistent throughout every part of the homepage build was constantly checking both desktop and mobile layouts side-by-side.

I repeatedly tested:

  • text spacing
  • image scaling
  • video sizing
  • menu layouts
  • button spacing
  • and readability

because the old website’s mobile experience was one of its biggest weaknesses.

Cleaner is almost always better.

That became one of my biggest design philosophies throughout the rebuild.

I also tried to build as many repeatable layout systems as possible so future pages could maintain:

  • consistency
  • flexibility
  • and easier long-term maintenance

without every page needing to be completely custom-built from scratch.

Reflection

This week honestly felt like the first time the new website started feeling real instead of just structural.

The homepage is where the organization’s personality really begins to show.

And after spending so much time with Gliding Stars in person, I wanted the homepage to immediately communicate:

  • joy
  • movement
  • confidence
  • warmth
  • and community

instead of feeling cold or outdated.

Compared to the original homepage, the new version feels:

  • more modern
  • more organized
  • easier to navigate
  • more emotional
  • and much more reflective of the actual organization

And honestly, seeing the footage, branding, and structure all finally working together was really exciting after spending so many weeks imagining it.

Next Steps

  • Begin building the About Us page
  • Organize and integrate historical information about the organization
  • Continue refining reusable page layouts and styling systems
  • Optimize additional sections for mobile responsiveness
  • Continue integrating media captured throughout the internship into the site