top of page

// BOAT-ED INTERACTIVE //

Interactive Boater Safety Course Redesign

ROLE

Senior Product Designer

COMPANY

Kalkomey Enterprises, Inc

TIMELINE

Sep 2023 - Jul 2024

TEAM

5 members – 1 Senior Product Designer, 1 VP of Education, 1 Illustrator, 2 Unity Engineers

PLATFORM

iOS/Android App

DOMAIN

Boater Safety Education

RESPONSIBILITIES

Game Design, Interaction Design, Visual Design, Design System, Accessibility, Heuristics, UX Writing, Development Support, Demo Reel, UX Documentation

Project Objectives

Problem

Agency customers required an interactive boating certification course that met NASBLA approval and aligned with modern digital habits. The existing designs failed to meet accessibility standards and lacked consistency in usability and visual design. A comprehensive redesign was necessary to ensure compliance with regulatory requirements and successful market launch.

Goals

  • Redesign the interactive boater safety course to meet NASBLA standards.

  • Enhance visual design and usability to align with contemporary digital expectations.

  • Develop a design system and heuristic language to streamline the redesign process.

  • Ensure accessibility compliance across the application.

Discovery & Research

Internal & Stakeholder Interviews

I met with the team to gather insights on the needs of the project, state of the team, and establish myself as the UX lead and best methods of collaboration. I found:

  • The team worked ad-hoc and were against a redesign

  • The screen layout and course architecture could not change

  • Timeline was tight and there was concern involving UX

  • The team wasn't in support of a redesign

UX & Accessibility Audit

I assessed the current designs for accessible colour contrast and affordances in the UI. Apart from the inconsistencies in visual elements and it's dated visual design, it inherently suffered from accessibility infractions and was heuristically problematic. So, it was necessary to improve the UI for usability and accessibility alone.

Supporting Redesign Efforts

I took into consideration why the team wasn't in support of a redesign, and presented low-risk UX/UI upgrades to the team that:

  • Reframed "redesign" as enhancing usability

  • Highlighted how improvements through minimal code changes could produce a major visual overhaul

  • Introduced new possibilities to expand their ​

As a result, the team quickly recognized the benefits of a redesign, and the benefits of having someone dedicated to UX, and agreed to go forward with improving the UI.

Older screens versus newer designs presented to the team.

Older screens versus newer designs presented to the team.

Design Process & Execution

Defining Mental Models

I categorized activities and screen designs from the latest build based on interaction style. This allowed me to define repeatable UI elements and UX patterns for future screen designs, building the foundation for the design system and ensuring users build mental models that focus their energy on learning the content instead of how to interact with it.

Example of how the screen and activity types were isolated.

Example of how the screen and activity types were isolated.

Identified screen and activity types.

Identified screen and activity types.

App Architecture and Flow

The course included a points system and interactive map across chapters, so I mapped out the app flow to ensure clear interactions. I then collaborated with the team to refine it, aligning my understanding of the functionality with their expectations for the course experience.

Map of the app's foundational flow.

Map of the app's foundational flow.

Visualization of points and rewards logic.

Visualization of points and rewards logic.

Design System

To begin standardizing design components, I pulled repeatable assets from the most recent build and reviewed them with the team to get their origin and importance. From this, I created a comprehensive list of important components, and design considerations I could use to start the redesign, and built the design system while building the screens.

Colour language of the app.
Navigation components from the design system.

Navigation components from the design system.

Colour language of the app.

Ad-Hoc Screen Design

I designed the screens ad-hoc alongside the team to accommodate the fluidity of the project and tight deadline. To do this, we met weekly to review project progress. My process started by improving screens from previous builds until I was able to get ahead and push for early access to course content. After that, I was able to proactively design and provide the engineering team with assets ahead of their production schedule, which significantly sped up our process.

Demo Reel

Using AfterEffects, I created a reel of app interactions to provide visibility into the project’s progress and preview the redesign for the exec team. The video did its job in getting everyone pumped and was later shared with the rest of the company and state partners to showcase the project.

Demo created for clients and executive team.

Client Review Assets

I created documentation highlighting key interactive areas, using screenshots from engineers and an education doc from the VP of Education, to help improve the government approval process. The result was a streamlined Figma document with 150-200 component labeled screenshots that could be quickly tailored for each chapter.

Page from the official document.

Page from the official document.

Usability Testing

The VP of Education led the iterative usability testing with UserTesting, recording user interactions and gathering feedback via a satisfaction survey. He shared the results with the team to discuss necessary changes, and if major revisions were needed, I would update the solution for testing in the next round. Testing and revisions of the design would continue until optimized usability was assured. 

End Summary

As the UX design leader, I:​

🔥

Navigated
Complex Redesigns

Led the redesign effort mid-project, ensuring alignment with regulatory standards and tight project timelines.

​

💪

Fostered Cross-
Collaboration

Partnered with the VP of Education, Illustrator, and Unity Engineers to seamlessly integrate educational content with engaging design.

​😎

Enhanced
Project Visibility

Elevated the project's profile within the company by delivering a successful redesign that aligned with strategic goals.

🚀

Delivered
Impactful Outcomes

Achieved project objectives by balancing design quality with regulatory compliance, driving product success.

​

Impact & Outcomes

  • Achieved NASBLA approval for the redesigned interactive boater safety course.

  • Enhanced user engagement and satisfaction through improved design and usability.

  • Established a scalable design system for future educational applications.

Reflection

This project underscored the importance of adaptability and cross-functional collaboration in delivering a product that meets both regulatory standards and user expectations. By leading the redesign mid-project, I ensured that the course not only achieved compliance but also provided an engaging and accessible learning experience.

Final Designs

More detailed walkthroughs available upon request.

Preview of the final app screens.

u_arrow-circle-up-black.png
bottom of page