Nobe

Making mexican lifes 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 become.

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.
Problem
Solution
There are too many complicated steps to create an invoice on the government website.
With the Nobe dashboard there are only 3 steps to create an invoice.
The current government website is slow.
A dedicated server was used so the creating of task is fast and reliable.
The government website does not work on mobile.
The new dashboard has dedicated experience for mobile.
I'm not sure where to click to do an specific task on the goverment website.
All the features on the Nobe dashboard are easy to use with the experience tested with real users.
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.
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.
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.
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.

“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.”

Thomas Dobereiner
CPO & Co-Founder, Nobe
Some articles you may enjoy reading

Dribbble

Playground for all sorts of projects

Poesial

UI/UX – E-Commerce
2022
UI/UX – SaaS Dashboard
2022

Nobe (Saas)

UI/UX – SaaS Dashboard
2022
UI/UX – Website
2021

Awari

UI/UX – Website
2021

Netflix

UI/UX – Concept App
2021

Booksprout

UI/UX – Website
2020

Moments

UI/UX – Concept App
2020

HungryButton

UI/UX – Mobile App
2019

Ordine

UI/UX – Concept SaaS Dashboard
2018

OLX

UI/UX – Redesign Concept App
2016