SkipperMyBoat August Update
This post orginally appeared on the SkipperMyBlog Magazine, click here to read about it over there.
In our first monthly update were excited to share with you our new homepage, landing page, wishlist system, and backend updates. Skipper My Boat has reached the stage where all main features have been developed; our team has the luxury of perfecting each page.
Our three main goals for each page we revisit are to:
- Improve the overall UX (user experience) of the page, reducing the number of steps it takes to achieve a goal, and to layout each component in the most logical way to a visitor.
- Reduce loading times, which is the time it takes for a visitor to be able to move and interact with the site.
- Build each page from a component-design perspective, even from our initial prototypes to keep our branding consistent.
The new home page was rebuilt to improve the user experience both on desktop and mobile devices, we assessed the old home page and created new designs to achieve the goals we aimed for that the old home page couldn’t achieve, the old home page had the following issues:
Search didn’t stand out well over stock photos Stock photos made the website look quite generic – like our competitors There were only 2 access points for a user to search, the search input and the global map with random yachts listed over it The overall design quality was poor and the design seemed inconsistent with other pages that had been built – like the search or listing pages
The new homepage has a clean design with rich images to catch the visitor’s attention
With the new homepage we wanted to focus more on curating a clean design which supported more access points for users to find yachts in different locations, another major point was that we wanted to look more different than our competitors so we stood out more. We achieved an improved look by incorporating these key features:
- Hero graphic design that makes the text pop (and search stand out more)
- Search boats by boat type (with yacht icons for each type)
- Search boats by locations (with images of each location and total yachts)
- Search boats by popular places (with images of each place and total yachts)
- Search boats by random suggestions (with images of each yacht and the country they reside in)
We also wanted to showcase random boats for visitors to quickly jump into viewing listings
In a further effort to reduce the time it takes for our users to complete an action. We’ve added a mobile download page, which is a quite simple but engaging feature to have. Everybody’s time is important, and people are most impatient when they haven’t invested in an idea or a product yet (in this example, SkipperMyBoat).
This means new visitors will make a decision to stay or go very quickly after clicking on a link to our site. To combat this we try to make every action and process on our site as convenient and simple as possible. Welcome to the land of user experience.
The mobile page was designed to be simple and straight to the point
Putting in your country code and phone number into the form will send a text to your mobile to anywhere in the world. Clicking the link will instantly open the app store, ready for you to hit download. No more searching, just straight to the app.
A much-requested feature from our client feedback forms was that they wanted the ability to save boats and share collections of them with friends.
We added the wishlists button to the bottom of every listing payment box
From a user point of view, Wishlists seem like a simple and useful feature to have on a website. However, from a data and development point of view, they are quite intensive. From a UX perspective, the system had to:
- Be able to add a boat quickly while searching.
- Create a wishlist if it doesn’t already exist on the fly and update automatically.
- Have the ability to add other people via email to a wishlist.
- Allow everyone in the wishlist to add boats they find.
- Allow the owner of a wishlist to add an admin.
- Give edit functionality to wishlist admins.
- Allow everyone to remove a listing.
Users have the option to create a wishlist, or add it to an existing one
In the future, we also want the system to:
- be able to change dates in the overall wishlist, and fade out boats which are not available for that time.
- give a pricing range in the wishlist, and fade out vessels out of this range
- provide the options to select beds, sleeping arrangements, capacity, activities, just like on the search page.
Because of all of these requirements, we needed a more accessible way to query multiple data collections as wishlists alone accessed the user model, boat listing model, wishlists model and permissions.
Introducing GraphQL, after many weeks of researching different methods to increase development productivity and code reusability, we came across GraphQL. After building a prototype on our staging server to test with our beta users, we decided to implement it onto the production website.
Users’ can view manage all of their wishlists under the Account tab
GraphQL is a syntax that describes how to ask for data, and is generally used to load data from a server to a client. GraphQL has three main characteristics:
- It lets the client specify precisely what data it needs.
- It makes it easier to aggregate data from multiple sources.
- It uses a type system to describe data.
We built the whole wishlist system using GraphQL. It cut our required code in half because we didn’t have to keep reusing methods to pull data from different collections. Fundamentally, it allowed us to build a custom query for exactly the data we wanted. Also, because we were making fewer requests, it reduced the load time by 30% on average for our users.
John and I are going to have a great trip…
Powering the homepage and landing page is our new inspiration system, it was built to allow users to quickly overview all of our boats by either popular destination or country.
Another feature that might sound simple, but returning over 15,000 boats in half a second does come with some technical challenges.
Our solution involves running nightly task to query the whole database to find our most popular areas, then the system will work out which cities (or countries) are far enough apart in order to not have too much overlapping data. Finally, the system then builds a radius based on the length of the country and find all boats returned inside this area. We have an image library served through AWS CloudFront which will match city/country images to their MapBox location data for displaying on the frontend. A cache is set daily on our API to allow instant returning of all our boats.
SEO and landing page We have added over 10,000 boats onto our platform and double our userbase in the past few months. This has been down to a heavy advertising campaign through Google and Facebook ads and by working closely with a prestigious PR firm.
But off-site advertising and SEO will only get you so far. We’ve been working on every single page to readdress SEO meta tags and page performances to ensure we don’t get penalised by Google in the search results. We’ve also restructured the HTML hierarchy on many of our landing pages to ensure search engines pick up exactly what results we want them to display.
One of our landing pages, clearly displaying what our company does.
July was a great month for development and we’re excited to build on our progress coming into August. Our next biggest challenge is rebuilding the search page from the ground up on both the front end and back end, where we can hopefully connect the two platforms together in the middle.
As our main page for connecting visitors to yachts, the search page is by far the most important feature to have UX working correctly. Our aims are to build the search system API in GraphQL to keep request times low and our developers sane, plus using GraphQL will allow us to easily adapt and grow the system in the future.
Alongside the search page, we have already begun to rebuild the boating backend for hosts. This will allow us to mass import and export boats for our hosts when required and set the groundwork for a much better host platform experience.
See you next month for another update.