Docky
Web and mobile marketplace app helping yacht owners rent berths
Client
Our clients are businessmen from Malta, they have multiple business projects and we’ve already helped them to create a design for an educational platform. They liked working with us and returned for another side project they called Docky.
Project idea
Malta is a great destination for yachting, however, finding a place to berth a yacht can be quite challenging. Yacht owners needed a service that would help them find and book free berths, just like Airbnb helps people book places to stay. At the moment, there was no such high-quality service for booking berths. Hence, the idea had a lot of potential and needed to be executed effectively, so that the client could occupy this business niche.
That's how the idea of the Docky marketplace app was born. This app would let people rent out their berths and allow yacht owners to book them. Our client planned to make money from this service by charging a commission on every transaction made through the platform.
Our goals
1
Design and develop a web application for berth owners and a mobile application for yacht owners
2
Implement such functionality as creating berths and yachts, KYC, payments, and booking processes for both berth and yacht owners
3
Complete all of this within a budget of $300,000-$400,000 and a timeline of 6 months
UI/UX design
Before starting work on the app, we created a mind map to plan the app's navigation for both roles and connections between screens.
Then we made a couple of design concepts in marine theme to help our client determine the style of the future product.
Our client chose the first version and we elaborated the style further. We used Instrument Sans font for its simplicity and readability, and designed the interface with blue accent color and white background.
Key features
Throughout the project, the design had numerous revisions, and we were continually adding new features. As a result, the project expanded nearly threefold from its original MVP scope. Here are the key features of the applications.
Sign in
Users can sign in using their phone number, email address, or Apple, Google, and Facebook accounts.
Search
Boat owners can view berth locations on a map, filter options by various parameters, and read descriptions and reviews. Another unique feature allows users to input their yacht's specifications and display only those berths that meet their requirements.
Adding berths
Any user can list their berth on the app and rent it out after it passes a moderator's review. The berth owner can see the list of all their berths and edit them later.
Bookings
Yacht owners can choose between hourly and long-term berth rentals. In the bookings section, they can view all their reservations and details, and they have the option to cancel bookings if needed.
Berth owners can manage their bookings — block unavailable hours and days in the calendar, accept or cancel bookings, check boat owners’ documents, etc.
KYC
Users need to verify their identity to rent and book berths.
Payments
Users can create a withdrawal account through Stripe to pay for their bookings or receive payments. The app saves all account transactions with details, users can also download receipts.
Messages
The client-side chat offers a wide range of features to enhance the user experience, like adding photos, searching through chats, deleting messages, etc.
Reviews
After visiting a berth, yacht owners can leave a review about their stay.
Analytics
The platform provides berth owners with analytics — they can view statistics, including the number of bookings they had each month, the revenue generated, and their average rating.
Navigation
We decided to exclude the marine navigation feature, which involved creating routes from the current location to the dock. Marine routes are not the same as land routes and we couldn't find a reliable third-party service or an API to provide this. Developing this functionality from the ground would be too expensive.
Branding
Since Docky is a new product, it needed to meet the target audience's expectations of quality and reliability to build trust. To achieve this, our client also asked us to create branding for the service.
After analyzing the requirements, we created a mood board to figure out the style of the brand. We decided that the brand should look modern, light, minimalistic, friendly, and simple.
Then we worked on the logo: gathered references with logos of related services and style references, made some hand sketches, and drafted different versions of the logo.
Usually, we go through several iterations of refinements when creating the logo. In this case, our client chose the logo from the first iteration, so we only needed to work on the color variations.
The finished logo reflects the friendly vibe of the service by combining symbols like a boat, anchor, smile, and person, showing the interaction between boat and berth owners. Finally, we’ve prepared a logo identity guide that explains how to use the logo.
Landing page
To help people learn about the new product and encourage them to download the app, our client needed a landing page, so they asked us to handle this as well. We designed the landing page to match the style of the app, using branding elements to maintain a consistent look and feel.
Development
It would’ve been more practical to first develop a single cross-platform mobile app for both roles, followed by a web version if needed. However, our client specifically requested both a web application and a mobile app for the first version of the product. To meet this requirement efficiently, we decided to use a monorepository setup with React Native and Next.js. This approach allows us to reuse code between the apps, reducing development time and costs.
We used Laravel for the backend and PostgreSQL as a database solution. We’ve also created an admin panel with Laravel Nova to let our client manage the platform. These technologies are part of our usual tech stack.
Integrations
We used proven solutions that we had implemented multiple times in previous projects. This also allowed us to save development time and costs:
Stripe Connect
We chose the solution for billing as it perfectly aligns with the client's goals, and we have significant production experience with this service.
Stripe Identity
For KYC processes
Google Maps
For displaying maps and searching locations by name and coordinates
Intercom
For customer support chat
Authentication via Apple, Facebook, and Google
For user sign-in
In the mobile app, we used Expo Router for the first time. It’s a solution for managing navigation between screens in React Native and web apps to let users move seamlessly through the interface.
It's better than React Navigation which we used previously, because screen paths are automatically formed based on file locations within folders. Once we navigated its quirks, it helped save some time on routing tasks.
Since we used Stripe for billing, we implemented its SetupIntent for booking payments. This feature allows us to initiate off-session payments without the cardholder's immediate involvement, once they have given consent.
This method lets us process payments only after the booking is approved by the berth owner. It minimizes overhead costs for refunds in case of cancellations since no return is needed if the host cancels the booking during the request stage.
Challenges we faced
Scope of the service
The primary challenge was the sheer volume of the project. It involved three applications — landing page, web application, and mobile application — each with extensive functionality. Given the tight deadlines, the development team was quite large. The frontend team ranged from 2 to 5 people at different stages, and the backend team varied from 1 to 3 members.
Changing requirements and design
Some requirements were clarified along the way, and we adjusted the design in the process of development. This demanded effective communication, clear role understanding by each team member, constant task management, and timely delivery of functionality. For example, backend delays could block frontend tasks, so our workflow needed to be highly efficient. Our team managed this exceptionally well.
Monorepository development
This was our first time developing a client part of the application where the mobile app, web app, and landing page all resided in a monorepository. Initially, we planned to use React Native components on the web combined with Next.js for better SEO. However, we noticed that the UI-kit library significantly increased the build size, which could negatively affect load speed and search rankings. As a result, we decided to build the client part of the web app and landing page using HTML and CSS. Despite this, we still used non-visual React Native elements across both applications.
Results
We completed the outlined scope of work roughly within the budget and timeframe. We also created a unique branding style for the app, helping our client confidently enter the market. The client continues working with us to support the product after the release.
Currently, the app is undergoing internal testing by our client’s team, while we are addressing technical debt and making minor functional changes as requested.
