Brave Concept

Before there Brave, I had started working on a very similar project. What I wanted to prove was that there was another experience possible to navigate sites. For that I started to create some prototypes Sketch and then implemented it on Electron and React (Brave today uses a similar stack of technologies).

Once Brave came to light I decided to start working on the draft and implement them the idea I had. While this was a side project, it helped me to learn React and best practices and frontend development.

While researching browsers I felt very frustrated because I could hardly understand the codebase of Firefox or Chromium. From the technical point of view, I think the stack Brave is using is excellent for designers and developers to easily join.

I think in the Web Browser market there is still much to innovate and Brave took a good initiative. The same on the market on which consume advertising. Plugins like AdBlocker today are blocked by sites like Wallstreet Journal and New York Times.

Auth0

Late in 2013 I was fortunate to join Auth0 as the first designer in a team of 5 people. Making such a challenging product as Authentication was an amazing experience for any designer.

During my time I could design and develop the brand of the company, its website, Dashboard, Webtask, Passwordless, Guardian, Lock, and its design system: Styleguide.

Visit website

Dashboard

This is main product of Auth0 as platform. From this product Auth0 users can view reports, user activity, social providers to register Facebook or Twitter and Google Apps enterprise providers like or Active Directory.

Layout Explorations

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Sidebar
Fullscreen
Compact

Onboarding

One of the most interesting part of this project was to create the onboarding experience.

The strategy was, instead of creating a parallel interface to show how Dashboard works, what we did was to show the interface according with the level of activity of the user.

Lock: Login, Passwordless and Multifactor

The goals was to give user an amazing login and signup experience at the same time we allow customization, multilanguage and a responsive experience.

Proportions

When we started, our first version was very simple. A white form that allowed you to change the icon with your companies. As long we added more features, this widget was not prepare to scale and broken things started to show up. Also, the mobile experience was rudimentary since it was made desktop first.

UI Kit

One day, I decided to collect all the feedback from customers and my personal experience with this project to make a new version.

Login / Signup
Passwordless
MFA

I did some sketches with my ideas and I made a design system for Lock to scale. Then I coded a simple HTML/CSS3 version of Lock without functionality. I simulated states (success, error, pending) with jQuery and when it was ready, I sent it to our frontend team.

Styleguide

During my time at Auth0, one of my greatest challenges was to create a unique design system that could scale to the rest of the company.

Styleguide helps users to understand the product and designers to not reinvent the wheel. To achive that, I designed and implemented the Design & Frontend framework.

Visit website

Frontend Framework

The purpose of this tool is to provide engineers and frontend engineers all necessary variables to build pages and user interfaces without making each company every time.

Design Framework

Sketch document with all specifications typography, primary colors, secondary colors, banners, icons and user interface components. Saved to dropbox and accessible by the entire team.

Typography
Colors

UI Components

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Componets Set #1
Componets Set #2
Componets Set #3

Themes

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Cards - Light
Cards - Dark
Hero - Light
Hero - Dark

Webtask

Webtask.io allows you to build applications without thinking about infrastructure. Simply write your server-side logic, deploy your functions via the Webtask CLI, and access your serverless backend over HTTP.

Preferring code to configuration, the Webtask platform comes with a familiar programming model, excellent authentication and authorization support, and more to ensure a pleasant development experience.

Visit website

Passport.JS

Passport is authentication middleware for Node.js. Extremely flexible and modular, Passport can be unobtrusively dropped in to any Express-based web application. A comprehensive set of strategies support authentication using a username and password, Facebook, Twitter, and more.

Visit website

Gitlab

In early October 2013, I saw a link on HN to a project called GitlabHQ. was interested from the beginning in finding a replacement to the expensive Github.

The project was solid from the programming but insufficient in the user interface and thought I could help and improve the problems that Github has.

One of the most interesing things about this project was the retroalimentation with Github. If we've got inspired by them, Github applied some changes to its UI post when Gitlab came out.

Gitlab joined YC last year, and it was very inspiring for me to see in the Demo Day, the UI and the logo I worked on. Today Gitlab is a growing company in its Series B.

Visit website

Auth0 Homepage

One of my first projects at the company was to work on their website. At the time the company how they would approach users in terms of marketing.

We tested different approaches, like having two options on the main hero, one for enterprise and another for developers. But it didn't last much because it was very confusing.

Rapidly, we changed the approach and we decided to have an inner page for Enterprise, and we used the homepage to hightlight the most important of Auth0 in terms of Products and releases.

The latest interation explains Auth0 in 3 sections: Hero (with all the value prepositions), a quick demo of all the products (Lock, Passwordless & Rules) and the bottom part showing support and documentation.

Interaction is one of my favorites approach for marketing design, we featured 3 products with a Live demo. Live demos of your product tells users a good idea of what you are offering.

Visit website

JWT.IO

JSON Web Token (JWT) is a JSON-based open standard (RFC 7519) for creating access tokens that assert some number of claims.

For example, a server could generate a token that has the claim "logged in as admin" and provide that to a client. The client could then use that token to prove that he/she is logged in as admin.

Visit website