MISP (Federal Navy)

MISP

publish date

march 15, 2024

project type

Web APP Design

client

MISP (Marine Invasive Species Program)

About the MISP Web APP

The Marine Invasive Species Program (MISP) is designed to minimize the risk of nonindigenous species entering state waters from vessels. To support this mission, a new web app was developed. This interactive web app guides users through the process of submitting required ballast water and biofouling management reporting forms. Users can access previously submitted reports and the latest versions of reporting forms and features, making the submission process fast and efficient. Kin designed the UI/UX for this application.

concept

The goal was to create an intuitive web app that simplifies compliance with MISP regulations. The design focused on user-friendly navigation and accessibility for vessel operators.

challenge

Ensuring a seamless user experience while managing complex reporting requirements. The interface needed to balance regulatory compliance with ease of use.

solution

A streamlined UI/UX with clear workflows, interactive guidance, and easy access to past reports. The design enhances efficiency, reducing submission errors and time spent on compliance.

UI/UX Persona

Agathe Dufour, Manager

“I am manager and I want to process more ports easily.”

Frustrations

Interface
Missing Data in some actions
Multiple browsers opened
No tracking system for different platforms
Intuitive view
Multiple browsers opened

Demographics

Age: 25 – 40
Education: Degree in Business
Occupation: Manager
Tech literate: California Basic

Core needs

Difficulty in managing the volume of vessels entering.
Create online reports.
Time-consuming document search.
Limited collaboration capabilities.

A sleek and intuitive wireframe UI/UX design that lays the foundation for a seamless user experience. With a focus on clear navigation, balanced spacing, and effortless interactions, it guides users naturally through the interface.

Wireframe

Vessel Reports

Introducing MISP – the ultimate web app with a powerful dashboard designed to transform vessel reporting at ports. With MISP, managing vessel arrivals has never been easier. Our intuitive dashboard gives administrators complete control over the entire process, from assigning reports to specialist users to overseeing inspection approvals. But that’s not all—MISP enhances the experience for external users as well. Vessel representatives can now conveniently fill out reports online before inspections take place. Say goodbye to paperwork and hello to efficiency!

Easy access
Streamlined report management
Intuitive forms
Save progress and return later

A user journey flowchart visually represents the sequence of interactions a user has with a product or service, illustrating their experience from initial contact to the accomplishment of goals.

User Journey Flowchart

Report in real time

With MISP, you'll experience streamlined operations, improved communication, and enhanced productivity. Join the growing number of ports worldwide that are embracing this game-changing solution. Don't miss out on the opportunity to simplify vessel reporting and take your port management to new heights with MISP.

Export with convenience

Visual style is an essential part of a project as it helps create a standardized system of colors, fonts, buttons, text input, and many other components that will be combined and displayed on user screens.

Style Guide

Font Combination

Typography

Introducing Nunito Font - the epitome of elegance and versatility in typography. Crafted with precision and care, Nunitoisa modern sans-serif font that effortlessly blends contemporary aesthetics with timeless appeal. Whether you're designing a website, creating stunning graphics, or crafting captivating print materials, Nunito will elevate your work to new heights.

Palette

Color Scheme

Elevate your website and web app with the vibrant and visually captivating Orange Color Scheme. Designed to bring a fresh and modern touch to your digital presence, this color palette combines the warmth of orange with the sleekness of gray, creating a harmonious balance that is both eye-catching and professional.

Figma

Component Library

The component library was created to facilitate the interaction between designers and developers and preserve the visual concept of the application.

Admin Dashboard

Unlock the power of efficiency with Dashboard, the ultimate solution for streamlined operations, seamless communication, and unrivaled productivity. Join the ranks of leading ports across the USA who are revolutionizing their workflows with our multi-user levels and super admin access. Say goodbye to bottlenecks and hello to a new era of productivity. Experience the future of port management with Dashboard today!

More efficient 95%

Easier to use 87%