How to find a safe harbour while sailing.
Dockbooking is a mobile app that identifies, books and pays for moorings for tourists' boats in Mediterranean ports.
It was commissioned in 2016 and hit the market in June 2017.
We designed the graphic interface, with detailed work on UX and UI. We subsequently developed the app itself for iOs and Android, designed the data structure, created the algorithms to calculate prices and availability, the API interrogation tools and the management systems for the individual ports.
Imagine you need to book a hotel, but to do so you also have to enter your height, weight and waist measurements; you are then given prices and availability in real time, from hundreds of different places, taking into account all of these variables. This is dockbooking.
Our first approach was to define in detail a Minimum Viable Product, reducing the numerous accessory features initially requested and simulating real user situations.
The typical user was identified as a yachtsman outside his usual haunts, with the need to find a berth quickly. The app is used purely for the booking, and this must be completed with the least possible number of interactions: choose a port; book a date; pay by credit card.
Unlike a hotel, the reservation in a port essentially depends on the characteristics of the vessel, so we changed the protagonist of the app: not the yachtsman, but the actual boat , and with this approach we reduced the need for personal details to a minimum.
Dockbooking can book a berth without entering practically any personal information. Once the size of the vessel, an email address and phone number have been given, the process is complete.
The project was completed by an Agile team of 4 people in 2-week cycles over a period of 6 months. This was preceded and accompanied by a process of analysis and product design, in which all workflows were composed together with the client. One of the crucial tasks was to produce analyses of the problems and descriptions of the application solutions that would be understandable for the stakeholders, by working collaboratively and providing visual illustrations.
The prototypes were presented to the ports, complete with real-life cases and exceptions, and the business model underwent continuing adjustments in response. Without a solid Agile method, it would have been impossible to complete this project.
Alongside the app for yachtspeople, a system was developed for the management of bookings, berths, seasons and a calendar for use of each individual port.
There is also an editing and general control system for use by the management of Dockbooking
The design system
Work on the graphic interface was approached by creating a "component-based" general design system, valid both for the mobile yachting app and for the port management side, as well as for promotion purposes.
The typeface selected was GT America by Grillitype, a character midway between European Grotesque and American Gothic, and for us above all a very versatile and rich font that could easily be used in the vast range of contexts within the Dockbooking family.
For a project with a business model that is being constantly refined, with a very tight turnaround time, with numerous design modifications both on the field and being tested, a component-based design system made it possible to work simultaneously on all the parts that proved to be indispensable.
We chose the name and logotype from a shortlist of work drawn up prior to our arrival, with some slight alterations. We rewrote the tagline, finding a slogan that, despite being translated into several languages, remains familiar and maintains the efficacy of the original meaning:
- Trova un porto sicuro
- Find a safe harbour
- Arriver à bon port
- Finde einen sicheren Hafen
- Encuentra un puerto seguro
The website is currently a simple promotional landing page, but in 2019 the web app will be launched alongside the native apps available in app stores.
The project was presented at trade fairs in Düsseldorf and Genoa, for which printed promotional materials were created.