As the Lead Designer for the BoatConnect team, my primary responsibilities involved managing and refining the design system, collecting user feedback through interviews to guide our design choices, and managed the creation of prototypes and user journeys. Additionally, I conducted usability testing and oversaw the project from start to finish, working closely with engineers to ensure seamless delivery and post-launch maintenance. We followed the Agile Scrum methodology for project management, utilising tools such as JIRA, Confluence, XD, and Figma to optimise our processes.
::::: The Challenge :::::
The challenge involved finding a technical solution for a GPS device that would provide the application with data on the vessel's location. An installation guide was necessary to help boaters correctly install the GPS hardware, as proper installation was crucial. The app needed to be simple to understand, with clearly distinguishable states for ease of use.
::::: The Solution :::::
The GPS hardware uses a SIM card to send signals every three seconds, similar to the technology used in commercial lorries. We also integrated onboard electronics to collect additional data, enhancing the app's functionality. This includes monitoring bilge levels, hatch alerts, battery levels, and water temperature. In the user interface, I used cards for each connected element, incorporating a traffic light system to inform users of the status of each element.
::::: The Result :::::
The following are live screenshots of the BoatConnect app in action after setup. The images depict the app alerting the user when a boat (Simrad01) breaches the geofence. These screen captures were taken in November 2022.
BoatConnect keeps users connected to their boat from both iOS and Android devices.
::::: States and features UI :::::
::::: Safe zone, Alert zone and offline UI :::::
::::: User-interviews with testing :::::
Interviews were conducted to gather insights, and usability testing with real users was performed to ensure the design's reliability.
::::: Onboarding with guides and tips :::::
After conducting the interviews, the team realized that we had incorrectly assumed the traffic light system was obvious for indicating states. Consequently, we had to introduce in-app guides to clarify the meaning of each state.
::::: User Journeys :::::
::::: Payment method :::::
::::: Subscription flow :::::
BoatConnect's essential features encompass location tracking, geofencing, trip history, monitoring boat battery voltage, local weather updates, and optional sensors for bilge, temperature, and cabin door status. These sensors are a crucial aspect of the application.
The project demanded design work for various aspects, including registration and onboarding flows, settings configuration, payment methods, subscription management, installation guides, support, and a history log.
One major UX challenge was creating a step-by-step installation process that seamlessly guides users through connecting the hardware to both their boat (vessel) and device.
::::: In-app Installation Guide :::::
The application features an in-app installation guide that offers users a step-by-step experience to set up their boat with the app.
::::: BoatConnect - Web design :::::
Upon completion of the app development, I collaborated closely with the marketing team to design the BoatConnect landing page and e-commerce experience. I also worked closely with the developers to ensure accurate delivery through hand-offs and sign-offs, while managing communication between teams.
::::: User Feedback :::::
