What is Mermaid Swim School?
Makenna Mason is a private swim instructor offering youth and adult lessons.
Note: This business is not currently active, but the prototype is still hosted on github pages.
How can I...
Create navigation and layout that leads the visitor to essential information?
Create an appropriate visual theme based on the business’ main clients?
Code a responsive website?
Much to learn Iteration 1
As a completely new designer, my first idea was to reference local competitors, observing:
- Information architecture
- How they presented lesson/pricing models
- Mobile v. desktop inconsistencies
- Brand and tone
To consolidate the information from the 3 sites I visited, I decided on 5 main pages: Home, Programs & Prices, Scheduling, About, and Contact.
After outlining the content for each page, I dived straight into Sketch to create mockups.
I felt that the color/visual theme matched a young audience. However, I felt my layout was very unorganized and unintentional.
In retrospect, the big mistake here was skipping the sketching stage and jumping straight into "hi-fidelity".
Drawing from the sites of PASS - Berkeley and Blendlogic, I researched Bootstrap and redesigned with attention to rows and columns. This framework would later ease the development process when I was working on responsiveness.
Client Goals Mission Statement
Mermaid Swim School’s mission is to build confidence and enjoyment in swimming through the encouraging teaching of fundamentals.
Practicing Intentionality Iteration 2
How can I code a responsive website?
I often broke up groups of information into columns of 2 or 3 that would stack on mobile.
Using media queries, I created classes “hide-sm” and “hide-lg” if I needed different versions of layout between desktop and mobile.
This version guided my arduous first dive into the development process. After 2 months of trial-and-error I was able to complete the website’s first navigable prototype (2018).
My coding files were lengthy because I gave each element an ID and wrote the same styles multiple times. It would have been more efficient if I better utilized classes through global styles, which is my current dev approach.
Rebuilding 2 Years Later Current Version
Minimize colors and fonts to highlight relevant elements.
- Use global styles (headers, background colors, etc.)
- Use reusable components (navigation bar) for consistent, widespread changes
- Use semantic tags (section, figure, etc.) to improve accessibility
How can I create navigation and layout that leads the visitor to essential information?
This sitemap illustrates how the different pages connect to guide the user. Based on the client’s ultimate goal, my call(s) to action emphasize the most important actions: getting lesson/pricing information, and eventually scheduling.
How can I create an appropriate visual theme based on the business’ main clients?
Different cards throughout the site contain blue wave patterns. I chose to create lower contrast flat illustrations for a softer, friendlier look. I also used CSS animations to make text and images subtly float up and down.
Call(s) to Action
I highlighted elements meant to guide visitors to our ultimate goal: booking a session.
I often used cards with clear headings to aid scanning for the information the user might want.
This is meant to provide feedback and help the user recover from any errors. There is also a modal for successful submissions.
Value of Application
Online courses became forgettable until I applied them to a project. As much I wanted to know beforehand, I was always learning new practices along the way! Not knowing things ahead of time helped strengthen my problem solving.
- Embed functional scheduling calendar
- Implement functional contact form
- Conduct user tests
- Better performance loading images