PIM Cycle & Coffeehouse
PIM Bicycle and Coffeehouse is a local bike store and cafe located in Ballard, Seattle. I chose to redesign and update their E-commerce website as part of a UX project that I did while attending General Assembly's UX design immersive program.
Overview
While attending General Assembly's 12-week immersive UX bootcamp, one of our projects consisted of choosing an E-commerce site the has over 100 products and improving its user experience. As an avid cyclist, I chose to redesign a local coffee and bike store called PIM that was near where I lived at the time.
PIM is a store developed by a group of bicycle and coffee fanatics. They have a full service bike repair shop and a cafe where they serve amazing espressos and coffee drinks, as well as teas and Redbull. You can use their drive and bike through coffee window to order drinks or park your bike outside and enjoy the bike shop aesthetics inside. They also sell their own PIM exclusive gear and e-bike called MYLO. PIM really needed a user experience overhaul as their current site was outdated and hadn't taken into account the users needs.
Challenge
Redesigning an outdated e-commerce site that has over 100 products and lacks usability and overall style. The site needed to be responsive for desktop and mobile and take into account user needs. This was my first project putting into action the UX principles that we had been taught and executing the design thinking process. Discovering and understanding user behavior and pain points with the site to effectively improve the user experience .
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 was the sole designer of the project while attending General Assembly's 12-week bootcamp. I was responsible for implementing the design thinking process and creating a design system for redesigning a site of my choosing. I learned how to conduct proper UX research methods, prototyping skills, and define user problem and solutions.
Kickoff
On Yelp they currently have a 4.5 star rating with 49 reviews.
On Google they currently have a perfect 5 star rating with 129 reviews.
PIM is an experience that caters to the community and is a place for both expert and novice bike lovers/coffee lovers. The problem from first glance is that customers aren't sharing the same experience online that they are in-person at the actual store. Their website is more geared towards the cyclist side of their business.
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
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
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
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
Testing & Validation
Development
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
Need a Designer?
Let's talk