Summary
Discovery
Definition
Development
Deliver
Learnings

Via Verde Website

Via Verde is an electronic toll system used in national motorways in Portugal. When passing through the exclusive road for toll users, a DSRC identifier stuck to the vehicle's windscreen communicates with an antenna on the road and debits the coast directly into the customer's bank account.

The entire service is controlled and managed by the user on an exclusive digital platform.

The project consist in conducting a comprehensive assessment to identify all usability and user experience issues related to the Via Verde website.

My role

- Collecting essential data from stakeholders;

- Conducting research to understand users' diverse needs;

- Proposing solutions to meet identified needs.Validating solutions with stakeholders for alignment;

- Communicating solutions clearly to the IT team for implementation.

Expected results

- Applied UX research to identify improvement opportunities and better understand user needs;

- Collaborated with a multidisciplinary team of UX and UI designers to develop cohesive, user-centered solutions;

- Documented solutions to ensure a clear handoff to the development team;

- Established a hierarchy among elements to support a scalable and dynamic design system.

Discovery

The initial problem

At the start of the project, we encountered several limitations that influenced the decisions made throughout development.
Following an initial meeting with the Via Verde team, further discussions were held to understand the key pain points users faced during the usage process.

We identified the main issues and categorized them into three summaries:

Limitations

- The impossibility of interacting directly with customers through Via Verde channels;


- Had received insights and changes already gathered by the Via Verde team, without understanding the real context;


- Any improvement proposals needed to align with the existing site architecture.

Pain points

- Difficulty understanding the site's structure and navigation flow;


- Questions related to billing and payment methods;

- How to purchase new products or services from Via Verde and partner companies.

Our primary objective was to analyze this information from Via Verde to identify opportunities and conducted a benchmarking study to understand market dynamics.

The User

Using this existing data, personas, and journey maps, we refined these into updated proto-personas.
The two profiles, discussed with the stakeholders, were defined:



Corporate Profile: Where their company offer and control costs, managed by the user.



Personal Profile: Individuals using the service for daily routines.
‍

These profiles served as a foundation for identifying established user personas, helping to guide our focus and strategy in the right direction.

Benchmark

Most competitors show little variation in their discovery flows.


Discussions with stakeholders revealed that this is due to competitors mimicking each other, with closely related companies maintaining shared partnership services.

Interviews

To deepen our understanding beyond the data provided by Via Verde, we conducted an attitudinal study focused on gathering qualitative insights. This involved real user interviews, followed by analysis and discussion with the team and stakeholders.

Each UX Designer conducted three interviews with real users, whom we sourced from colleagues outside the project who were regular customers of the service.

This approach allowed us to obtain a more detailed and accurate view.

The main questions asked were:

1. How often do you access the Via Verde website?
2. What kind of information do you typically search for on the site?
3. How do you feel about the overall user experience on the Via Verde website?
4. Can you describe any difficulties you've encountered while navigating the site?

Answers in common

4

Only used the site once to register.

3

Use it once a month, to check payments.

5

They find it confusing, sometimes not knowing what they're doing.

7

They didn't know if they were in the right place to solve what they wanted.

Definition

How Might We

With the information established, we brainstormed viable solutions for each scenario.

In collaboration with the company, we evaluated the best approaches to address the requested changes and the issues uncovered during the interviews.

The main objective is to make the platform the most important mechanism for resolving user actions with Via Verde services.

Evaluating the current Experience

Focusing on the established user profiles and the issues identified in the research, we mapped out the user journey through the platform to pinpoint the main critical areas related to these problems.

1- Login area lacks options for password recovery or data saving;

2- After logging in, the actions menu is only accessible from the client area page;

3- The support page button is difficult to locate and doesn’t clearly indicate its purpose;
‍
4- Inconsistent visual patterns and button behaviors across the site;

5- Text links have inconsistent colors with no clear pattern;

6- Tables, input fields, and dropdown menus follow inconsistent design patterns across different site tools;

7- Dropdown lists break the site and prevent scrolling;

8- Pop-ups displaying validation messages vary in format, behavior, and button layout.

Heuristic Analysis

Upon visually analyzing the site, it became clear that the layout followed a brand and communication-driven pattern, but did not adhere to any navigation or structural consistency standards as a platform.

Jobs to be done

We've created a file with all the mandatory business requirements and a user story for each item.



All the user stories were created as Waves and each task was numbered in order of priority. The PM helped with the priorities.

Setting Schedules and Goals

With all the Waves and a prioritisation list, it was possible to schedule in days the main deliveries.

Definition

Ideation

Rounds of discussions about the best flows for these user stories and how to apply the improvements we covered previously.

Navigation flows

High fidelity wireframes and flows, based on the current structure, for better visualising how the user experience would be, with a focus on the most important touch-points.

Wireframes With Proposal

We decided to present each navigation flow in full, even when the screen remained unchanged.

This approach helped prevent any confusion among the Via Verde team, clarified flow behaviors, and ensured processes were fully understood during deliveries.

Each new proposal was clearly marked and highlighted for the team's review and for the awareness of all other stakeholders.

Login Process

Based on the gathered insights, our goal was to simplify the login process by providing easier access to the platform, including features like saving email and password, and quick access links to essential tools.

Service Map

An interactive map with dynamic filters to better find Via Verde services.

Client support

A section with predefined sequences of common questions was added to assist users in finding answers and solutions to their queries.

Alert counter

Instead of separate pop-ups for each alert, we proposed a unified alert counter displaying different categories and the number of issues to be resolved in each.

If no issues are present in the user's account, the banner is shown in green to provide clear context.

Message Center

We redesigned the message center to prioritize alert messages and pending actions at the top of the inbox.

This approach ensures the urgency of user actions is maintained, with update alerts always prominently displayed.

Deliver

Final Product

During the UI design process, we identified the need for a Design System, as the website's solutions were developed independently and lacked cohesion.

To address this, we prioritized standardizing elements and navigation flows as the first step in building a Design System.

Designing for scale

A prioritized list of initial elements was created to serve as the foundation for the site’s structure. These elements were selected to establish the core design standards, such as typography, color palette, and basic layout principles.

This iterative process allowed for the gradual expansion of the Design System, not only in terms of style guidelines but also in fostering a mentality and culture of advocating these standards, particularly within the Via Verde team.

Layout & Spacing

This adaptability not only enhances usability but also contributes to the overall effectiveness of the Design System in meeting the diverse needs of users across different contexts and devices while maintaining the existing structure.

Typography and Colour Foundation

All elements follow the brand’s color guidelines, with accessibility prioritized to meet minimum AA compliance, ensuring a visually appealing and consistent design.

Components

A process focused on the deployment, consistency, and standardization of elements.

Additionally, a comprehensive library of all assets and components was created, providing resources to be used from the conception of a new solution through the UI stage and project finalization.

Learnings

Reflection & learnings

I had the opportunity to work on this project and test it with real users in a high-demand, large-scale corporate environment. I've included it in my portfolio because it was a visually satisfying experience, despite the numerous restrictions and limitations.

This project significantly contributed to my growth, helping me understand the maturity and responsibility needed to succeed in large-scale markets.

This project respects the confidentiality of it's information
‍For more details, feel free to reach out, and I'd be happy to share my perspective on the challenge.
See more projects

Just say hi

samuelfranzen88@gmail.com