From the start, there were a bunch of problems Nobe was trying to fix and that was no easy task especially when the problems come from the Government's website which people have been using for a long time.

It was a hell of a challenge to create something basically from nothing only relying on a text document and the original website to get a starting on what to fix and what to completely redo.

To get started with the project I created a sitemap to organize all the screens and flows that I needed to create. The sitemap looks simple but everything important to the creation of this project is listed below.

I started creating simple wireframes to get initial feedback from the Nobe team.

There was a lot of back and forth to get to the point of approval and I'm really happy with how things turned out. For example, to get to a final version of the invoice creation I designed 5 previous iterations to get to the point where the flow felt flawless and ready for UI.

There was also the comparison below between the Government website and the Nobe wireframe so you can see the type of problem that I and the Nobe team had to fix.

The UI had a lot of moving parts that needed to be addressed to everything feel cohesive and with purpose.

The designs created based on the approved wireframes were done with a lot of care and attention while focusing on solving the problem and being nice to look at it.

The screens you see below are only 10% of all the work that was done on this project. At the end of it, there were 60+ screens created to fill every flow and situation.

Since I also created the marketing website, this project needed to have the same look while having its own identity. I expanded the color palette a little bit more to accommodate additional colors for error, warning, and success messages, used the same font that was used on the marketing website, and created tiny faces to illustrate each type of warning message.

I designed a good amount of custom icons for the dashboard, they all have the same style and they can be easily changed on the style guide that was also created using Figma.

There are two types of icons, the system icons that I used a 2px stroke and the icons to illustrate titles on the dashboard that also have a 2px stroke with a circle colored background behind it.

This project was a huge challenge especially when I got to the mobile designs.

There are a lot of tables and information on the dashboard that needed to be fitted into a small screen. I used the principle of the importance of hierarchy when I was designing the mobile version and that mindset allowed me to make careful decisions on what to display first on a screen.

The screens you can see below are just a fraction of all the designs that were made for this project.

Since this is a big project a style guide was a no-brainer to be created so the styles are all organized, and scalable and I don't need to create the same button over and over again.

The style guide was created using Figma which allowed me to easily update when I had to and to give the client the ability to scale this project even if they decide to hire another designer to work on it.