Afterall, nobody wants a lousy one-star app rating right?

Between April to May 2017, our team launched the first version of Funding Societies | Modalku investors’ app on both Android and iOS. From a modest group of two developers and one freelance designer, we have expanded to a fun team of seven engineers and two designers, managing seven different applications altogether.

In this article, we wish to unveil our biggest upgrade to date — along with the challenges we encountered, our approach to solving them, and the kind of impact we strive to deliver as app developers.

We hope this will be helpful to anyone contemplating a significant refactoring phase or a major design overhaul!

_{Left: previous version vs right: investor app V2.}

Challenge #1: tech debt

As we expanded, our investor base and their expectations and needs grew proportionally. What started as a lean mobile app soon evolved into a complex product which required quicker iterations and stronger feature updates.

However, our project architecture wasn’t ready to scale this just yet. To provide a little more candid context, our early application releases fulfilled just three conditions for production to take place:

• The release wouldn’t spike our crash rates to more than or equal to 0.05 per cent.
• Users would be able to invest (core functionality).
• Financial data presented on the app was accurate.

While this approach was straightforward, it brought forth a greater inclination for several workarounds to be hidden under the rug, making it increasingly difficult to build new and supplementary features.

While the project had accumulated tech debt in several measures, the ones that stood out the most emerged when we were working on massive storyboards (iOS), and huge Activities and ViewControllers.

The pain-points we faced could be summarised into five points:

• Difficulty in implementing unit tests.
• Painfully slow load times of Interface Builders.
• Conflicting constraints.
• Lack of reusability leading to code redundancy and inconsistencies.
• Impossible for developers to collaborate on UI development.

Our solution
Since our investor app caters to regional users, this would mean that there are vastly distinct user journeys that we have to keep in mind — the biggest consideration point being accommodating the differences in legal regulations, currencies, and languages across the three countries.

As such, we knew that moving towards custom labels, custom text-fields and table-views, and a specific number for matters was the way forward in fostering reusability.

With that, the next step for us was to review our project architecture and reconsider Model View Controller (MVC). We decided to go ahead with Model-View-View-Model (MVVM) for V2 – paving the path for lean activities/view-controllers and cleaner distinguishing of business logic based on a UI standpoint.

Below is an overview of our final architecture:

Broadly speaking, our architecture consists of four important layers:

1. Managers – This layer is responsible to connect with several individual components. Each component, for example, Retrofit in Android and Alamofire in Swift, is only accessible via their respective manager (which in this case will be NetworkManager).
2. Repositories – This is a very critical layer as it’s responsible for decoupling the business logic from the UI. Classes in this layer expose only relevant methods via interfaces in order to protect the business logic being modified by the UI layer.
3. View Models – Standard view models in the MVVM architecture. View Models contain all attributes that are to be displayed by the respective UI.
4. Views – All the XML, Storyboards, XIBs, and associated view classes to make the experience pretty belong here!

As you can probably infer from above, our revised architecture is not an overly-complicated one. We focused on keeping it simple so as to keep the development process efficient and easy to understand.

This architecture eventually alleviated all our pain points, empowered us to scale efficiently, and allow us to build more supplementary features.

Challenge #2: dated UI and UX

We believe it is imperative to keep up with the evolving needs of our users. A casual browse across different user interfaces of popular products will make it pretty apparent that the adoption of dark themes is on the rise.

Earlier this year, Mojave introduced the popular theme to MacOS. It was also the top requests voted by YouTube users. Moreover, Windows 10 and Android’s support for the dark theme is fast approaching as well.

The mobile and design teams identified the trend towards dark-themed applications and hugely appreciated its usability. As such, we were inspired to incorporate it into our app to enhance the experience and hopefully delight our users.

Besides ramping up on the physical appeal of our user interface, we have also introduced major changes and improvements to everything related to UI and UX.

Our solution
We can summarise two modules that went through a major overhaul below (user onboarding & portfolio management):

a. User onboarding

User onboarding on regulated finance apps can be tedious, especially when it comes with the various KYC (Know Your Customer) and AML (Anti-Money Laundering) checks, and other regulatory requirements. With such information to be accounted for, the process of even beginning to utilise the app can certainly seem daunting.

This is where we believe coming up with a considerate and well-thought user journey, and offering helpful UX-related messages, can mitigate the problem. As such, we introduced two key changes into our user onboarding process. They are namely:

1. USPs (Unique Selling Points)

Before kick-starting the onboarding journey, we present users with four key USPs of Funding Societies; in short — a ‘why choose us?’ For a relatively new financial services company like us, we believe it’s important for us to take time in establishing trust in our new investors.

2. Integrating-arrows button

With so many fields to fill in, we wanted to offer users an easier way to navigate between fields, along with a button that’s always accessible for continuing to the next step. With a traditional approach, users would be required to constantly scroll and tap.

We tried to make it more straightforward with guiding arrow buttons; all while making sure the app remains elegant.

b. Better portfolio management

1. Improving dashboards

We believe a good dashboard doesn’t only show information that users care about, but also helps them to intuitively find the data they truly need and help make these data easier to comprehend for them. While designing the dashboard, we researched in-depth to ensure that we show the right information hierarchy. We also grouped data in a more logical way.

For example, instead of showing all financial data and returns in one page, we grouped them in 2 tabs: Performance and Account. This makes our dashboard more user-friendly and helps app-users access the right information they need more effortlessly.

2. Portfolio filters

Finding specific data in a long list can be a pain in the neck. Good, functioning filter options then become the ideal solution to this problem. We designed the new portfolio filters based on our users’ job stories, and it goes something like this:

“As an investor, when it’s the [end of the month], I wish to check [all my due repayments this month] to [summarise the monthly performance]”.

By making an effort to empathize with our users and making decisions based on their point-of-view, the new filters we introduce will become more meaningful and beneficial.

In retrospect — how did it all go?

Looking back, we’re extremely grateful for having gone through this enormous refactoring phase. Having a clean code-base has significantly boosted our engineers’ excitement level in pushing forward more effective updates, improved internal NPS scores, and also increased the average number of story-points completed each sprint.

There was a direct impact on business too; our improved onboarding journey is directly attributable to a significant increase in user sign-ups and retention. If you’re considering an enormous refactoring effort while keeping the current boat afloat, we’d recommend three key principles to stick by:

1. Simplicity is underrated, less is really more.
2. Taking a step back is more often than not taking a step forward.
3. Always empathize with your users.

We hope that this article has brought you plenty of useful insights, and for the budding app developers and engineers alike, we wish you the very best in building something that is ever trailblazing and game-changing!

—

Image Credits: deagreez

e27 publishes relevant guest contributions from the community. Share your honest opinions and expert knowledge by submitting your content here.

The post Paving the journey for our app users is a rocky road appeared first on e27.