TCP Design System

Marina Braholka
4 min readJul 11, 2020

Here I’ll tell a little about my experience working as a UX/UI Designer in a seaport.

Paranagua’s seaport, Brazil (2018)

About

The Paranaguá Container Terminal (TCP) moves an average of 1240 containers per day. In 2018 724 ships were operating. The port has been modernized in recent years and most of the operations are now digital. The fast growth of information available on the TCP Customer Application made usability, information architecture, and user experience to be set aside.
The first challenge was understanding how the system works in real-time with several numbers of processes and user flows, improving the user experience for almost 4.200 clients with 100 accesses per minute. Dealing with this, another big issue was to change the culture of their development team, because the developers didn’t know their user’s needs and that made them built a non-user-friendly system.

Research

The TCP system has an average of 100 user accesses per minute as I said before and an infinity of possible user flows. So, the question was: “How can I start it?” My first step was analyzing their Google Analytics page, at least to see how these accesses working, the profiles, permissions, and overall numbers.
After this part, I started to contact real users for a quick interview and send them a survey.

Pain Points:
- Too many screens to complete the same task;
- User flows totally broken or confused;
- The users didn’t receive any feedback about the processes and sometimes they had to call Customer Service.

Planning

In this phase, I started to create the Personas to make all the processes easier to understand as a real user of the system.

Personas

I’ve built the user flows for each permission profile to help the developers to see the relationship between the screens, create the components, and get the overall complexity of the system.

User flows for each profile.

Design Sprint

In this phase of this part of the project, our main objective was delivering
the new search feature, with this in mind, I called all the developers for a design sprint, to get all the ideas, pain points, insights, and help to put the team on the same track.

Design Sprint

User testing

After the part of research and planning, I started to do the wireframes and de mid-fi prototypes. We selected six companies to start to test our beta version of the system.
Subsequently the period of tests and improvements (3 months), we delivered the first version of the new feature with a new style guide.

User test

User interface

System Screens

Thanks for watching :)

--

--