Marine Ecosystem Dashboard and App

In my role as the end-to-end designer for the VoltSafe Marine ecosystem, I was entrusted with the responsibility of creating a cohesive, intuitive, and engaging experience across both digital platforms and physical hardware. My design journey was shaped by the real-world functionality and accessibility needs within the marina industry environment.

VoltSafe's smart IoT shore power connector: the hardware I set out to design a digital ecosystem around

‍

The Ecosystem: A Synergistic Experience

The VoltSafe Marine ecosystem—comprising the power pedestal hardware, the enterprise web app, and the client mobile app—represents a harmonious blend of design and technology.

My contribution as the end-to-end product designer spanned across this entire ecosystem, ensuring consistency, usability, and satisfaction at every touchpoint.

Each element is a piece of a larger puzzle, designed to work together to create an efficient, user-friendly marina management system.

‍

Ideation Journey: Shaping the Experience

During the ideation phase of the VoltSafe Marine project, I collaborated closely with the engineering team to define our MVP (Minimum Viable Product) and MVE (Minimum Viable Experience), ensuring alignment between technical capabilities and the envisioned user experience. This was followed by hands-on sketching, where initial concepts and features were drafted, setting the foundational blueprint for the project.

Sketching the initial concepts for the layout of the web app

Transitioning these ideas from paper to digital form, we conducted collaborative sessions, employing a tactile approach with printed dashboard elements. This method allowed us to physically rearrange and fine-tune features, fostering a creative synergy between design and engineering expertise. These efforts resulted in the development of industry-specific and efficient design elements, laying a solid groundwork for the subsequent detailed design work in Figma, and ensuring a user-centric approach from the outset.

Physically laying out card printouts and combining features to create a highly customized and industry specific UI

‍

Challenges: Designing for Flexibility and Reliability

In designing the VoltSafe Marine ecosystem, I navigated several challenges, turning them into opportunities for innovation and user engagement.

➤ Complex User Needs

To accommodate diverse user personas, from detail-focused marina staff to tech-savvy boat owners, I employed a modular design. This approach provided customizable dashboards and app settings, adapting to each user's role and preferences while maintaining simplicity and usability.

➤ Hardware-Software Synchronization

I ensured the ecosystem's reliability by seamlessly syncing the IoT power pedestals with the apps. My design included buffer states to indicate data gathering or command execution, and I designed the system to display only verified accurate information, aligning the physical and digital realms effectively.

Each challenge was met with a strategic resolution that not only solved the issue at hand but also enriched the overall user experience.

‍

Design Methodology: Atomic Design Meets Agile

In designing the VoltSafe Marine ecosystem, I applied the Atomic Design framework within an iterative Agile workflow to establish a robust yet adaptable design system. Starting with foundational elements and building up to complex components, Atomic Design ensured visual consistency and intuitive interfaces across the ecosystem.

Custom interactive design system I created from scratch using the Atomic Design framework

This dual approach enabled me to efficiently manage design tasks while staying attuned to the users’ needs, resulting in a user experience that was both cohesive and responsive to the dynamic marina environment.

Agile methodology allowed for flexibility, with iterative sprints and continuous user feedback shaping the product's evolution.

‍

Accessibility and User Empathy

Accessibility was a central theme in my design process. Following Nielsen's usability heuristics, I implemented an intuitive language and pictography, ensuring that users could understand the app at a glance. The design also accommodates the maximum font sizes without compromising the visual integrity of the app.  

By integrating large touch targets, I increased error tolerance, catering to a broad demographic, including those with limited mobility or visual impairments and the high contrast ratio ensures optimal readability.

‍

The Enterprise Dashboard: Visualizing Marina Operations

At the heart of the marina's operations is the enterprise dashboard, a web application I designed to be both visually appealing and functionally robust. It's a real-time visual representation of the marina, where each slip is color-coded to reflect its current status, power state, and safety alerts.

This dashboard is not just a monitoring tool but also a control system that empowers marina staff to remotely manage the power pedestals, an essential feature for both routine and emergency scenarios.

➤ Slip Map & Status

A visual representation of slip occupancy and status, crucial for managing marina operations efficiently. The spotlight card on the bottom right side provides quick information and a live video feed for selected slips, and there's a toggle for a detailed list view.

The Slip map interface offers a comprehensive visual overview of the marina, with options to view occupancy, power state, and leakage status through three distinct lenses.

➤ CRM Management

A central hub for managing customer information, payments, and invoicing, ensuring efficient and streamlined operations.

I integrated a comprehensive CRM interface into the web app, enabling marina employees to efficiently manage customer data, track invoices and payments, and log slip assignments for each customer.

➤ Client Check In

This process automatically prepares invoices and payment details based on the information entered during the check in, enhancing efficiency and accuracy.

I designed the client check-in flow to employ progressive disclosure, guiding marina attendants step-by-step through booking available slips.

‍

The Client Mobile App: A Boater's Companion

The mobile app, tailored for boaters, provides personalized control and insights. Users can easily manage their slip's power, monitor energy consumption, and stay informed through notifications designed to alert them to critical conditions affecting their vessel.

I designed the mobile app to streamline marina interactions for the boat owner, the app simplifies slip management, enhances communication, and personalizes user settings for an efficient experience.

➤ Live Video Feed for Boat Owners

The app includes a live video feed option for camera-equipped pedestals, enabling boat owners to view their slip remotely for added convenience and monitoring.

I designed the mobile app to include a feature for live video playback of boat owners' slips, offering enhanced security and peace of mind.

➤ Dark Mode Feature

In the mobile app, I integrated a Dark Mode feature, providing a visually comfortable alternative for users in low-light conditions, enhancing usability and reducing eye strain.

I designed all components to be compatible with a Dark Mode colour palette to improve low light visibility... Plus it looks pretty cool.

‍

Designing for Real-World Interaction

The effectiveness of the VoltSafe Marine ecosystem is most evident in its seamless integration. When changes occur in the marina's physical environment—whether a slip becomes occupied or a power pedestal is switched off—these updates are instantly reflected in the user's app. This immediate feedback loop is crucial, as it aligns the digital experience with real-world actions and conditions, adhering to Jacob Nielsen's principle of matching the system with the real world, particularly critical in IoT product design.

Sterling, the Harbour Master at Royal Vancouver Yacht Club, used to do daily walks aided by physical print outs of the marina to check slip statuses (left). Now, he and his team have all the information they need and more at a glance thanks to the graphic interface which matches the real world status of the marina (right).

‍

Outcomes

The deployment of the VoltSafe Marine ecosystem across a growing number of marinas has yielded tangible success, as evidenced by the robust adoption rates and positive feedback from end-users. The project's significance is underscored by notable accolades, such as the IBEX Innovation Award from the National Marine Manufacturers Association, recognizing the groundbreaking nature of our work. Additionally, the ecosystem's development and expansion have been bolstered by a substantial $180,000 grant from BC Fast Pilot, a testament to the confidence in and potential of our innovative approach to marina management.

Winning the 2023 Innovation Award from one of the most notable organizations in the Marina industry for the VoltSafe Marine ecosystem

The product is currently undergoing its pilot program, receiving positive reviews from marinas across British Columbia. Additionally, an increasing number of marinas across North America are signing up to implement the VoltSafe Marine ecosystem. This growing interest and adoption highlight the value and potential of our innovative approach to marina management.

‍

Future Directions: New Tool For Technicians

As the VoltSafe Marine ecosystem continues to evolve, our focus is on expanding its capabilities to enhance user experience and administrative efficiency. A significant upcoming addition I am designing is the  'Installer' onboarding app, specifically aimed to aid technicians installing, setting up, onboarding and provisioning the ecosystem.

This up-coming app will facilitate the smooth installation and integration of marinas into the VoltSafe ecosystem, ensuring a seamless setup process.

‍

Conclusion

Reflecting on the VoltSafe Marine project, my journey as the end-to-end designer has been comprehensive and rewarding. This endeavour has affirmed my commitment to design excellence and showcased my ability to translate complex requirements into user-friendly solutions. The VoltSafe Marine ecosystem is constantly evolving to meet and exceed safety, efficiency, and connectivity standards in the marina industry. It represents the future of marina management technology and redefines our interactions with marine technology.