Discovery

Background

In 2022, the company secured a €11.9 million contract to oversee cleaning and waste treatment services at the Port of Las Palmas de Gran Canaria (Spain). With a workforce of over 65 employees operating across extensive port zones. The company faced the challenge of coordinating daily tasks, tracking performance, and resolving incidents across a complex and high-traffic environment. As part of this transition, they needed a centralized digital solution to monitor operations in real time and optimize service delivery across departments.

Challenge

I was brought on board as the principal UX/UI designer to create the platform’s digital interface. The tool needed to provide supervisors, managers, and field operators with a shared system of record, adapted to their different needs and work environments—including mobile usage and nighttime shifts.

The design had to strike a balance between high-level operational oversight and on-the-ground usability, ensuring clarity without overwhelming users with complexity.

Objectives

1. Design a responsive dashboard for desktop and mobile to monitor KPIs at a glance.
2. Develop clear visualizations to track schedules, tasks, and service compliance.
3. Enable real-time data access to support quick decisions and coordination.

Problem Definition

User Persona

To create a user-centered platform, I began by identifying key user roles and mapping their daily routines. This led to the development of a personas that represented the main user of the platform, an operations supervisor.

Research Insights

• Users needs immediate access to up-to-date information, alerts, and performance data to respond quickly and make informed decisions.
• Users prefer clean and intuitive interfaces with visual tools like maps and indicators that simplify complex data and reduce cognitive load.

User Journey

To better understand the end-to-end experience of operations supervisors, I mapped out a user journey covering key platform interactions: from logging in to reviewing performance. This helped identify friction points, emotional highs and lows, and moments where the platform could better support decision-making and team coordination.

Research Insights

• Users value live updates but experience delays and effort when navigating multiple collection zones.
• Alerts are useful but lack context and follow-up tracking, requiring supervisors to stay constantly attentive.
• When supervisors can clearly see who completed each task and easily message operators, their experience improves significantly.

Insights gathered through persona development and journey mapping revealed that Supervisors are managing an ecosystem of activities that require up-to-the-minute visibility and fast, confident decision-making. Their priorities revolve around real-time data clarity, intuitive filtering, and geographic awareness to coordinate teams, allocate resources, and respond swiftly to issues.

The interface must give them a sense of immediate situational awareness: where teams are, what’s been done, what’s pending, and where delays or incidents are occurring. Visual tools like maps, color-coded indicators, and performance summaries become essential cognitive shortcuts that allow supervisors to interpret large volumes of operational information.

Solution Design

Information Architecture

To ensure clarity and ease of navigation, the platform was structured into five main sections, each aligned with specific operational tasks:

• Real-Time: Provides live tracking of cleaning vehicles and staff. Displays performance indicators (on-time, delayed, underperforming), recent activity, GPS data, shift start time, assigned team, and downloadable logs. Staff data includes names, roles, and live locations.
• Waste: Organized by work zones, this section visualizes daily, weekly, and monthly KPIs. A map displays the status of containers (emptied, pending, unemptied, or unscheduled) along with the responsible team and recent activity filters.
• Indoors: Mirrors the structure of the Waste section but focuses on indoor areas, allowing users to filter rooms or buildings by cleaned/not cleaned status.
• Outdoors: Tracks manual and mechanical cleaning tasks such as sweeping, watering, and pressure washing. A color-coded map shows the status of each port zone (1–7), helping supervisors assess area-specific progress.
• Issues: Centralizes incident tracking, prioritizing response time. Users can view incidents by timeframe (daily to yearly), and access detailed information including type, location, reporting/resolution dates, descriptions, and photos via an interactive map.

Wireframes

Low-fidelity wireframes were created to refine the platform’s layout and information flow. This allowed me to validate navigation logic and feature placement before moving into visual design, ensuring alignment with user needs from the outset.

Visual System

The visual identity was designed to balance usability with brand consistency. Initially, the platform adopted the Pérez Moreno Group’s colors—dark blue and light yellow—for alignment with corporate branding. To emphasize sustainability, green was introduced, but combining all three led to contrast and legibility issues.

To address this, a more neutral, corporate-toned adaptation was developed:

In practice, Day Mode would use green as the primary color, emphasizing the platform’s ecological mission, while Night Mode would feature dark blue, designed for low-glare visibility during early morning and overnight shifts, essential for field workers using tablets outdoors. Performance indicators followed a traffic light system: red (low), orange (medium), and green (high), while aqua green was used as an accent to unify branding.

Typography was set in Open Sans with varied weights to establish a clear, consistent visual hierarchy. This comprehensive style guide not only ensured usability across devices and roles but also laid the groundwork for scalable and future-ready design.

Branding

Beyond UI, I also developed the platform’s name, logo, and brand identity. The name GreenPort emerged from a thematic exploration of sustainability, port operations, and cleanliness. The logo blends maritime and environmental symbols: a propeller, a recycling icon and leaf motif to reinforce the platform’s dual focus on ecological responsibility and operational efficiency.

Final Design

Using the refined wireframes and style guide, I developed a high-fidelity prototype that brings together all visual and functional elements. The final design showcases the complete interface across all five core sections, emphasizing real-time tracking, task clarity, visual data insight, and mobile adaptability.