We recently completed a really lovely project — the redesign and development of a new website for McMaster Yachts. Find out how we tackled the web design project for this yacht charter & brokerage company in this case study. If you’d prefer to just go ahead and view the site, you can by clicking the button below. Visit McMaster Yachts
After several meetings with the McMaster Yachts, that allowed us to get a good feel for their requirements and goals for their new website, we got started with the project by producing ‘wireframes’ for all the key pages of the site. Wireframing is a crucial first step in our web design process (for us and the client), as it allows us all to explore possible layout options before considering typography, colour and imagery. Here’s a quick look at the homepage wireframe for this project. Although this did change a bit from wireframe to actual design, it allowed us to work through a few different ideas with McMaster. The main one being that we wanted their imagery to do most of the talking and use the full width of the user’s browser window to make as much impact as possible. Further down the homepage we proposed having image blocks in rows of two linking through to key sections of the site, like the news, charter and brokerage pages. Below you can see the Yacht Detail page, showing details of an individual yacht. Our idea here was to have a fullscreen background image and then show more images of that same yacht below it that the user could click to change the main image. And finally here’s a quick look at how we proposed laying out a more standard content page. The aim here was to show the content in a simplistic way as the user scrolls down the page, and let the beautiful images McMaster Yachts have do the talking. The links in the white sub navigation bar would also act as anchors for each section, scrolling the user to the relevant place on the page.
Web Design & Development
This project as a whole was pretty fluid, so although McMaster signed off the wireframes and we moved on to design, we did end up changing a lot of the elements during the process. For that reason it was an interesting project to work on because we had to be extremely agile, finding solutions for problems as we faced them. Here’s a look at the initial homepage design we put forward, which McMaster loved. They felt that the grayscale effect on the image panels further down the page were a little flat (although they wanted to keep it). So in the final version we added more contrast. McMaster also changed the logo during the course of the project, so this did impact the typography we used in the final version. We’re open to change though, so we ran with it!
Final Homepage Design
So above is the initial design, and below is the final homepage design. You can see the new logo in place and more contrast on the greyscale images that fade up in full colour when you hover over them with your mouse.
Homepage on mobile devices
The homepage on mobile presented a few challenges. Firstly we had to re-order the panels below the main image as “Latest News” was appearing first (due to the flow of the HTML). McMaster thought the news wasn’t so important on mobile devices, so we demoted this as it were. We also needed to pull the content that gets shown when the user hovers over the “About” panel, out of the image, because of course, you can’t hover over something on a mobile device. Doing it like this still allows the user to watch the intro video on a mobile device. If you click the image below you can see it much larger.
Yacht Detail Pages
The Yacht Detail page also went through quite a few changes from design to development. We needed to modify this page from the initial wireframe we put forward, as the small thumbnails below the main image didn’t work particularly well with the fluid full-width layout when the browser window was resized. Our first solution was to put left and right arrows at the edges of the screen to let users cycle through the big images. However the issue here was load time. Having upwards of 10 large, high res images was causing the page to slow down drastically, especially on mobile. The solution was for us to create a mini-gallery (second image below) and “lazy-load” these images in, only when the user has clicked to view them. That way the overall load time of these yacht detail pages wasn’t affected. We also utilised the same modal window to display the finer details of each yacht (third image below). View a Yacht Detail Page
Content Style Pages
Content style pages ended up being simplified too. Instead of having multiple images in each section, we decided to just have one to keep things simple.
During the development we also created a “staff portal” for McMaster employees. Basically a secure area where staff can access and download marketing material.
We also set up a secure client area for McMaster’s clients (the yacht owners themselves) to access confidential information about their yachts.
The final outcome…
This was a challenging project to work on from a development point of view. Our main challenge being getting the balance right between large, beautiful visuals and keeping the load time down to ensure the website offered a great user experience on mobile too, but we learnt a great deal. Overall McMaster Yachts were really happy with the outcome of the completed website and we’re looking forward to a long relationship helping them develop the website for the future. Visit McMaster Yachts
Would you like to be notified each time we post new digital media?