From the idea to the working product

Case study

The overview

Using innovative technology to make our life easier is one of the things that makes our work so exciting.
We had a pleasure to work with Connected Boat company to build their solution
from scratch. See the step-by-step process for making it work.

The telematics and telemetry technologies are developing rapidly. In general, telemetry is a field of telecommunications that deals with measuring specified parameters. Usually, it comes with placing in the field devices that measure the desired parameter and automatically transmit that data via wire or wireless to the control panel.

Radio transmissions, modems, the Internet and mobile networks are used to transmit measurement results. There are many uses of telematics and our client, Connected Boat, decided to use it to track boat fleet.

Wondering how the entire building process looked like?
Read on to know the details.

Preparation

Wondering how the entire building process looked like?
Read on to know the details.

Platform goals

Our joint "cruise" started in 2016 and it all begins with setting the business goals of the building platform. We've defined the key values together with our client to deliver the best solution to their future customers. Here are the following:

  • Staying in touch with the boat by tracking its location, monitor parameters via mobile app and reciving notifications when some problems occur.
  • Keeping the boat safe by interacting with the online yachting community, sharing the routes, adding own POIs and searching for some nearby. Activating community alerts helps to act in case of some problems.
  • Sharing important information to ensure everything rung without any hassles. Users can monitor their vessels, plan their charter schedule, connect with tenants and give them temporary access to a boat via mobile app.

The next stage after setting the business goals and the main values of the product was the workflow planning. We've created a more detailed list of functions that had to be implemented within the MVP.

Designing the product

Armed with the knowledge, we could start planning the work and split it into stages.

Starting from scratch

With several successful startups built, creating a project from the ground up or joining it at any stage isn't that difficult for us. This time we've been part of the project from the first letter of the brief.

At first time, we've aimed to gather all information needed from the parties involved to identify and prioritize the most important product features. We've been also reviewing competitive solutions.

Must vs. Should vs. Could vs. Won't

Then, we've separated the MVP (Must) app features from those that can be implemented in next stages (Should and Could). We know from our experience that the product should be launched as quickly as possible but it has to come with the right quiality and the list of features needed to make the app attractive to consumers and competitive on the market.

Must
Requirements critical for MVP
Should
Requirements which are still important but not necessary for MVP
Could
Requirements that may improve user experience in the future but can be done after launching the project
Won't
Requirements that are useless and not planned in the schedule

Identifying project assumptions

One of our favorite methods is convering business requirements into an interface prototype. It helps us to see the product (a web interface or mobile application) from the future customer perspective. It's also one of the best ways of identifying new business processes which couldn't be that obvious while creating the diagrams.

A prototype is a universal language, clear for both business side (our client) and the technical side (contractor). Presenting it to a selected audience (UX testing) makes it easier to identify possible interface errors and correct the entire process before writing the first line of code.

Reasonable specs in the development phase

All the requirements collected and the analyses from interface screens enabled us to work on the specifications. In these types of project, it's better to create appropriate documentation to streamline the developers work, avoid misunderstandings and lead to money savings. Making redundant and extensive documentation is just a waste of time.

One of the essential parts is the mock API. The mock is a communication layer specification that allows running a server work, create mobile applications and build a website at the same time. More detailed system requirements were included in separated Wiki Documents.

Initial documentation for Connected Boat
included the following issues:

  1. Detailed clickable wireframes (illustrating the process and planning the UI functions)
  2. Use cases (main use cases for web and mobile)
  3. User scenarios (for individual actions)
  4. API Mock (e.g. prepared in Apiary)
  5. Notifications list (triggers, conditions, content, results)
  6. Server-side architecture (graph)

The entire process in a nutshell

April 2016
Stage 0
Introduction meeting. General Idea
May 2016
Stage 1
Creating works specification
May - June 2016 (loop)
Products
  • User scenarios, use cases
  • Wireframes, UX design
  • API blueprint
July 2016
Budgeting
and scheduling the project
July 2016
Stage 2
Development
July 2016 - January 2017 (iterations)
Development planning (sprints, milestones)
  • Sprint 1
  • Sprint 2
  • ...
  • Sprint 14
January 2017
Stage 3
Terrain testing & pilotage
February 2017
Stage 4
MVP Launch!
March 2017
Stage 5
Features development
& maintenance

Development phase

A little bit of technical knowledge

Tools used to support agile development

At first, we've split the project for 14 sprints (each lasts 2 weeks). Applied documentation approach enabled us to conduct parallel work on mobile applications and the server-side layer (including API).

During the work we've used several tools to streamline our work:

  • Basecamp to communicate with client
  • Redmine to organize the backlog and the team communication
  • Harvest used together with Redline to take the analytical data and compare the estimated time remaining with the current status
  • Hipchat to streamline communication between implementation team worked in two separated locations

Server-side work

While implementing business requirements to the interface and prototype, we've also made the firts decisions about the architecture and the server part. We've chosen the AWS cloud service as a server environment, which provides flexible scalability. What's more, we've used two proved solutions: RDS - PostgreSQL and Elasticache Redis and we've decided to write other services ourselves, using EC2 machines.

This microservice architecture made it easier to separate the services, so it facilitated the documentation, management and testing, as well as streamlined the developers work. It also created the efficient and consistent information exchange between services. We didn't forget about the unit tests, of course, which gave us a sense of control over the amount of generated code.

Tracking device

Our customer has provided us with a device equipped with the suitable modules, such as GPS, GSM, Multiple I/O, intarfaces, accelerometer. The device enables communication with an external server via GSM network. With predetermined time intervals and criteria, it sends data frames that contain information about the position and condition of the sensors, both internal ones and those connected to the so-called digital inputs (smoke sensor, flood sensor, reed sensor).

The important part was to use a device configuration that would save the data packets and thus reduce the cost of their transmission. We've created a special parser that processes and saves telemetry data properly. We've also made a mechanism that, when specified, triggers notifications in the system and send them to the certain users.

One of the most important functions of the device is a remote configuration. The administrator can make remote changes and optimize the device's work, even after installing it on the yacht.

The system architecture has been designed to maintain the continuity of data associated with a boat (device reports), even when tracking devices are replaced, damaged or while maintenance.

The hardware solution used in the project stays confidential. Yet, aware of a bunch of possibilities we hadn't the opportunity to use yet, we're looking forward to implementing and testing already planned improvements.

Frontend

During the front-end development, we decided to use Angular 1.5 (ES6). Chosen framework, allows creating useful components, suitable for project like this one. Webpack and Babel provided support for older web browsers by transpiling source code to ES5 convention.

Also implemented angular-ui-bootstrap, matched perfectly with designed UI and provided components like modals, datepickers and custom forms easier to implement. Finally, flexbox backed flexible layout of the whole panel.

Connected Boat combines two separate web panels - one for the fleet owner and one for the system administrator. Due to code repository configuration, both panels can share the same components which simplifies further development works.

Mobile apps

We needed to process large data volumes on both mobile platforms so we've decided to use the rapidly growing Realm library. The main challenge was to handle multiple threads, updates and cache in the background and also provide refreshed data in the UI.

We've also used the MVVM architecture to separate the business logic layer from the interface and make each module works independently. The perfect solution for this structure was the RXJava (for Android) and RXSwift (for iOS). In both applications, the maps are supported by MapBox, which allows for a bit more than standard solutions and copes well with routes drawing and points displaying.

Iterative approach

There were a lot of work so we needed a proven solution which is splitting the work into iterations. Want to know more how it works? You can find the details in this article.

Bringing the product in to life

10
Developers
2
UX Designers
2
Project Managers
5000+
working hours
7
months of work

... and 7 months later

The result of our work was creating two applications: web-based for yachts fleet owner
and mobile for yachts chartering.
Take a look at the details:

B2B panel for fleet owners

(a web-based app)

Boat fleet monitoring and managing

Customers may check the location and parameters of their vessels via web application. It will allow them to check if the on-board equipment works properly and recognise whether some of them need inspection, additional service check or potential replacement.

The web app also allow allocating periodic access to boats for rent. System administrators have the technical access to the installation panel so they can easily pair the boats with tracking devices, configuring permission and access to individual sensors for selected users.

Now we're developing a real-time messenger module to communicate with the tenants and a charter calendar management module to ensure optimal control over the fleet and profitability.

Monitor your boats

Be notified about important events

Via e-mail & push notification

Mobile app

Temporary access to the boat

Connect your clients with boat they use

Boat & cruise monitoring

Similiar to a web application, iOS and Android apps let you track your boat's location and routes with the access to their current parameters. The mobile user will be alerted in case of smoke detection, water in an undesired location, boat opening, low battery, etc.

What's more, when the app is in the "anchor alarm" mode, it will send notification about changing the boat position, so the crew can rest assured.

Invite crew members

Share your cruise via external link

App users can stay in touch with their friends and family by sharing their current position and the trip route. All the details, like boat's info, cruise data, etc. are updated automatically so it ensures a piece of mind.

The mobile version is also under the development process yet. The final app will allow communication with other crews nearby. There will be also a daily feed feature for sharing the photos and videos from the cruise with loved ones.

Learn more about Connected Boat.

Want to know more?

We are happy to help!

We use cookies to enhance your experience. Read more about cookies in our privacy policy. Agree