Date: 2019-2020

baVel is a digital platform that connects the billing and payment ecosystems of the tourism industry. It is present in more than 100 countries. More than 50,000 hotels, DMCs, Bedbanks, travel operators and travel service providers use the platform to automate their billing and payment procedures.

This case study talks about how we improve the design, usability and interaction of this product, doing a heuristic analysis, investigating and establishing the main UX processes along the way.

My role
Collaboration with
Success rate
  • UX Designer
  • UX Research
  • UI Designer
  • UX Research
  • UX Design
  • Development team
  • Business Stakeholders
  • Sales team
  • Ends Users

SUS Score (research still ongoing)

80

Background

BaVel develops technological solutions in B2B payments, electronic invoicing and VAT recovery. When I joined the UX department, it had just been created, and UX and product decisions were made by the business stakeholder board and the Product Owner.
There was no design system, no research processes, no design frameworks used, no metrics. Design Thinking were very new words within the company.

The baVel platform is a solution that helps its clients receive 100% of their electronic invoices and thus reduce the cost of processing them in any format used by the provider and of the billing processes for each country, region or type of product. In addition, the client receives the invoices automatically in their ERP.

I focused on the Digital Archive section of the platform. This is how I found the product:

The baVel platform at the end of 2018.

Analysis

As we can see, BaVel had a product that broke with almost all the principles of Heuristic Analysis:

 

  • Visibility of the system state: the system is not offering information about the actions that are happening.
  • Freedom and control on the part of the user: there are not enough emergency exits for the errors of the users.
  • Consistency and standards: clearly the system is in the past in terms of current usability standards.
  • Error prevention: different paths are not foreseen in incorrect actions of the user.
  • Recognition before I remember: the system does not offer to make previous searches visible to help the user to remember the information.
  • Flexibility and efficiency of use: the system does not offer an advanced system for an experienced user.
  • Aesthetics and minimalist design: In general terms, the system does not have an aesthetic adapted to the new design standards.

Also, the information architecture was messy:

 

  • One of the main searches was to search for invoices by reference number and this was not very accessible to do the search.
  • Searches by dates, also a main action, were not in the same hierarchy level.
  • In the results. You couldn’t take a quick look at the found invoices. You had to download the PDF first to look at it.
  • In the results it does not show you the type of document it found.
  • The logout button did not have good visibility and it does not offer you the option to change from user to property in case it is a specific Hotel.
  • The settings were within the page in the side menu and this type of information did not belong to this level.
  • The main blocks of information are stacked in a single column. This is because the design was not intended for different screen sizes.

Conclution

After the Heuristic Evaluation, the proposed solutions were:

  • Restructure the information architecture, ordering the most relevant elements at the beginning of the search.
  • Improve user navigation by adding autosave in boxes. So we don’t need the generic save button.
  • Add a clear filters button to redo another search.
  • Add to the user session the possibility of changing the account to Property Account and logging out of the same module.
  • Differentiate two types of search: basic and advanced, according to the user’s needs.
  • In the search engine add the document type and status filter.
  • In the list of results add the document type column.
  • Change the design to conform to current usability standards and fit the new visual identity of baVel.
  • Place the settings on a separate page accessible through the header.
  • Add smart information fields. When we enter incorrect information, the line changes color to red to notify us of the error.
  • Improve help messages in content and location.
  • Add tooltip with help.
  • Make documents visible without downloading them.
  • Adapt the design to a modular structure to better fit different screen formats.
  • Activate and deactivate the fields according to the type of search.

I proposed to carry out a SUS (System Usability Score) analysis after all the implementation of the improvement proposal and the score was at least Good (67 – 80).

Challenge space

baVel had planned this project for 6 months, but the old platform had to continue working and the development team could not neglect the daily tasks of supporting the system, so it was expensive to change the entire platform since we had only one very busy development team . What we decided to do instead is have all the above things in the backlog like UX Close gaps and have a commitment to develop one of them per sprint.

It took quite a long time, the planned 6 months and the first months of 2020, but finally all the objectives were achieved.

 

The product now:

 

The first thing you see when you enter is the search engine with the reference number, the date and the type of document that is the most important. You have the option of advanced search and clear filters to make new searches.

 

The configuration section has its own page. In the top menu, next to the user’s account. And the user account has the option to change user type. Also now view the documents without downloading.

The system offers you automatic validation of the information entered by the user. Showing if it is correct or incorrect with a red line. In addition, we offer help with tooltips.

Design system

In 2020, in addition to improving heuristic usability, we worked on many product features and developed the layout system, which also helped us maintain consistency and introduce standards across pages.

Metrics

After all the improvements made, the sales team always came back with qualitative feedback on how users loved the new tool and how it is easier to get customers. BaVel’s usability and user interface set new standards in the B2B travel market for competition.

Google Analytics shows that there is more use of the tool compared to when this project was launched a few years ago: more pages are viewed, users spend more time on the tool, less bounce rate.

Back to index