When Greenstep approached us to rebuild their expense claims management app Bezala, we were thrilled. Greenstep has been a longtime customer and we were excited to work on Bezala, an app which solves a struggle we are quite familiar with: getting employees’ (lots!) of unfilled receipts into accounting.
Bezala, previously known as ReceiptCam, had been in use for a few years already. However, the app's architecture proved inflexible and made building new features difficult. Therefore, our suggestion was to rebuild it from scratch. We did not take the decision to start over lightly, though. Such a complex structure meant starting from a blank canvas (code wise). The main reason for this was to be able to change the application framework to React Native, enabling rapid development plus cross-platform capabilities.
When we had made all the main technology-related decisions, we moved forward with planning the application. From a design perspective, the main goal was to improve the app's ease-of-use.
For the first version, it was clear to us that we had to deliver an easy to use interface quickly, without spending too much effort on nitty-gritty details of the visual appearance. This way, we could get user feedback as soon as possible and progress from there. Our component library of choice was nativebase.io. Its native looking components allow us to quickly create and prototype the interface with a shallow yet redux only backend in place.
App Development Highlights
We built the application in tight collaboration with Greenstep’s team. We ran weekly meetings updating on the progress, following an agile method. Most of the application development went smoothly with the usual hurdles and challenges. However, some hurdles are bigger than others. When building React Native applications you try to use as many pre-built components as possible, to be able to progress rapidly. In our initial planning, we had chosen a navigation package that worked well, to a point. Halfway through development, we realised that we had a conceptual problem with the way we handled the deserialization and serialization, and the application state. This meant that we had to reconceptualise and rebuild the whole application state (a global object, which holds a whole copy of all data locally available for the application) in the middle of the project. This was time-consuming and frustrating, and of course, we also rebuilt the navigation on the side, based on another package that suited our needs better. Thankfully, we timely noticed this insufficiency and were able to fix our problems before launch. This rebuild also enabled us to structure our code in a better way to ensure having only one source of truth for data propagated throughout the app's components of the application, but also to refactor a big part of the application in the process. This made further development smoother and way easier to debug.
After several iterations working closely together with Greenstep's team, we started connecting the app with the API from Bezala and worked together with the great developers of the Bezala server-side to implement new features with changes needed on the API.
Launches are interesting. They can be extremely dramatic and exhilarating or calm and mundane. The Bezala launch was the former. When the app went live, we noticed that a considerable amount of users were unable to log in to the app due to an error. First-impressions are important, especially with applications and fortunately, we were able to fix the error within an hour of us noticing it.
Moving ForwUI/Moving Forward
We are currently in the process of doing a UX redesign of the application. The current version follows best practices and is adequate from a users point of view. But following best practices is not always the path to the most intuitive user interface, and we realised this when using the app extensively ourselves. The addition of UX designer Alessia to the Bezala team enabled us to build a prototype that impressed Greenstep's team to such an extent that we are now also in the process of rebuilding the online version of Bezala at bezala.com.
Discover the Bezala case study here.