Rauva WebApp

Designing Rauva’s cross-platform responsive Web App

Device

Desktop, Tablet, Mobile

Role

Product Design Lead

Special Note

Thanks Radek for your support as a PM.

When I joined Rauva, my first mission was to address a critical mismatch between the product and its users.


While Rauva initially focused on being mobile-first, assuming most tasks would be managed on phones, this approach overlooked the fact that its user base is entirely B2B.

When I joined Rauva, my first mission was to address a critical mismatch between the product and its users.


While Rauva initially focused on being mobile-first, assuming most tasks would be managed on phones, this approach overlooked the fact that its user base is entirely B2B.

When I joined Rauva, my first mission was to address a critical mismatch between the product and its users.


While Rauva initially focused on being mobile-first, assuming most tasks would be managed on phones, this approach overlooked the fact that its user base is entirely B2B.

Challenge

Challenge

Users began to voice frustrations about performing complex tasks like bookkeeping, accounting, and banking operations on mobile:

  • Limited visibility: Small screens made it hard to view detailed financial information and reports.

  • Lack of flexibility: Managing multiple tasks at once, as comparing transactions, reconciling accounts, doing bookkeeping felt cumbersome.

  • Inefficiency: Features optimized for mobile convenience weren’t scaling well for heavier operational needs.


B2B users often rely on desktops for critical workflows, as larger screens and multitasking capabilities directly impact productivity. Neglecting this context created a gap in their overall experience. It became clear that a responsive web app with optimized desktop and tablet experiences was essential to meet user needs and resolve these pain points.

Research, Analysis and Mapping

Research, Analysis and Mapping

As the main business priority for the quarter, the focus was on the Supercharged Users Plan (the most premium plan). The goal was to map a realistic redesign without compromising the user experience, recognizing that the approach for Desktop differs significantly from Mobile.


While mobile interfaces often reduce interactions to prioritize simplicity, my challenge was to take the opposite approach: scaling a mobile-first product to meet the heavier, more complex needs of desktop users. To tackle this, I conducted competitor analysis to understand key interfaces and user journeys.


Competitor Insights

The main inspirations (Revolut Business, Finom, Wise, Tiime, and QuickBooks) offered valuable lessons:

  • Data Visibility: Prioritized clear presentation of data, making it easy to access detailed reports and manage multiple workflows at once.

  • Simplified Operations: Streamlined tasks like invoicing and account reconciliation with clear, step-by-step flows.

  • User-Centric Features: Included customizable dashboards and integrated financial tools to address specific user needs and improve efficiency.


Tools like Mobbin allowed us to navigate quickly through competitors flows to understand the journeys.

UX Patterns and User Journey Prioritization

Once the main UX patterns and journeys were identified, I refined the navigation, focusing on the most critical user tasks. Working in bi-weekly sprints, the key sections of the redesign were:

  1. Dashboard: A hub for main actions and an essential overview of the account and key tasks.

  2. Banking Sections: Features for local and international transfers, bank card management, top-ups, and transaction history.

  3. Business Toolkit: Tools for invoicing and bookkeeping reconciliation.

  4. Accounting: Direct access to accountants, with document storage and sharing through the internal cloud.

  5. Secondary Features: Support for Open Banking, multi-user access, customer support, and more.

  6. Localizations: Full journey translation into Portuguese using Lokalise, ensuring accessibility for all target users.


This prioritization would evolve through the quarter, but it was my north star to be able to deliver in time.

Design Critiques

Design Critiques

Design critiques played a key role in ensuring we moved quickly while maintaining alignment across teams and stakeholders:

  • Involved engineers and product managers early to gather instant feedback and adapt the UX/UI on the fly

  • Fostered transparency and collaboration, with team members feeling actively involved in shaping the process

  • Held bi-weekly demos with the CEO and CTO to stay aligned with business objectives and validate our progress.

  • Maintained an open communication line to tackle the product’s core challenges and set the stage for user testing.


This process allowed us to move fast and stay focused while ensuring every decision was grounded in business and user needs.

User Testing

To keep up with the fast-paced delivery, we had to book user testing sessions even before finalizing what we would present. The goal was to conduct at least three usability tests per week with "hardcore" users, some of whom were designers themselves. Their involvement made them feel valued, and they were eager to contribute to the design process:

  • Conducted 3 usability tests per week, focusing on small, specific parts of the desktop journey (mobile and tablet were excluded).

  • Organized tests by journey area: banking, bookkeeping, and accounting.

  • Categorized feedback by relevance and priority, with non-critical feedback archived in the backlog.

  • Hosted internal user testing sessions with accountants at the office to gain a deeper understanding of user needs and internal team pain points.

  • Documented findings on Notion, sharing biweekly insights with the CX team to align efforts.


While not perfect due to the speed of execution, this process was instrumental in validating the designs and refining the desktop journey, helping to create a seamless user experience.

User Testing

To keep up with the fast-paced delivery, we had to book user testing sessions even before finalizing what we would present. The goal was to conduct at least three usability tests per week with "hardcore" users, some of whom were designers themselves. Their involvement made them feel valued, and they were eager to contribute to the design process:

  • Conducted 3 usability tests per week, focusing on small, specific parts of the desktop journey (mobile and tablet were excluded).

  • Organized tests by journey area: banking, bookkeeping, and accounting.

  • Categorized feedback by relevance and priority, with non-critical feedback archived in the backlog.

  • Hosted internal user testing sessions with accountants at the office to gain a deeper understanding of user needs and internal team pain points.

  • Documented findings on Notion, sharing biweekly insights with the CX team to align efforts.


While not perfect due to the speed of execution, this process was instrumental in validating the designs and refining the desktop journey, helping to create a seamless user experience.

From Design to Development

From Design to Development

Collaboration with developers was key to ensuring a smooth implementation process and maintaining a consistent, high-quality user experience. After presenting the design handoffs, PMs were responsible for writing tickets for the developers, while I stayed closely involved to support the process and ensure alignment.

  • Clear Handoffs: Delivered designs with all necessary specifications, including spacing, components, and responsive behavior, ensuring developers had everything they needed to implement accurately.

  • Design QA: Once the front-end was ready, I conducted thorough design reviews to verify consistency and alignment with the original designs. Issues were documented with screenshots in a Notion page, complete with checkboxes to track updates and progress collaboratively.

  • Weekly Meetings: Held regular meetings with engineers to prioritize designs, review current implementations, and decide if any elements needed to be postponed. This flexibility allowed us to adapt quickly while staying focused on delivering a seamless user experience.


By fostering a collaborative workflow, we were able to address issues efficiently and ensure that the designs translated well into the final product. This process was a team effort, aligning stakeholders and developers to keep the implementation on track and user-focused.

Collaboration with developers was key to ensuring a smooth implementation process and maintaining a consistent, high-quality user experience. After presenting the design handoffs, PMs were responsible for writing tickets for the developers, while I stayed closely involved to support the process and ensure alignment.

  • Clear Handoffs: Delivered designs with all necessary specifications, including spacing, components, and responsive behavior, ensuring developers had everything they needed to implement accurately.

  • Design QA: Once the front-end was ready, I conducted thorough design reviews to verify consistency and alignment with the original designs. Issues were documented with screenshots in a Notion page, complete with checkboxes to track updates and progress collaboratively.

  • Weekly Meetings: Held regular meetings with engineers to prioritize designs, review current implementations, and decide if any elements needed to be postponed. This flexibility allowed us to adapt quickly while staying focused on delivering a seamless user experience.


By fostering a collaborative workflow, we were able to address issues efficiently and ensure that the designs translated well into the final product. This process was a team effort, aligning stakeholders and developers to keep the implementation on track and user-focused.

Component Library Update

Component Library Update

During the design process, it became clear how essential it was to unify the component library. The WebApp redesign, with its refreshed interface, required a significant number of new components.


To streamline delivery and enable rapid iterations:

  • Components were first created locally and then imported into a unified component library.

  • We consolidated five separate component libraries into one, simplifying development and maintenance.

  • Over 50 new components were built, following an atomic design system to ensure consistency and scalability.

Results and iterative process

Results and iterative process

By the end of the quarter, we successfully delivered all the new designs as handoffs. However, during implementation, the speed of execution revealed new problems, and broader UX issues emerged that needed to be addressed.

  • Moving quickly helped us deliver key areas of the product, but for a project of this size, it was risky. Taking more time to identify problems, audit the entire journey, and understand user needs deeply might have led to a more polished and cohesive redesign.

  • Despite the challenges, we conducted a soft rollout of the desktop web app, which received extremely positive feedback. Users appreciated the seamless, unified experience, and data showed that 24% of users transitioned entirely from the mobile app to desktop within the first month.

  • Over the following months, we prioritized improvements and added new features based on the roadmap, continuing to identify and solve additional issues.

  • A key limitation was that the mobile app didn’t undergo the same component refresh, as the engineering team was stretched too thin to handle both simultaneously. This resulted in inconsistencies between the desktop web app and mobile app.

  • Next steps included creating a seamless onboarding journey in collaboration with the marketing team.

  • We maintained ongoing user testing and worked closely with the CX team to gather feedback. Encouragingly, most tickets were related to missing features or technical issues, showing the core design was meeting user needs.


While the process was not without its challenges, the rollout of the desktop web app marked a significant step forward in addressing user pain points and laying the groundwork for continuous improvement.

By the end of the quarter, we successfully delivered all the new designs as handoffs. However, during implementation, the speed of execution revealed new problems, and broader UX issues emerged that needed to be addressed.

  • Moving quickly helped us deliver key areas of the product, but for a project of this size, it was risky. Taking more time to identify problems, audit the entire journey, and understand user needs deeply might have led to a more polished and cohesive redesign.

  • Despite the challenges, we conducted a soft rollout of the desktop web app, which received extremely positive feedback. Users appreciated the seamless, unified experience, and data showed that 24% of users transitioned entirely from the mobile app to desktop within the first month.

  • Over the following months, we prioritized improvements and added new features based on the roadmap, continuing to identify and solve additional issues.

  • A key limitation was that the mobile app didn’t undergo the same component refresh, as the engineering team was stretched too thin to handle both simultaneously. This resulted in inconsistencies between the desktop web app and mobile app.

  • Next steps included creating a seamless onboarding journey in collaboration with the marketing team.

  • We maintained ongoing user testing and worked closely with the CX team to gather feedback. Encouragingly, most tickets were related to missing features or technical issues, showing the core design was meeting user needs.


While the process was not without its challenges, the rollout of the desktop web app marked a significant step forward in addressing user pain points and laying the groundwork for continuous improvement.