Port of Lisbon
The new APL (Lisbon Port Authority) portal aims to take another step in the progressive improvement of communication with customers, suppliers and partners.
Role:
UX/Product Designer
Client:
Lisbon Port Authority
Team:
1 Project manager, 2 designers, 1 front-end, 2 developers.
Year:
2020.
the challenge
The Port of Lisbon presented the challenge of placing the Lisbon region at the highest level of the Iberian logistic system through the adoption of new port operation processes based on advanced technologies, promoting integration and innovation in accessibility and logistical systems while seeking to define a new paradigm for the port-city relationship.
The goals
Design the Port of Lisbon online presence as a modern and multifunctional port, that responds to the needs of the market.
To that effect, make navigation easier by:
Optimizing the information architecture,
Using a responsive design with its adaptation to mobile;
Providing contacts, location of terminals and diverse logistic operations modes;
Rethink and enhance the relationship with stakeholders;
Process
Business Analysis
In this initial phase, we took into account:
3 Portuguese ports and their portals as well;
12 international examples (Singapore, Hamburg, Amsterdam, etc).
Main KPIs when choosing the Business analysis
Busiest Container Ports (Singapore, Rotterdam, Antwerp, Hamburg);
Busiest Passenger ports (Helsinki, Dover, Tallinn);
Busiest Ports by Cargo tonnage (Rotterdam, Antwerp, Hamburg);
This was important to understand which kind of information architecture was being perceived to be the best and more modern to users and stakeholders all around the world while keeping in line with significant trends and usability directives
Some key findings
50%
Does not highlight Sustainability on the homepage
Had good SEO;
Gives emphasis to an auxiliary iconography and take advantage of the power of photography;
60%
Take advantage of the use of the footer
Lists arrivals at the port, updated, highlighted, due to their importance;
Highlights updated port statistics in real-time;
Provision of atmospheric conditions in and connection to live-stream cameras sorted by each terminal;
80%
Use horizontal Menus;
Make use of a mega-menu ( ex.:Amazon);
90%
Have a great “Search” field, allowing users to easy access and find what they search;
Had a responsive version, allowing a better experience and accessibility;
Stakeholders Map
Identifying stakeholders was crucial to perceive:
Which domains could benefit the most from this intervention from each stakeholder;
What would be the driving vectors of this digital transformation;
How could the portal be a simple source of information that would answer the needs of those who are not in the naval sector;
In this situation, all the stakeholders appointed by the client and proposed by us within the naval sector were listened to, taken into account, and mapped accordingly its relevance and impact on the project itself.
Insights
Key figures were identified and addressed according to the action vectors:
18 problems regarding the portal and the way it communicates with the public;
12 necessities identified had to be taken into account;
14 major findings regarding Information, Communication, Content Governance;
54 ideas came out from the interviews;
The main vectors based on which the new portal should be based were also identified:
Port Authority;
Communication and Content;
Sustainability;
Port-City Relationship;
Pedagogy;
Portal Management.
Personas
We carried out 23 interviews, divided between internal (14) and external (9) stakeholders.
The interviewees, through their relationship with the customer, shared their knowledge and perspective of what the current portal is and what characteristics the future solution should have.
Experience Design
Designing the user experience and interface is a process.
Starting with sketching will allow the design team to visualize the screen-to-screen interaction so that their ideas are something visible and clear in user interface form. Makes it simpler to figure out how products will work to get the desired result.
Note: my collaboration with this project took place until the design of the low to medium-fidelity prototypes.
However, for the purposes of displaying the entire process, high-fidelity screens are displayed here.
Homepage Ideation
Category Page
Homepage process: sketch, wireframe and high-fidelity
Category page process: sketch, wireframe and high-fidelity
Homepage
Operations
Containers
Terminals
Conclusion
While the project was largely successful, there are some areas for potential improvement:
Enhanced Digital Literacy Support:
The Covid-19 pandemic highlighted a significant gap in digital literacy among stakeholders. Providing digital literacy training sessions or resources could have helped stakeholders better navigate remote communication tools like Teams.
This would ensure more effective and productive remote interactions, minimizing the drawbacks encountered during the project.
Onsite Engagement:
Conducting all interviews and workshops onsite would have facilitated a better understanding of stakeholder needs and contexts. In-person interactions often provide richer insights through non-verbal cues and the ability to build stronger rapport.
Future projects could prioritize onsite engagements whenever possible to enhance the quality of stakeholder feedback.
Improved Remote Interaction Tools:
While remote interactions were necessary, optimizing the tools and methods used for these interactions could improve stakeholder participation and feedback quality.
Implementing more user-friendly and accessible digital platforms, along with robust technical support, can ensure smoother remote sessions.
