Local Boating Services

I had the unique opportunity to design and build a new website & social media assets for local boating company Classic Boat Works during the summer of 2023.


Website Redesign

The Challenge

As a job over the summer of 2023, I was asked to create a website for a local boating repair business. A website had already been set up for Classic Boat Works, but it was outdated and displayed old and irrelevant information. My job was to design and build a new, easy to use website, along with additional social media assets and marketing materials for Classic Boat Works to use in the future.


  • Evaluate the previous Classic Boat Works website.
  • Gather relevant information to publish on the new site.
  • Create a style guide and mockups of the new site in Figma.
  • Build the website in Webflow.

My Role

I was the primary designer of the new Classic Boat Works website and social media assets, but all designs were approved by the owner and his family.


What does Classic Boat Works look like now?

Although the previous Classic Boat Works website served its purpose, it had unfortunately fallen short of standard practices for updated websites. I created documentation for a heuristic evaluation of the previous website, according to the Nielsen & Norman Group’s guidelines, and below were the biggest shortfalls that needed to be attended to:


There are multiple points throughout the site where important headings & other text is difficult to read or completely illegible.


According to the owner of Classic Boat Works, the site had not been updated with correct information since its publication date.


Information like “Prep” is incorrect terminology used in boat repair by Classic Boat Works. Due to this, the structure needed to be redone.

Styling & Mockups

How can I create consistent branding across the website?

I started my styling by creating different versions of their current logo, some with and without color. The tealish-blue color seen on the left is the site’s primary color, and all other colors were established using Google’s Material Design Color System.

Typography was a different challenge: I had no idea what font was used in the logo, and I had all the creative freedom to choose a suitable font for the website. I eventually found the correct font used in the logo, and settled on a bold but modern classic for the body typeface, used on the majority of the website.

All mockups were created in Figma. I already had a background building websites in Webflow via my previous UX portfolio, so my prototypes were primarily used to illustrate to the owner of Classic Boat Works how his website would be structured. Below you can find three key elements I chose to help display the site’s branding and personality, as well as three mockup images.

Picture Heros

I rebranded the heroes to display legible text and a custom image at the business.

Color Palette

I made sure the color palette seen above was consistent across all web pages.

Contact Info

Each form and button links to one place with consistent and accurate business information.

Classic Boat Works home & landing page mockup
Classic Boat Works Service / Detail / Storage mockup
Classic Boat Works About Us page mockup


What is the most efficient way to improve the website?

After mockups were finalized and approved, I began to construct the website in Webflow. I chose Webflow for two primary reasons: one, because the previous website was built there, and because of its responsive viewport sections that help me design for different screen sizes. GoDaddy was also used to host the website and create a custom domain for Classic Boat Works.

Final Designs

What does Classic Boat Works look like in different scenarios?

As you can see above, each screen is optimized for mobile use, as well as desktop and tablet viewing. A visual hierarchy was implemented in order to quickly acclimate readers to how the pages were structured, as well as a responsive navigation that transforms into a hamburger menu for smaller screens.

Take a look for yourself! www.classicboatworks.com


What did I learn and how did I grow?

I learned a huge amount of web design strategies and techniques while working on this website, and I enjoyed every aspect of the project. Below are a few improvements I would make if I had the opportunity to change anything:

  • Clean up the classes and layout structure.
  • Change the Aileron typeface to a web font like Montserrat
  • Take more time to establish hi-fi mockups of all screens, including tablet and mobile screens
  • Optimize each page for a larger iMac screen (1920px)

The Classic Boat Works website is an ever-evolving project. I have offered my services and skills for the foreseeable future to upkeep the website and maintain it while I am taking classes for the next school year. I’m so grateful for this opportunity, thank you to everyone at Classic Boat Works!

Let's get in touch!