Introduction
What is Mermaid Swim School?
Makenna Mason is a private swim instructor offering youth and adult lessons.
This personal project marks my first exploration into Sketch, HTML/CSS, and design thinking. Over the past 2 years, I’ve grown in areas of feedback, navigation, and visual design. I’ve also restructured my code and improved in Javascript. I practiced developing an online identity based on her audience and business goals.
Note: This business is not currently active, but the prototype is still hosted on github pages.
Deliverables
Challenges
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
Research
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.
Mockup Review
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
Basic Summary
Mermaid Swim School’s mission is to build confidence and enjoyment in swimming through the encouraging teaching of fundamentals.
Practicing Intentionality Iteration 2
Challenge Point
How can I code a responsive website?
Bootstrap-based design
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
Visual Goals
Minimize colors and fonts to highlight relevant elements.
Dev Goals
- 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
Challenge Point
How can I create navigation and layout that leads the visitor to essential information?
Connecting Pages
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.
Challenge Point
How can I create an appropriate visual theme based on the business’ main clients?
Beach theme
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.
Other Techniques
Call(s) to Action
I highlighted elements meant to guide visitors to our ultimate goal: booking a session.
Sectioning
I often used cards with clear headings to aid scanning for the information the user might want.
Form Validation
This is meant to provide feedback and help the user recover from any errors. There is also a modal for successful submissions.
Appendix
Reflection
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.
Stretch goals
- Embed functional scheduling calendar
- Implement functional contact form
- Conduct user tests
- Better performance loading images
