Noobill App UI Design

 
Noobill Logo.jpg
 

Challenge:

To materialise an app that empowers people to take control of their bills and helps them save money on services.

Noobill is an app born from the idea that everyone should be able to easily understand the costs of service providers with full transparency. 

In its early days, this app is thriving to change the way people subscribe and pay for services.


Goals:

– Translate the wireframes into a final pixel perfect interface.
– Create a design library to guide front-end developers when building the app.


 
 

My Role:

I led the design process end-to-end working directly with the startup founder and alongside the UX Designer, supporting them in the early stages of the design process all the way to delivery.

I also, led a talented Junior Designer Ivana Galic who worked on the creation of the design library and the app’s UI.

Detailed view of several app screens

Detailed view of several app screens

 
 
 

THE PROCESS:
 

Mapping Out The App

Once the wireframes were completed, we took the wireframes and mapped them into comprehensive journey flows to understand how each screen fitted into the overall experience.

Detailed view of an initial map used to describe the app architecture

Detailed view of an initial map used to describe the app architecture

 

Colours & Fonts

The design process began by defining a suitable colour palette and a font family to use across the app. In order to ensure we were making the right choices we tested and compared them first before making a decision.

Detailed view of colour/font choices

Detailed view of colour/font choices

 

App Assets

Once the basics were defined, we began by deconstructing elements within the app and its features in order to understand the different assets that needed to be designed and documented in the library.

Detailed view of one of the app assets

Detailed view of one of the app assets

 

Design Library

Once we had defined all the assets to be designed, we began to build the entire library and several of the most important screens. 

Keeping in mind the design library would be the guide for developers when building the app, we streamlined the design process by focusing only on assets instead of screens, spending less time in the design phase.

Detailed view of few assets in the design library

Detailed view of few assets in the design library

 

App Flows

The final step, before handover was to map out all the screens, including wireframes, and the previously designed screens in order to understand which screens were complete and which ones would need to be constructed during development.

Detailed view of one of the app flow

Detailed view of one of the app flow

 

THE OUTCOME:

In the end, our approach to design gave Noobill the ability to move to development faster, cemented the foundations of the product and helped them reduce friction and challenges often found by developers during the build phase.

Detailed view of final app and design library

Detailed view of final app and design library