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.
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.
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.
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.
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.
I rebranded the heroes to display legible text and a custom image at the business.
I made sure the color palette seen above was consistent across all web pages.
Each form and button links to one place with consistent and accurate business information.
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.
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.
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:
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!
