HR Benefit 

Desktop SaaS + mobile app. Research, prototyping, interface design

HR Benefit main site →

Summary

Redesigning a bettter experience for employees and HR Managers

HR Benefit is a well-established German Start-up founded in 2020, with ambitious plans to take on the Spanish market of business benefit providers. The project brief was to design both the B2B and B2C side, standardising design and interaction patterns towards a solid and flexible platform, easy to adapt to different markets and users. In this case, the differences in labour Law between Germany and Spain meant we had to consider different flows and functionality, while keeping the overall architecture scalable, making workflows, configurations and data management work for users and the organisation.  

We conducted several Design Thinking workshops to align teams and gain better understanding of all scenarios, problems and opportunities, thus laying the groundwork for our roadmap and what to focus on.

The redesigned interface means the same library of components serves both the B2B interface (platform for HR Managers) and the B2C side of things (the mobile app where employees manage their work benefits), and HR Benefit is ready to expand building on solid foundations. 

• Consistency: the B2B platform and the B2C Mobile app have one source of truth for Dev Teams.
• Shorter time-to market and lower design costs: new features can be rolled quickly across current and future markets.
• Strategic opportunity: the ideation sessions helped alignment and understanding, to envision new functionality that could be tested and added to the roadmap in the short and long term. 

8k

Employees onboarded across 40+ businesses. 

63%

Increase in employee satisfaction vs previous interface (where applicable).

70%

Faster times to design and test new features 

My role

- Run strategy & design workshops.
- Formulate hypotheses and align stakeholders to project goals.
- Communicate with developers and understand technical constraints.
- Prototype concepts and craft full UI redesign for both desktop and mobile.

Thanks to...

Marta Sanchez as Project Manager.
Josue Roca Miralles as Development Manager.
...And the Development Team at Convotis Iberia.

Links

HR Benefit coporate site →

Alex combines deep expertise in Customer Experience with a genuine passion for what he does. He always goes beyond expectations, bringing fresh ideas, strategic thinking, and a user-first mindset that elevates every project he’s part of. 

Marta Sánchez

Growth Marketing Manager at Nitsnets-Small

The long read

You made it this far? Keep reading ↓ 

1. What I walked into

HR Benefit sought a strategic partner in Small to enter the Spanish market, after a successful run in Germany, where it manages accounts for +20,000 users across +100 businesses.

The challenges were: 

• Creating consistent interfaces for very different users and contexts (HR managers on the main platform and employees on the app).
• Gaguging information density, for some functions didn't have a consistent logic and people needed to understand why without adding clutter. 
• Money being a sensitive issue. With benefits effectively being another form of pay, design for trust was essential. 
• Language use and taxonomy, steering clear from HR or financial jargon.
• Taking cultural differences (Germany and Spain) into account for interface use and information density, etc. 

↑ The old interface relied heavily on tables and looked somewhat dated.

2. What we did

There were several parties involved without a protocol on how to work together, so we immediately addressed this as a risk and: 

• Changed the plan for discovery: we needed at least one member of each team (both Dev and Product teams, the client's German and Spanish office, as well as ourselves) in the room during the upcoming sessions to ensure alignment.  
• Set up a working group with the ability to review/approve work, and a plan to keep everyone else up to date regularly, along with preferred channels and tools.

After this we moved on to Research the competition, cross-referencing any assumptions with the team, while engaging to gain understanding of their context and business strategy.

...As part of this, we conducted five Design Thinking workshops with the client, in order to explore the challenges, gather knowledge about their target audiences, and discover possible opportunities for the future. The insights we gathered were valuable to shape foundational decisions, pointing us in the direction critcal aspects of not only the interface but how the brand fared against the competition. 

It was time to gather and define UX requirements for features and platform components: we worked closely with the Dev team to create solid flows that would be the main blueprint: even if we decided to make changes later, they provided a solid foundation.

↑ Design workshops broadened our collective vision of user needs and brought us some innovative ideas too.

↑ The main user flows were a good start in many ways, even to come up with new ideas.

Concept maps ensured we were all on the same page regarding the core logic of the main interactions, both on desktop and mobile: you want everyone to agree on the basics and understand the main interactions and how they translate across devices. 

This was crucial, we found out, to paint a more accurate picture of the interface in stakeholders' minds and secure buy-in at the prototyping stage.  

↑ Concept maps were very helpful and reassuring: everyone understood what we were trying to do.

Sitemaps helped the team align on what to place where, and make decisions on language and taxonomy.

This enabled us to move on pretty quickly into the prototyping stage to test and validate design ideas, whilst collaborating with developers (to ensure smooth implementation and support), sorting out what was feasible now vs what would be desirable in the future, as well as what wasn't really worth it, due to any constraints. 

↑ Maps outlined the main pages that each user type should see and the basic content of each.

↑ An interactive prototype of the mobile app paved the way for the UI design phase.

Moving on to the UI design stage, we created the design kit to streamline visuals across mobile and desktop.  

↑ A solid set of components to build both interfaces minimising design debt.

From here on, it was a lot easier to craft final visuals in order to gather feedback and iterate, adding new components quickly from the molecules and atoms (the basic elements) into organisms and templates.  

↑ The mobile app where employees manage their work benefits, saving up or spending as they go.

The SaaS desktop app for HR managers had a simple layout, making it easy to navigate, with hardly any learning curve:

1. The main top bar rules over all content.
2. The left side menu (icon only or icon + text) rules everything to its right
3. The main content appears on the centre
4. The module on the right can be toggled on and off, for secondary actions or contextual information

↑ The new design will scale up without friction, with consistent and familiar interaction patterns.

4. The Good, the Bad and the Ugly (learnings)

• It was a good moment to update the interface so the same library of components could serve both the B2B interface (platform for HR Managers) and the B2C side of things (the mobile app where employees manage their work benefits), using Google Material as our foundation to streamline development, as we found this would allow the Dev Team to move faster and minimise effort.
  
  
• We didn't so such a good job of educating some of the stakeholders on the different levels of fidelity of a prototpe: once they saw something that resembled a functional interface, they kept paying attention to aspects like spacing, fonts and colour (lack thereof). It was a mistake on our part not to present stakeholders with some detailed examples of what each level of fidelity actually meant, with more direction about the specific aspects we needed feedback on. At times it was hard to keep everyone focused, since they wanted to "clarify for later".
  
  
• There were conceptual aspects that weren't narrowly defined early on, specific and seemingly counter-intuitive things... That meant we had to go back and change the logic and components of some sections (such as the one to create benefit packs) more than once. 
  
  
• We had to give up on some of the development ideas for the interface, such as adding AI-driven insights (dashboard summaries), notification configuration, or the ability to transfer balance between colleagues, all of which came up during the workshops but were techincally unfeasible, either for the MVP or for later development. 
  
  
• The conversation around cultural difference turned out to be a bit of a red herring: we discussed references and tolerance to risk, but we found no significant differences when it came to the foundational elements of the interface. 
  
  
• Last but not least, and in spite of our best efforts to explain its rationale, the use of the right overlay and menu hierarchy (on the SaaS platform) was contentious at the very end: divergence of mental models had us go back to showing examples of other platforms they used in daily life to make sense of this feature. A good reminder that prototyping is always an exercise of imagination.

6. Outcomes

The renewed SaaS platform is a versatile tool with room to grow and incorporate new functionality, adapting to different territories, languages and regulation. 

On the other hand, the mobile app tested very positively with both stakeholders and colleagues at the office who had used similar applications in the past (a bit of guerrilla research on our part). The app was deemed usable, clutter-free and easy on the eye.  

Consistent design

Across desktop and the mobile app, the interface uses a minimalistic visual style that makes it easier for the Dev team to navigate and use (variables, design tokens, etc.). 

Reduced cost and timings

A consistent design kit referencing a standard component library (Material) helps speed the design of any new features and functionality. 

Solid foundations

Laying the foundations for HR Benefit to take on the Spanish market also means that, come the next market or cycle, the platform is ready to adapt with minimal costs. 

↑ The final interface of the SaaS app: a functional, useful and usable tool to manage staff benefits with little to no learning curve.  

alexnogues.com 2025-26