Case Study
Ascend Gymnastics Website
Ascend Gymnastics is a South Sound gymnastics center with four separate locations across the region. They needed a website redesign to establish a strong online presence and connect with their users.
Scope: Total Website Redesign and Design System building
Project Type: November 2023 - March 2024
Role: UI & Web Designer
Tools: Pen to Paper Sketches, Figma, Webflow
Ascend's previous website was lacking clear direction and content. This made it hard for users to find information and answer questions they had.
Existing Landing Page
The existing Ascend landing screen left a lot to be desired. It was hard for users to know just what was going on. There was a lack of story being presented as you scrolled and explored the site. Users were left with a lot of questions;
There is very little understanding of who and what Ascend Gymnastics is from the home page as well a subsequent pages. What do they offer? Why should an user choose to go to them rather than other gyms in the local area? Users couldn't find clear answers in a quick manner on the existing site.
Apart from overall clarity to the site, the information that was presented was very little and more often than not missing. As well as most information being from 2022 when updates within the brand had been made. The website did not reflect any current events.
One area that felt this problem the most is the locations. Ascend offers four separate locations each with their own programs, events, and more. But within the existing site users cannot find any information on what the differences are or how to contact each gym.
The other pages on the site showcased the problems felt within the existing landing page
The sessions were out of date and very hard to understand. They were not user friendly to new users. All four locations offer classes to new gymnasts and young kids. Because of this, clear UI is imperative for users and family new to the sport.
The existing contact page was missing the fourth and newest location and felt hard to read and find what you were looking for. There was a large lack of clarity in this page.
Current Sessions Page
Current Contact Page
For the new site, the main concern is to create UI that is clear to users to learn who Ascend Gymnastics is, what they can offer, and why they are the best option for learning gymnastics within the region.
Develop a design system to be used across all site pages, as well as creating clear navigation.
Create easy access location pages that showcase each of the four locations separately.
After understanding what the existing site lacked and what the users needed I could then know what the client hoped to solve with the new site design.
After knowing the new site perimeters, I can go ahead and sketch out lo-fi wireframes before I put too much energy into the digitalization. This allows me to visualize and brainstorm what the final site pages will look like. As well as knowing the final user flow.
Honing in on both the landing page scroll and each location landing page was a top priority to making sure the overall layout, and design system would work well within all other pages in the site.
Discovering what items need to be on the navigation bar and why they need to be there in this sketching a first iteration stage helped to streamline the process in the long run. As I was not trying to figure out how to structure the navigation bars later in the development stage.
Of course wireframing only the landing pages wasn't the only thing to focus on. Figuring out and iterating on all other site pages is important to get bad idea out of the system.
For example, this About page was a very first sketch into what I thought would showcase the entire about in one page including Ascend's mission their story and all the staff. In the final site, this was changed in favor of allowing each gym to showcase their own staff. This is why it is beneficial to sketch, and sketch, and sketch!
The landing page is the first thing users see when accessing Ascend's website. The new page now tells a story and walks users through everything they need to know about without the need to click around.
Users now get a small taste of who Ascend gymnastics is, what they offer, and their own story. With the option to click into pages for a deeper understanding.
This new landing page flow allows for promotional material to be added in a rotated as new content occurs.
By creating a streamlined flow with clear UI this allows for more click through rates into other pages. Allowing for Ascend to gain more clients at each of their locations.
Similar to the main Ascend landing page, it was important to create a separate landing page for each gym location. As each location has their own programs, events, staff, contact, etc.
The best way to approach this issue was to think about each location as it's own site while still utilizing the overall branding and design system. This way, Ascend's website could showcase each location without needing four seperate sites.
Some ways I was able to capitalize on this site within a site idea was:
By creating a nav bar that only shows up when an user is within a specific location it allows for users to not be overwhelmed with text when first encountering the site.
It didn't make sense to show users tabs for "programs", "Staff", etc. until they are within the specific location. Having a secondary navigation bar solves this.
Just like the main landing page, it was imperative to create a story when scrolling down the page.
This is because once users go into each location, they now have much more they can click on. This can become overwhelming. To solve this creating easy to see visuals and including most used components such as a contact card allows for users to navigate the site with confidence.
Because the Ascend website will continue to be updated as new events and camps happen each year or as the staff changes having a UI Kit and overall design system will help streamline future development on the site.
I built this design system out by using existing branding while adding new colors and typography that complements the branding. You can see the full Design system here.
The biggest challenge I encountered with this project was figuring out how to manage so many pages without having users make too many clicks.
By treating each location as it's own website I was able to focus on telling a story to gain more clients and inform users about the core philosophies of Ascend Gymnastics.
As the website is it's own living thing, I will need to continue maintenance to keep pages and information up to date. Having a design system will allow updates to be a breeze.
