A scalable banking interface
Turning a banking experience into an app, consistent over mobile and desktop
2020
The mission
Creating a delightful banking experience over multiple touchpoints
In our collaboration with European bank NIBC, we quickly realised that they did not just need an app, but a global approach to their design system. That system would allow NIBC to bring multiple visions, different products, and ways of working together to create a pleasant experience on all touchpoints. For this project, we worked together with the Dutch as well as the Belgian NIBC division.
- Project
- Banking Application
- Deliverables
- UX, UI, Front-end development
- Partners
- District01
Our work for NIBC encompassed a focus on user experience, which resulted in lots of user testing, communication between the different stakeholders, and co-creating with other tech partners. The scalable design system allowed us to create a smooth user experience and to transfer it to desktop. We wrapped up the project by delivering an extensive and easy-to-use style guide and front-end development.
A strong mobile-first experience
Before we could start creating the new product, we had to figure out what the best user experience would look like. That’s why we mapped the required UX systems and user flows extensively.
User testing and gathering lots of data
After mapping those UX systems, we began the user testing process, which took a few days at the The Hague headquarters. In this way, the people at NIBC witnessed why we conduct user tests and how we collect data. We gathered as much information as possible, interpreted it, and iterated on the app with new insights in mind. We often exchanged feedback and made sure communication went smoothly so all the stakeholders would be on the same page.
Communicating via animated interface
Together with NIBC, we decided to turn the animation volume a notch by weaving all screens together and adding details. In this way, we created a delightful, enjoyable experience for the user. The vivid animations bring the interface to life and give the app extra charm.
A consistent design system
Our design systems focus on power and flexibility. That is exactly why we used a modular design approach with lots of components, which could be split up into other reusable components. This system also allows us to add extra functionalities and create a consistent experience. The result is a flexible design system that was initially created for mobile purposes but could be expanded to a desktop experience too.
Co-creating with tech partners
Together with District01 we worked on front-end development and slicing, which means dividing a single 2D user interface composition layout into multiple image files. Our technology-agnostic approach led to more freedom for NIBC to decide whether they want to create a hybrid or react app, for example. The design we provided can be implemented as desired by NIBC. Next to that, we also developed a style guide that allows for easy communication between us, the people from NIBC, and our partners.
A flexible desktop version
We initially adopted a mobile-first mindset because NIBC asked for a mobile app. At one point in the project, though, we decided to take the experience to a higher level by including another important touchpoint. We rebuilt the desktop app because the people from NIBC were delighted with the mobile version and they knew a desktop version would prove its importance to NIBC's customers. Thanks to our flexible design system, we could quickly provide an answer to their need and translated the mobile into a desktop experience.
