The SWEM School
The Swem School teaches swimming for students of all ages, from infancy to adulthood, and believes that anyone can benefit from swimming. They’re located in Atlanta, GA, and have a very powerful mission that focuses on community and drowning prevention.
Overview
Trish P. Miller, CEO of The Swem School, needed help redesigning her businesses website to make it more user friendly. Trish Miller is an entrepreneur and community activist who learned to swim as an adult after her own near drowning experience as a teenager. That experience inspired her to be an advocate for community-based drowning prevention programs.
Challenge
After talking with Trish we identified a number of challenges associated with her website. One of her main concerns was the fact that she was continually receiving repeat questions through phone calls and emails. The current Swem School site (formally known as Atlanta Swim School) also felt disassociated from Trish and her other brands. Trish has three businesses:
Our challenge was to redesign Trish’s Swem School website so that it reflects her mission of empowering people in the water, creates a more cohesive umbrella brand for her many businesses, and improve user experience by providing better access to relevant information and an easier time signing up for swim classes. The original Atlanta Swim School site was lacking in design, informational hierarchy, and was extremely text heavy.
Original Site
Homepage
About Us
Classes
Blog
Our high level goals were to:
- Create an impactful site that feels professional and immediately conveys its message on the homepage.
- Introduce Trish, her excellent team, and the Swem School mission to users right away.
- Figure out a better flow for the user so that they understand the pricing and how to easily find the perfect swimming class for their needs.
- Organize information to help users navigate the site and answer their most frequently asked questions.
The Swem School offers lessons for students of all ages, from infancy to adulthood, and believes that anyone, at any age can benefit from swimming.
A nonprofit school-based program that teaches children introductory swimming lessons and water safety skills as a part of their school's curriculum.
A product based company that developed the first ever fully water-proof swim cap that is designed to keep hair dry and provide swimmers the freedom in the water.
Original Site
Homepage
Homepage hero image and text are lackluster and don't convey swimming school.
Remaining Homepage is non-relevant information for the user with no clear flow of how to sign-up.
About Us
About Us page has no imagery related to The Swem School. Images feel more like a vacation site.
No mention of Trish's other organizations and no visual language related to her mission of drowning prevention.
Classes
Lessons are not presented clearly and pricing is too complex.
Not clear the exact locations of the pools.
Classes page is text heavy with very little informational hierarchy.
Swim Stories
No additional media for The Swem School even though it exists online.
Swim Stores blog posts take up too much space and aren't visually appealing.
Our high level goals were to:
- Create an impactful site that feels professional and immediately conveys its message on the homepage.
- Introduce Trish, her excellent team, and the Swem School mission to users right away.
- Figure out a better flow for the user so that they understand the pricing and how to easily find the perfect swimming class for their needs.
- Organize information to help users navigate the site and answer their most frequently asked questions.
My Role
I led the UX design team throughout the project between June 2021 and December 2021 to successfully design, develop, and launch the Swem School website. Our team consisted of 3 UX designers (including myself) while working on the project with Trish through General Assembly. After graduating from General Assembly, Trish hired me and one other designer from our group to take our prototype version of her site — that we made in Figma — and convert it into a full site via Webflow.
Kickoff
The outset of the project began with us creating a research plan to properly analyze and gather information from the original Atlanta Swim School (currently known as The Swem School) site so that we could pinpoint exact user problems and address the challenges that we had assessed earlier. To do this we prepared user interview questions and created challenges for the users that we felt best represented what we believed to be an easy approach for a customer who would either sign themselves or their children up for swim classes.
Classes Page User Tasks
- Show me how you would find beginner courses on Sundays at 11:00am-12:00pm and what the total price of enrollment + cost of monthly subscription would be.
- Show me how you would locate adult private lessons on Saturday for 30 minutes, determine the cost, and know who will be teaching the class.
- You’re curious where Atlantic Swim School’s pool is located, show me where you would go to find that information.
We conducted 6 user interviews and from those interviews we were able to deduce that users had a particularly hard time navigating and obtaining information from the Classes page. The Classes page held most of the vital information for the site which included: class descriptions, registration fees, contact information, locations, pricing, scheduling, and payment options. We created a list of pain points to identify what wasn’t working in the Classes page.
Pain points with classes page:
Classes Page User Tasks
.png)
Hover & scroll to see full page
- Show me how you would find beginner courses on Sundays at 11:00am-12:00pm and what the total price of enrollment + cost of monthly subscription would be.
- Show me how you would locate adult private lessons on Saturday for 30 minutes, determine the cost, and know who will be teaching the class.
- You’re curious where Atlantic Swim School’s pool is located, show me where you would go to find that information.
We conducted 6 user interviews and from those interviews we were able to deduce that users had a particularly hard time navigating and obtaining information from the Classes page. The Classes page held most of the vital information for the site which included: class descriptions, registration fees, contact information, locations, pricing, scheduling, and payment options. We created a list of pain points to identify what wasn’t working in the Classes page.
Pain points with classes page:
.jpg)
- Users had a hard time navigating the site when asked to find a certain class time and sign up on a particular day.
- When it came to swimming classes, users had a hard time understanding exactly what they were paying for, how long they needed to pay, and what that payment included.
- Users complained about blocks of obfuscating information that overwhelmed them and made them feel like they had to work extra hard to figure out what they believed to be straight-forward information.
- Users also had a hard time with the dense scheduling system, as it had no filter and it’s own side scroll bar that was separate from the main scroll bar which made it harder for users to find specific classes.
- Users had a hard time getting to the correct information for certain demographics i.e. Adult classes and Toddler classes.
- Only 16% of users were able to complete the challenges that we proposed when it came to signing up for a particular class within their price range and given date.
- Users felt annoyed that they had to scroll to the bottom of page just to see the payment options.
We quickly realized that besides the obvious aesthetic issues with the site, reorganizing the Classes page would need to be a huge priority in making sure that this project was successful. Instead of there being a large river of information that existed on the Classes page to promote user engagement in signing up for swimming classes, we needed to divide that information and create user flows that would allow the user to effectively return back to the main schedule page once they've gained relevant information and are ready to sign up for classes. To figure out the most effective way of restructuring the site to allow the user to do this, we had to continue gathering information from our user interviews, user surveys, and competitive analysis.
Research & Discovery
During our user interviews we asked the users a series of questions in relation to a time when they signed themselves up or a child up for some kind of lessons/classes. We also asked users about the most important factors that went into them choosing classes from an organization and their most common frustrations when dealing with signing up for classes. Our group then compiled all of our users answers into an affinity map to help us get a clearer understanding of the common themes that users experienced and expected when successfully signing up for classes.
Affinity Mapping
From our affinity map we found these themes and quotes to be extremely relevant to our users decision-making and would go on to influence the development of our personas:
I want to easily understand what I am paying for.
"The biggest factors were price so I didn't have to overpay."
”I felt that this was a teacher that I could connect with on a deeper level. So I felt like I was struggling with somebody who appealed to me personally.”
”The instructor gave us the schedule so we could coordinate with ours because we have work.”
Connecting with the instructor is important to me.
Scheduling is a main priority for me.
Along with the user interviews we also posted an online survey to get more feedback to help us determine what users prioritized most when registering for classes online. From our online survey we received 14 submissions and discovered some considerable results that continued to help us understand the users thought process when making a committed to a particular organizations classes. Here are the results from that survey:
85%
Of users agreed that they are deterred from using a website if the sign up process is difficult or confusing.
78%
Of users do extra online research to learn more about an organizations reputation before signing up.
64%
Of users want to know more about their instructors before registering.
57%
Of users felt the organization’s mission influences their decision to signup.
User Priorities When Signing Up for Lessons Online:
1st Priority
Location, Reviews, Pricing, and Success Rate all play an equal part in what users look for as their 1st priority when signing up for classes.
2nd Priority
Scheduling becomes a prevailing force when it comes to users 2nd priority. Pricing is also a large motivator.
3rd Priority
Pricing and Location are the significant factors for the users 3rd priority. Success Rate, Reviews, and Scheduling become less significant.
- The largest factor by far for users when signing up for classes is pricing. This corresponds with our affinity map and user tasks as a large user group wanted to easily understand what they were paying for; user tasks indicated that the majority of users were apprehensive of the Swem School’s pricing structure. This evidence is further backed up by our clients complaint that she was receiving repeat questions in regards to pricing and other fundamental aspects of her business.
- Location is always going to be on the users mind and there must be a section on the site where locations are present and users should be able to select their classes based on location.
- Users rely heavily on reviews and success rate as a predetermining factor when finding the perfect lessons for their needs. The site should therefore have testimonials and a strong online presence that exudes professionalism.
- Scheduling is the glue that holds everything together; with the largest percentage in a single chart out of any other priorities, scheduling is a guaranteed next step once users have determined that the location, reviews, pricing, and success rate is right for them. Users will expect a comprehensive scheduling system that allows them to easily choose the class, time, instructor, and location that is right for them. This evidence is backed up by the fact that 85% of users say that they are deterred from using a site that has a difficult scheduling system; user tasks also convey that the scheduling system was too dense and long to scroll through. The Swem School scheduling system must then be updated to include a filter that will allow users to find the class that’s right for them without the hassle of trying to dig through countless information.
- The mission must be clear and concise. The Swem School’s mission is what separates itself from other Swim Schools in the Atlanta area. Users have responded positively to the idea that they would be more motivated to sign up for an organization that had a compelling mission versus an organization with no mission at all.
Competitive Analysis:
For our research we conducted a competitive analysis so that we could compare key features from other popular swim sites. We found this to be a helpful tool for determining what features and pages we would need to include in the updated Swem School site. Here are the swimming school brands that we focused on — some are franchisees while others are local swim school based in Atlanta, GA:
From our competitive checklist we compared features/pages from other swim school competitors versus The Swem School. We found that Swem School competitors far exceeded the Swem School in informational architecture.
Competitive Sites Features:
- We observed two key feature that we saw present across many of The Swem Schools competitors; one feature was the presence of testimonials on their homepage and the other feature was call to action buttons. The current Swem School website possessed none of those features.
- Pricing charts were ubiquitous on The Swem Schools competitors sites, as they allowed users to easily breakdown important information that would be essential for them to understand when determining to sign up for a month long program.
- Competitors of The Swem School used dropdown menus for their navigation menu to help users effectively navigate their sites. We noticed that the About section in particular hosted a lot of information that informed users about their schools mission, FAQ, and blog. Competitors also used a good amount of graphics to make the site fun and visually appealing.
- Having swim instructor bio's and a team member page was another important element that we observed on The Swem School's competitors sites. This corresponded with our research that users want to see who will be teaching them before signing up for classes.
- During our competitive analysis we discovered that The Swem School was lacking in key features that other swim school sites were using to enhance their user experience.
- Those key features included dropdown menus, CTA, graphics, pricing charts, testimonials, team member page, team member bios, contact page, and FAQ.
- Our focus would now be to figure out what features we wanted to implement into the updated Swem School site so that they correspond with our user research and maximize user efficiency.
Define
Now that we had completed comprehensive research for the project we were ready to begin defining the sites problems and crafting solutions. To do this we needed to figure out which features we wanted to include, create a thorough site map, make user personas, and create examples of task flows. We started with the problem of figuring out which features would best fit into the overall scope of the site, our goal was to focus on features that proved to be high impact and high reward — meaning that we could accomplish them within our given timeframe and they would be essential to the user experience of the site. To do this we created a cartesian plot that would allow us to categorize which features we would include and exclude.
Cartesian Plot
In our cartesian plot we identified these features to be high impact/low effort: schedule link in the navigational bar, location info, testimonial section, about dropdown, book now CTA, and team member bios. We also identified features that were high impact/high effort which we knew we would need to spend more time on and plan around: team members page, pricing page, landing page, calendar page. Then we identified medium impact/low-medium effort:
a swim curriculum, FAQ.
a swim curriculum, FAQ.
Sitemap
To begin synthesizing our research we created a sitemap so we could have clear, functional, and grounded informational architecture guiding us to better structure the new Swem School site. The top part of the site map consists of a top navigational bar that would direct users to our clients other organizations. From there we have the Homepage and the main navigational bar which will have drop-downs to better direct the user to pertinent information and that was discovered in our research. We also took the overload of information from the former Classes page and broke it up into multiple pages that would be more digestible and user friendly. This sitemap acts as a road map for putting our research into action and clearly defining what needs to be done to successfully develop the site.
Persona: Dani Hill (Newbie)
"For so long I’ve been afraid of the water. So you won’t see me jumping into a pool with just anyone. I think what I’m looking for most is an instructor with some pool experience. I need to be able to see who I am going to be depending on in the water. There needs to be some sort of info on the instructors. Seeing credentials help ease the fear. I want to get to know the instructors so I can find the right instructor for me."
Bio
Dani wants to learn how to swim, but is afraid of the water. She is hesitant to take swim classes from just anyone. She wants a way to see all the possible instructors before deciding to enroll in a swim class. She is a fan of reading through the bios and likes it when the instructors credentials are listed. Her fear is having an instructor who is not patient with her and that it may be too late for someone as old as she is to learn how to swim.
Needs
- Find a close location.
- An instructor that will be patient.
- A detailed description of the instructors.
- Credentials listed if any.
Pain Points
- Websites that she has visited seem to all be geared towards children.
- Feels it may be too late to learn how to swim.
- Fears the instructor will not be patient with her.
Goals
- Overcome her fear of the water.
- Sort through the catalog of teachers to find the right swim instructor.
- Learn how to be safe in the water.
- Gather enough information about the swim school to get rid of any first day jitters.
Persona: Simone Shields (Parent)
"I never learned how to swim as a child. It wasn’t until a near death experience, in my mid twenties, I finally made it a priority to learn to swim. I don’t want that for my kids. I am signing them up as soon as they can crawl. I’ll be there with them every step of the way until they are swimming like sharks. What I am looking for most is a school with a strong mission statement. I want to know for a fact that my babies are surrounded by people who understand the importance of water safety. "
Bio
Simone is a wife and mother of two. The most important decision she has to make is where to send her children to learn how to swim. After a near-death experience in the water, she made a vow to her family she would have her kids learn proper water safety. She is looking for a school with a strong mission statement and proof the school has a strong mission.
Needs
- Good reviews/referrals on the swim instructors and organization
- A swimming school that connects with drowning prevention and water safety.
- A swimming school that has a simplified sign-up and calendar system.
- Affordable price for lessons.
Pain Points
- Finding lessons for her kids which fit around her work schedule.
- Feeling comfortable enough to leave her kids somewhere new in the water.
Goals
- For her kids to feel safe in the water, which will make her feel more secure as a parent.
- To find a trustworthy place to give her kids swim lessons.
Problem Statements:
Dani has never swam before and is interested in taking swim lessons. She needs a better way to find a trustworthy and credible swim instructor because she is afraid of swimming.
Simone is struggling to find a swim school for her kids. She needs a better way to navigate through different mission statements, class schedule pages in order to find the best swim school to enroll her children.
Solution Statements:
Dani is able to look at the Swem School curriculum and see that they have adult beginner classes. She also can read instructor bios to better determine who she feels most comfortable with.
Simone is able to see testimonials on the Swem School homepage and the schools commitment to water safety. She also has a good understanding of how pricing works due to the new pricing charts and is able to easily book swim lessons that fit into her busy schedule.
User Flows
Our user flows will demonstrate how the Swem School lets our users feel welcomed to learn how to swim by having credible instructors and a wide-range of different classes so that swimmers can learn a life-saving skill.
Dani
Simone
Home
Home
Select About Us
Select About Us
About Us
About Us
Select Benefits of Swimming
Select Our Mission
Benefits of Swimming
Our Mission
Select Lessons
Wants to learn about different lessons
Adult Lessons
Youth Lessons
Find out more
Wants to learn about lessons for kids
Adult Curriculum
Youth Curriculum
Select swim lesson
Wants to see how much lessons will cost
Schedule
Pricing
Notices instructor views team members
Finds classes that fit her schedule
Meet the Team
Schedule
Finds instructor and wants to learn more
Signs up for classes
Team Member Bio
Register
Finds the right class
Register
.jpg)
Awarness (Dani)
Dani starts out at the bottom of the user happiness meter as she wants to overcome her fear of swimming, but hasn't found the right swimming school for her. Her happiness slightly rises as she attempts to search for swimming schools, but all she can find are schools that cater towards kids which disheartens her as an adult and makes her feel unsure that she'll find the right program for her needs.
Consideration (Dani)
Dani discovers The Swem School through online research and is immediately impressed upon visiting their site. She reads the Swem Schools testimonials and see's that they do offer adult classes which raises her user happiness. She then starts to wonder how might she benefit from swimming as an adult and her happiness dips as she's reminded of the fact that she cannot swim.
Acquisition (Dani)
Dani goes to the Swim Curriculum page and finds the section for Adult Lessons, she reads how the Swem School believes that it's never too late to learn how to swim. As she learns about the curriculum she also learns that the Swem School offers private lessons, which makes her user happiness go up as she prefers private lessons over group lessons when learning something new and challenging.
Service (Dani)
Dani visits the team members page to get familiar with the instructors and possibly sign up for one of their private classes. As she views the instructors photos she's interested to learn more about Ezra, so she clicks on his photo and is able to read his bio. Dani's user happiness continues to increase as she connects with Ezras bio and feels comfortable with the possibility of him teaching her how to swim. Dani then visits the pricing page and understands the pricing model — though she believes it to be a bit expensive she also believes that this is the right swimming school for her and trusts the Swem School based on her experience with their site thus far. Dani is then able to choose her pricing plan and find the right classes with Ezra with the new schedule filter and user friendly design.
Loyalty (Dani)
Dani has a great first lesson with Ezra at the Swem School and tells her friends and family how great of a program it is. Dani then leaves a highly-rated review for the Swem School online and her user happiness is at an all time high. The site was able to take her on a successful journey to finally take a leap in learning how to swim while also feeling confident in doing so.
- Dani starts out at the bottom of the user happiness meter as she wants to overcome her fear of swimming, but hasn't found the right swimming school for her. Her happiness slightly rises as she attempts to search for swimming schools, but all she can find are schools that cater towards kids which disheartens her as an adult and makes her feel unsure that she'll find the right program for her needs.
- Dani discovers The Swem School through online research and is immediately impressed upon visiting their site. She reads the Swem Schools testimonials and see's that they do offer adult classes which raises her user happiness. She then starts to wonder how might she benefit from swimming as an adult and her happiness dips as she's reminded of the fact that she cannot swim.
- Dani goes to the Swim Curriculum page and finds the section for Adult Lessons, she reads how the Swem School believes that it's never too late to learn how to swim. As she learns about the curriculum she also learns that the Swem School offers private lessons, which makes her user happiness go up as she prefers private lessons over group lessons when learning something new and challenging.
- Dani visits the team members page to get familiar with the instructors and possibly sign up for one of their private classes. As she views the instructors photos she's interested to learn more about Ezra, so she clicks on his photo and is able to read his bio. Dani's user happiness continues to increase as she connects with Ezras bio and feels comfortable with the possibility of him teaching her how to swim. Dani then visits the pricing page and understands the pricing model — though she believes it to be a bit expensive she also believes that this is the right swimming school for her and trusts the Swem School based on her experience with their site thus far. Dani is then able to choose her pricing plan and find the right classes with Ezra with the new schedule filter and user friendly design.
- Dani has a great first lesson with Ezra at the Swem School and tells her friends and family how great of a program it is. Dani then leaves a highly-rated review for the Swem School online and her user happiness is at an all time high. The site was able to take her on a successful journey to finally take a leap in learning how to swim while also feeling confident in doing so.
- Simone starts out at the medium level of the user happiness scale, as she's been planning for her kids to learn how to swim when they came of age and is ready to research potential swim schools. As Simone researches nearby swim schools she feels
- Dani starts out at the bottom of the user happiness meter as she wants to overcome her fear of swimming, but hasn't found the right swimming school for her. As she attempts to search for swimming schools, all she can find are schools that cater towards kids which disheartens her as
- Dani starts out at the bottom of the user happiness meter as she wants to overcome her fear of swimming, but hasn't found the right swimming school for her. As she attempts to search for swimming schools, all she can find are schools that cater towards kids which disheartens her as
- Dani starts out at the bottom of the user happiness meter as she wants to overcome her fear of swimming, but hasn't found the right swimming school for her. As she attempts to search for swimming schools, all she can find are schools that cater towards kids which disheartens her as
- Dani has a great first lesson with Ezra at the Swem School and tells her friends and family how great of a program it is. Dani then leaves a highly-rated review for the Swem School online and her user happiness is at an all time high. The site was able to take her on a successful journey to finally take a leap in learning how to swim while also feeling confident in doing so.
Awarness (Simone)
Simone starts out at the medium level of the user happiness scale, as she's been planning for her kids to learn how to swim when they came of age and is ready to research potential swim schools. As Simone researches nearby swim schools she feels less certain about finding a school that is community based and will provide her kids with valuable life-skills that she wants them to learn. Simones user happiness drops to the bottom of the scale as she also has a hard time finding a school that will fit her specific schedule and wants to be able to chose her own times online.
Consideration (Simone)
Simone is referred to the Swem School via word of mouth by a friend and visits their website. Simone instantly connects with the Swem Schools mission and likes that they focus on community-based swimming. Simone then visits the Swem Schools Our Story page and learns about Trish and her near death drowning experience which inspired her to become an activist in the water. Simones user happiness continues to rise as she resonates with the Swem Schools story and is able to easily navigate the scheduling page.
Acquisition (Simone)
Simone feels confident that she can sign her kids up for classes that fit her schedule. Simone visits the Pricing page and notices that the school offers a discount for siblings, she's very pleased by this and Simone then proceeds to sign her kids up for their first swim lessons in the same group. Simones user happiness dips a little as she now has high expectations for these swim classes and wants her kids to enjoy learning to swim as much as she does.
Service (Simone)
Simone takes her kids to their first swim lesson and they have an amazing time. Simone sees how passionate the Swem School instructors are about teaching students and she feels assured in her decision to go with the Swem School for her kids swimming future.
Loyalty (Simone)
Simone continues to take her kids to the Swem School and tells all of her friends and other parents about the program. Simone posts photos of her kids enjoying the pool and spreads the word of the Swem School through social media as well.
- By synthesizing our research we were able to focus on medium-high impact features, our team was able to prioritize what would benefit the users most when designing the site.
- Our sitemap gave us a blueprint for how users would navigate the site efficiently. This allowed us to create successful task flows for our personas with accurate problem and solution statements.
- Journey flows put into perspective the dilemmas that users would face in similar situations. This gave us an accurate prediction to how users would respond to the sites design and how to better improve it to match our research.
Ideation & Design
To start off our ideation stage our group consulted our mood-board with ideas and inspirations that we had been accumulating throughout the project. We wanted to make sure that our designs reflected our research and addressed our personas problems as well as their user journeys.It was important that our designs be cohesive so we began by performing a series of crazy eight sketches where we went through each page on our site map and sketched out distinct ideas that we had for the site. We then selected our favorite ideas from the sketches and began to wireframe them in Figma, we focused on designing for desktop since we didn't know if we'd have enough time to make the site responsive.
Moodboard
Low-fidelity Wireframes
To make sure that our group was on the same page when designing we created universal elements that could be applied throughout the different pages for the site. This help us tremendously, as we figured out our formatting and component pieces that would allow us to create a high functioning prototype in Figma.
Universal Elements
Homepage
We started with the homepage which we believed would take the longest and contain the most content. We focused on designing the homepage in sections so that we could apply what we discovered in our research sequentially to the user.
We made a top navigation bar with all the brands that are part of Trish’s organization. The user would now be able to navigate between Trish’s different brands which brings brand consistency to Trish's organizations. We also wanted to have text that is powerful, purposeful, and impactful that relates to the Swem Schools mission. We made sure to include a CTA underneath the hero text.
The "Our Process” is the introduction to the Swem Schools mission and introduces the user to the organization. The “How to Get Started” section is meant to show the user different classes that the Swem School offers, as well as a simple sequence breaking down how to enroll into the program.
The “Why Atlanta Swim School” section is telling the user why they should chose The Swem School over other traditional swim schools. From our research we found these three categories to be the most unique and important to the Swem School.
The “What Swimmers Say” testimonial section is a huge part of what we uncovered in our research the users look for when making decisions in signing up for classes. Users want to see testimonials on the site and know what other customers say about the program.
At the end we have the Swem School newsletter that the user can sign up for.
About Us
The About Us section was our most populated group of pages on our sitemap and held a lot of important information for users. Our goal was to make sure that these pages were simple and concrete so that users could easily obtain the information that they were looking for.
The “Policies” page now has important info —i.e. class info and payment policies — that use to exist on the "Classes" page.
The “Swim Stories” page received an update to contain more stories per row and better informational heirarchy.
The “Our mission” page needs to include the story of the Swem School and imagery of swimmers and instructors at the school enjoying themselves.
The “FAQ” page now has accordion style dropdowns that will allow the user to find the question that they are looking for easily and quickly.
The “Benefits of Swimming” page will provide important statistical evidence for why anyone at any age should learn how to swim.
Contact Us
The Contact Us section will allow users to directly message Trish and her employees with any questions and provide contact information for her organization.
The “Contact Us” page provides a contact form for users to fill out and a hero image in the background.
Pricing
We updated the pricing page to make it as clear cut as possible. Our goal was to make the monthly cost and enrollment fee easy for the user to understand so that they are aware what the upfront cost will be.
The “Pricing” page now contains pricing cards that graphically break down pricing elements with visual hierarchy so the user can look and immediately know what they’ll be paying for. Scrolling down will show user the different payment options, making it clear how they can pay for the program.
Meet the Team
The Meet the Team page consists of team members pictures and their names. The user can then click on the team-member and it'll take them to the instructor bios.
The “Meet the Team” page has the circular instructor images as well as their names and job titles.
The instructor bios will have a more detailed description of the instructors and what their interests are as well as their experience.
Swim Curriculum
The Swim Curriculum page consists of team members pictures and their names. The user can then click on the team-member and it'll take them to the instructor bios.
The "Curriculum Page" provides a breakdown of what the user should expect from the swim classes. This includes a “Levels” section with specific information for the particular class that the user is interested in.
Schedule
The Schedule page allows users to select the day that works best for them and filter classes by class types. The client uses a third-party scheduling system called JackRabbit, so that needs to be integrable with the filter option. This version is much more simple than the previous abundance of schedules that our users had to scroll through during user testing of the original site.
The "Schedule" page is designed as a calendar that when clicked on will open up the class options for that day.
The actual schedule box for that particular day will move up onto the screen from the bottom along with a filter system to help users be more selective.
High-fidelity Wireframes
It was important for our group to capture what we believed to be the essence of the Swem School which is that swimming is empowering and freeing. To do this we rebranded the original Atlanta Swim School logo to a stronger swim oriented vector logo that was fun, strong, visually pleasing, and an illustrative style that would help connect our clients brands. We also wanted to make sure that the updated brand would convey a more mature atmosphere then its relative SwemKids — as this organization was meant for adults as well as kids. The colors that we chose were inspired by beautiful vintage advertisement posters for the amazing outdoor lido's across the UK, emphasizing the importance of swimming and having a favorite place to swim.
Style Guide
Homepage
After receiving feedback from the client on the homepage, I revamped the homepage to include a more congruent design style and better graphics so that it really captured the organizations fun and empowering nature. Here is the final version and a breakdown as to what exactly was changed:
Redesigned swimming cards to match the aesthetic wave theme and changed the orientation to hold more information
Simplified sign-up section and mentions private, semi-private, and group classes
Introduction section emphasizes the "Swimming is Life-Saving" message
Changed the hero text message to resonate with more swimmers
Added a photo of Trish to show how she is affiliated with the brand
Revamped this section to include image of swimming student and blue waves
Simplified sign-up section and mentions private, semi-private, and group classes
About Us
The Drown Prevention section has been added to the design to be more in line with the Trish's message and organizations goal to prevent drowning related incidents.
Contact Us
Address and Email information has been moved from the contact form to its own section that is horizontally aligned with the form.
Pricing
A description of the Pricing Plan was added to give users better initial information for what would be included with the swim class subscription.
Team-Members
Team-member photos will have a hover state so that when the user hovers over their images it'll reveal the persons name and position.
Swim Curriculum
We added a preliminary lessons page for users with a list of the different lessons offered. We used the swim card horizontal element design that we made for the homepage and applied it to this page.
After feedback from the client we changed the composition fo the Curriculum page. We added a "Swim Your Way!” message that is meant to encourage the user and instill confidence that it’s never too late to learn how to swim. We also expanded the levels section and a CTA at the end of the section.
Schedule
Prototype
After designing the site in Figma we then proceeded to prototype it and make it interactive. Creating universal elements and components beforehand allowed us to seamlessly link our navigation and buttons to the correct pages. We were able to add a dropdown menu to the navigation bar with hover states for the links.
We presented this prototype to our client focusing on:
- Our personas task flows
- The schedule page and how the clients third-party scheduling system could be integrated and a filter could be implemented onto a live site
- The About Us section and how we added an FAQ and Contact page for our clients users who had questions (this was one of our clients pain points)
- How the Swim Curriculum page needs to be updated with accurate information pertaining to the levels of swim lessons
- The Pricing page and how the pricing charts simplify the total cost and allow the user to feel secure knowing exactly what they're paying for
Click link to view prototype:
Swem School Prototype
Testing & Validation
The next step was to test the site with real users and see where the site could use refinement. After testing it out with five users we quickly discovered some flaws that we would address before taking the site into the next stage of development. The pain points that users had with our site included:
- The schedule page was not optimized and users complained that the calendar system was too complicated. The schedule page needed a rework so we wanted to go back to the drawing board and design a schedule system that would be much more minimal and effective.
- Users would consistently go to the About Us section when looking for the Contact Us form. We needed to merge the Contact Us page with the About Us section to avoid confusion.
- More detailed information needed to be added to the Curriculum levels and FAQ. In the design we filled out information not yet received from the client with filler copy.
- Users didn't know to hover over team-member images to have more information appear. We would need to fix that and make names and titles more evident.
Development
After the prototype and validation phases were complete, Trish hired me and one other team-member to develop and launch the site. We then spent a month learning how to use Webflow (a powerful cms that gives designers the tools to customize websites in a completely visual canvas) so that we could effectively transition our designs from Figma onto the web without the hassle of learning advanced coding. Once we had a good grasp on how to use Webflow, we spent about three months designing the site in Webflow and officially launched the site in December, 2021. While working on the site we had to remain agile and adapt our designs to be responsive — the client requested that the site be mobile and tablet friendly. We also had to come up with an updated solution for how the scheduling system would work and be integrated with a third-party system that the client was using called JackRabbit.
Here is a list of the most prominent problems that we ran into and how we solved them:
Problem
Solution
The homepage needed to be more exciting and intervactive.
Added water ripple JS to the hero image to give users a fun interaction from the start. Also added hover states on buttons and scroll animations.
Scheduling system needed to have a filter and still work with a third-party program where the client could update classes using JackRabbit and it would sync with the site on Webflow.
Contacted JackRabbit and requested their API code. I then hired a JavaScript programmer to custom code the API to sync with a new design that I created for the schedule. We then added a screening page before the schedule so that the users would automatically be filtered to the class that they were looking for.
Testimonials were not able to work with the collections list and have a carousel function.
Applied custom JS for the user to be able to cycle through testimonials and still sync with collections list so client could update them seamlessly.
Client requested that a promotional video be added to the homepage.
Designed and added a new section to the homepage with embedded video, text, and relevant imagery.
Client requested that the Swem Stories page also include a Swem News section where she could post articles written about her organization in the media.
I created a new page called Blog which included both Swem Stories and Swem News. I then redesigned it so that the client could easily upload stories and videos about her organization from the collections page.
Design
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum sit amet, consectetur adipiscing elit
- Pretium nibh ipsum consequat nisl vel pretium. Sed vulputate mi sit
- Nisi porta lorem mollis aliquam ut porttitor leo.
- Senectus et netus et malesuada fames ac turpis.Aliquam etiam erat velit scelerisque.
Need a Designer?
Let's talk