Nobe
Making Mexican lives easier when it comes to bureaucracy
After getting hired to work on the marketing website, I also got hired to work on the Nobe product. The goal of the project was to create a platform to make bureaucracy easier and faster for people in Mexico. It was an amazing product that I'm proud of how it turned out.
Do you live in Mexico? Create an account now!
Year 2022 – Scope of work User Interface, User Experience, SaaS Dashboard, Icon Design – Duration 5 months
–
Let's get started
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.
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.
–
Everything that we need to get started
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.
–
Wireframes and user flows
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.
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.
–
Design with purpose
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.
–
New visuals with a familiar face
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.
–
Custom icons for Nobe
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.
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.
–
For every break-point, I got you!
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.
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.
–
Nobe's style guide
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.
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.
“Working with Victor is how you imagine every work should be. He truly is a senior designer that understands what you are trying to achieve and delivers it in a beautiful way. No wasting time explaining trivial things, focus on the objective of what’s happening and he delivers it.”
