APBDA DS
Creation of a Design system for the design of the new tool of the Port Authority of the Bay of Algeciras (APBA).
TYPE
UI PROJECT
TIMELINE
2 MONTH
YEAR
2021
CONTENT
DESIGN SYSTEM
COMPONETS
INTERNAL TOOL
CHALLENGE
The Port Authority of the Bay of Algeciras (APBA) faced the challenge of redesigning their internal tool, which was essential for daily port management operations. The existing system had grown over time and lacked visual coherence, making the user experience and operational efficiency difficult.
The goal was to create a modern, unified interface that was scalable and easily adaptable to the team's varying needs. The client was not just looking for a redesign but a solid, structured solution to serve as the foundation for future improvements. Therefore, APBA requested the creation of a comprehensive Design System that covered all aspects of the tool's visual and functional design.
DEVELOPMENT
To tackle this project, the approach was divided into several key phases:
Research and analysis of the existing system: I conducted an in-depth analysis of the current tool and user workflows. This included interviews with key APBA teams to understand their needs and expectations. I also reviewed public administration design guidelines and standards to ensure compliance with regulations.
Definition of components and guidelines: Based on the analysis, I defined the core components of the system: buttons, forms, tables, navigation, iconography, typography, color palettes, spacing, and interactive states (hover, disabled, active). Each component was designed to be accessible, user-friendly, and consistent.
Documentation creation: To ensure the Design System was understandable and easy to implement, I developed comprehensive documentation that included:
To tackle this project, the approach was divided into several key phases:
Research and analysis of the existing system: I conducted an in-depth analysis of the current tool and user workflows. This included interviews with key APBA teams to understand their needs and expectations. I also reviewed public administration design guidelines and standards to ensure compliance with regulations.
Definition of components and guidelines: Based on the analysis, I defined the core components of the system: buttons, forms, tables, navigation, iconography, typography, color palettes, spacing, and interactive states (hover, disabled, active). Each component was designed to be accessible, user-friendly, and consistent.
Documentation creation: To ensure the Design System was understandable and easy to implement, I developed comprehensive documentation that included:
· Usage descriptions for each component.
· Code examples for developers.
· Style guides explaining how to maintain visual and functional consistency.
· Accessibility standards to comply with WCAG guidelines.
Iteration with the team: Throughout the process, I held continuous feedback sessions with the APBA team to ensure that the Design System met their specific expectations and needs. Additionally, usability tests were conducted with internal users to refine the design.
SOLUTION
The result was a fully documented and scalable Design System that provided the Port Authority of the Bay of Algeciras with a solid solution for their internal tool. This system includes all the necessary visual and interaction components for the interface, along with clear guides to ensure proper use.
Thanks to the new visual coherence and standardization, APBA’s team can now:
· Maintain consistency across all parts of the internal tool.
· Save time on future developments by reusing pre-built components.
· Improve user experience by reducing the learning curve and making the interface more intuitive.
· Ensure the system's accessibility by meeting the required usability and accessibility standards.
This Design System not only facilitates the redesign of the current internal tool but also establishes a solid foundation for future expansions and improvements to APBA's digital experience.
