Carolina Medrado
Menu
TotalPass (SaaS)
Revamping the TotalPass HR Portal: simplifying UX and unlocking strategic value
Currently being developed
April 2024
As a Product Designer at TotalPass, I was tasked with redesigning the HR Portal, a platform used by companies offering TotalPass as an employee benefit. The portal helps HR teams manage employee access to the TotalPass benefit—everything from onboarding new users to tracking usage.
My goal was to make the portal more intuitive, visually aligned with the TotalPass brand, and valuable for HR teams by introducing data-driven features that help them measure the impact of the benefit.
Challenges
The HR Portal had several key issues. It was built on outdated systems, resulting in a fragmented and frustrating user experience. The design didn’t match the company’s branding, the user flows and the UX writing were overly technical and non-intuitive, making it hard for HR teams to accomplish simple tasks that they needed to repeat everyday, such as
Approving new employees
Managing recurrent payments
More importantly, the portal didn’t provide valuable data that could help HR teams assess the benefit's effectiveness, leaving it with limited business value.
Design Solution
I started by conducting a content audit to map out the portal’s structure, content, and hierarchy. I then ran card sorting and tree testing sessions to identify pain points in the navigation and better understand user needs.
Through interviews with HR professionals, I gathered insights on what they needed from the portal to improve their workflow.
With this research, I redesigned the navigation to be more intuitive, simplified the terminology, and streamlined access to the most used features. I also applied TotalPass’s new design system, ensuring a consistent and seamless experience across all platforms.
The redesign wasn’t just about improving usability—it was about transforming the HR Portal into a more valuable tool for HR teams. By making the portal easier to navigate and introducing key data features, we enabled HR professionals to better track benefit usage and demonstrate its impact to company leaders.
This made the portal a more strategic asset for TotalPass and its clients.
Two layers: core experience, then self-service
Layer 1 — Navigation, filtering, and the new statement
The first focus was making receivables easier to reach and making the statement genuinely useful on mobile.
Improved discoverability: Restructured entry point to surface receivables more clearly within existing navigation — less depth, same mental model.
Rich filtering on mobile: Full filter system covering payment method, sales solution, installment type, card brand, establishment, receiving account, transaction ID, and transaction type — with progressive disclosure to manage complexity.
Multiple statement views: Users switch between detailed, consolidated, and receivables unit (UR) views — matching the right level of detail to the task at hand.
Richer transaction detail: Structured detail screen with tabs: summary, identification, transaction details, transaction lifecycle, and online sale details.
Design system rollout: The entire section rebuilt on the new DS — visually and structurally aligned with the rest of the app.
Layer 2 — Self-service, anticipations, and business overview
The second focus was reducing operational dependency and creating a more strategic view for less experienced business owners.
In-app report export: Users generate and receive filtered reports by email — without any support contact. Custom filters, older periods, and large date ranges all supported.
In-app dispute flow: Users initiate disputes directly in the app — a task that previously required calling or messaging support entirely.
Anticipations subsection: Dedicated area for receivables negotiations, organized by type (internal, external, XPTO) — easy to track and understand.
Business overview dashboard: Simplified management view for less financially experienced users — key indicators in plain language, no financial literacy required.
Outcomes
The redesign led to a significant reduction in support tickets, as users found the platform much easier to navigate. Onboarding became faster and more efficient for new clients, saving both time and resources.
Most importantly, the new data capabilities opened up opportunities for future growth, enabling TotalPass to offer personalized insights that could drive additional business value.
Read next
Question about my work?
Carolina Medrado
Menu
TotalPass (SaaS)
Revamping the TotalPass HR Portal: simplifying UX and unlocking strategic value
Currently being developed
April 2024
As a Product Designer at TotalPass, I was tasked with redesigning the HR Portal, a platform used by companies offering TotalPass as an employee benefit. The portal helps HR teams manage employee access to the TotalPass benefit—everything from onboarding new users to tracking usage.
My goal was to make the portal more intuitive, visually aligned with the TotalPass brand, and valuable for HR teams by introducing data-driven features that help them measure the impact of the benefit.
Challenges
The HR Portal had several key issues. It was built on outdated systems, resulting in a fragmented and frustrating user experience. The design didn’t match the company’s branding, the user flows and the UX writing were overly technical and non-intuitive, making it hard for HR teams to accomplish simple tasks that they needed to repeat everyday, such as
Approving new employees
Managing recurrent payments
More importantly, the portal didn’t provide valuable data that could help HR teams assess the benefit's effectiveness, leaving it with limited business value.
Design Solution
I started by conducting a content audit to map out the portal’s structure, content, and hierarchy. I then ran card sorting and tree testing sessions to identify pain points in the navigation and better understand user needs.
Through interviews with HR professionals, I gathered insights on what they needed from the portal to improve their workflow.
With this research, I redesigned the navigation to be more intuitive, simplified the terminology, and streamlined access to the most used features. I also applied TotalPass’s new design system, ensuring a consistent and seamless experience across all platforms.
The redesign wasn’t just about improving usability—it was about transforming the HR Portal into a more valuable tool for HR teams. By making the portal easier to navigate and introducing key data features, we enabled HR professionals to better track benefit usage and demonstrate its impact to company leaders.
This made the portal a more strategic asset for TotalPass and its clients.
Two layers: core experience, then self-service
Layer 1 — Navigation, filtering, and the new statement
The first focus was making receivables easier to reach and making the statement genuinely useful on mobile.
Improved discoverability: Restructured entry point to surface receivables more clearly within existing navigation — less depth, same mental model.
Rich filtering on mobile: Full filter system covering payment method, sales solution, installment type, card brand, establishment, receiving account, transaction ID, and transaction type — with progressive disclosure to manage complexity.
Multiple statement views: Users switch between detailed, consolidated, and receivables unit (UR) views — matching the right level of detail to the task at hand.
Richer transaction detail: Structured detail screen with tabs: summary, identification, transaction details, transaction lifecycle, and online sale details.
Design system rollout: The entire section rebuilt on the new DS — visually and structurally aligned with the rest of the app.
Layer 2 — Self-service, anticipations, and business overview
The second focus was reducing operational dependency and creating a more strategic view for less experienced business owners.
In-app report export: Users generate and receive filtered reports by email — without any support contact. Custom filters, older periods, and large date ranges all supported.
In-app dispute flow: Users initiate disputes directly in the app — a task that previously required calling or messaging support entirely.
Anticipations subsection: Dedicated area for receivables negotiations, organized by type (internal, external, XPTO) — easy to track and understand.
Business overview dashboard: Simplified management view for less financially experienced users — key indicators in plain language, no financial literacy required.
Outcomes
The redesign led to a significant reduction in support tickets, as users found the platform much easier to navigate. Onboarding became faster and more efficient for new clients, saving both time and resources.
Most importantly, the new data capabilities opened up opportunities for future growth, enabling TotalPass to offer personalized insights that could drive additional business value.
Read next
Question about my work?
Carolina Medrado
Menu
TotalPass (SaaS)
Revamping the TotalPass HR Portal: simplifying UX and unlocking strategic value
Currently being developed
April 2024
As a Product Designer at TotalPass, I was tasked with redesigning the HR Portal, a platform used by companies offering TotalPass as an employee benefit. The portal helps HR teams manage employee access to the TotalPass benefit—everything from onboarding new users to tracking usage.
My goal was to make the portal more intuitive, visually aligned with the TotalPass brand, and valuable for HR teams by introducing data-driven features that help them measure the impact of the benefit.
Challenges
The HR Portal had several key issues. It was built on outdated systems, resulting in a fragmented and frustrating user experience. The design didn’t match the company’s branding, the user flows and the UX writing were overly technical and non-intuitive, making it hard for HR teams to accomplish simple tasks that they needed to repeat everyday, such as
Approving new employees
Managing recurrent payments
More importantly, the portal didn’t provide valuable data that could help HR teams assess the benefit's effectiveness, leaving it with limited business value.
Design Solution
I started by conducting a content audit to map out the portal’s structure, content, and hierarchy. I then ran card sorting and tree testing sessions to identify pain points in the navigation and better understand user needs.
Through interviews with HR professionals, I gathered insights on what they needed from the portal to improve their workflow.
With this research, I redesigned the navigation to be more intuitive, simplified the terminology, and streamlined access to the most used features. I also applied TotalPass’s new design system, ensuring a consistent and seamless experience across all platforms.
The redesign wasn’t just about improving usability—it was about transforming the HR Portal into a more valuable tool for HR teams. By making the portal easier to navigate and introducing key data features, we enabled HR professionals to better track benefit usage and demonstrate its impact to company leaders.
This made the portal a more strategic asset for TotalPass and its clients.
Two layers: core experience, then self-service
Layer 1 — Navigation, filtering, and the new statement
The first focus was making receivables easier to reach and making the statement genuinely useful on mobile.
Improved discoverability: Restructured entry point to surface receivables more clearly within existing navigation — less depth, same mental model.
Rich filtering on mobile: Full filter system covering payment method, sales solution, installment type, card brand, establishment, receiving account, transaction ID, and transaction type — with progressive disclosure to manage complexity.
Multiple statement views: Users switch between detailed, consolidated, and receivables unit (UR) views — matching the right level of detail to the task at hand.
Richer transaction detail: Structured detail screen with tabs: summary, identification, transaction details, transaction lifecycle, and online sale details.
Design system rollout: The entire section rebuilt on the new DS — visually and structurally aligned with the rest of the app.
Layer 2 — Self-service, anticipations, and business overview
The second focus was reducing operational dependency and creating a more strategic view for less experienced business owners.
In-app report export: Users generate and receive filtered reports by email — without any support contact. Custom filters, older periods, and large date ranges all supported.
In-app dispute flow: Users initiate disputes directly in the app — a task that previously required calling or messaging support entirely.
Anticipations subsection: Dedicated area for receivables negotiations, organized by type (internal, external, XPTO) — easy to track and understand.
Business overview dashboard: Simplified management view for less financially experienced users — key indicators in plain language, no financial literacy required.
Outcomes
The redesign led to a significant reduction in support tickets, as users found the platform much easier to navigate. Onboarding became faster and more efficient for new clients, saving both time and resources.
Most importantly, the new data capabilities opened up opportunities for future growth, enabling TotalPass to offer personalized insights that could drive additional business value.