Setting the Stage
The Problem
Imagine that you run a boxing gym and are trying to build a website for it.
Your gym offers 8 different classes and a few different membership programs.
How do you convey the all the right information to new members without making your website a cluttered wall of text?
How do you capture people's interest for long enough to book a class?
The Goal
Redesign the gym website in a way that better organizes class information and is more visually appealing to the user.
Information Architecture
Utilizing Sitemaps to Better Organize Information
I created a sitemap for the original website and reflected on what pieces could be grouped together, and then another sitemap for what the redesign might look like.
The sitemap helped me decide to move the "Kids Classes" section into the "What We Offer" page, and condense a few different pages into the "About Us" section.
Next, let's take a look at how I used the sitemap to redesign the main pages of the website.
Before and After the Redesign
The "What We Offer" Page
The new "What We Offer" page features interactive tiles.
Hovering over a tile reveals a brief class summary, and clicking sends users to a page with more class details.
This enables users to preview important class details without forcing them to click into each class details page, like how the original version does.
The Home Page
Based on my initial user research, the goal of most website visitors is to book a boxing class; thus, I prioritized the class scheduler, making it the centerpiece of the home page for visitors' ease of use.
I also included the four most popular classes and a brief description of each one, a section for customer reviews, and a few friendly and attention-grabbing banners that encourage the user to book a class.
The Schedule Page
The improved Schedule page positions the weekly schedule of classes at the top of the page for easy access, unlike the original version in which users had to scroll down to find the scheduler.
It also features a toggle that displays past classes when switched off. The previous version prevented users from seeing past classes.
I also redesigned this page to be more visually engaging by including colors that denote the most important interactive features of the scheduler.
Next, let's take a look at some visual design elements I used to improve the redesign's appearance and convey certain feelings and ideas in the redesign.
Visual Design Elements
Colors
I used orange and green as key colors in the redesign to reflect the gym's proud Irish heritage.
I also made sure to utilize high contrast color combinations for accessibility per WCAG standards.
Clear, readable fonts were chosen, and a document for alt text was created for all images.
Typefaces
I selected typefaces like Saira and Saira Condensed for their blocky and rectangular silhouettes, balancing playfulness and strength to suit the sporty nature of the boxing gym.
Buttons
Call-to-action buttons feature arrow patterns to encourage user engagement and to convey energy and excitement.
Shapes
Slanted shapes are used throughout the redesign to convey motion and action, while contributing to higher visual interest.
Banners
I included colorful and attention-grabbing banners across the website to prompt users to take action.
.png)
