olá wolff: online accountant service

Within the startup I was in a privileged position where I managed to put the idea of reducing the bureaucracy of opening a company in less than 24 hours in practice. See how was the process of doing this and still guarantee an excellent user experience.

Olá Wolff, cutting red tape with a chatbot

The world is constantly changing, every day new ideas and new technologies are born that help us in our day-to-day lives, Olá Wolff was no different, he came to facilitate a lot, especially the process of starting companies.

It is a service, based on artificial intelligence, to accelerate the process of opening companies, solve the doubts of entrepreneurs, streamline bureaucratic aspects and carry out the business constitution.

The function of Olá Wolff was to collect all the necessary data from the entrepreneurs to be processed quickly and accurately for the opening of the company allowing an almost instant formalization for MEIs and in the future other types of company.

brand & guide book

Originally created to represent a chat, the brand had an excellent evolution placing a softer font and using a gradient with the colors of the nasciona flag.

The key point was the comma. We wanted to create the impression of a conversation being started and ended up using the comma with the icon of the entire project.

The brand went through the registration process at the INPI, a complete brand guide was also made as shown below. Click on the image to expand.

Cristian Sales, the communicator

At all times during the project, we knew that the human-robot interface might not be the most efficient, so we decided to create Cristian Sales, which would give a more humane vision to the whole process. He is the pseudonym of Wolff, a character to do all the communication on social networks and email marketing that would allow a quick and efficient communication with the world.

Since the name Olá Wolff came from the character of Ben Affleck from the film The Accountant: Christian Wolff. We simplified the name to be easy to read and simple to write, in addition to adding a touch of Brazilianism with one of the most common surnames in Brazil, which also represents the word sales in English.

Some other names and surnames were in our research during the development of the character, however this was the winner. I believe that if it were today we would have the name Cris instead of Cristian to be a genderless name.

Chat user experience

The chat was probably the most important part of the entire project. Several versions were developed and several improvements over time. The importance was given because we wanted to give the impression that someone was really answering the questions, without seeming forced. We wanted to have an experience already known by our target audience, MEI workers who could either be familiar with the media, or be new to the internet.

Easy access for each persona was essential. Another detail is that we needed to convey an image of reliability and security, in addition to an issue of data privacy, since we were hanging very sensitive data. Data validation was another issue that was brought up in the chat - because we needed to ensure that the data provided was right to go after the formal process of opening a company after the completion of the opening flow.

The chat front-end was developed with React and communicated with Azure cognitive services and our internal API for information other than dialogue. We launched the project as an open-source under MIT license.

veja o projeto no github
Real image of the product under development in a mobile view

Chat features

Discover some of the most challenging functions to create an excellent user experience within the chat for our personas.


Proximity to the user

When entering the name, the chat showed the user's name under all the messages sent by him, as well as the avatar received the initials of the name to make the conversation more intimate and personal. Similar to what current messengers already do.

And in addition to that, we have the time being presented together with the message, to assist not only in the audit process, but so that the user has the feeling of control seeing the time spent on the messages.


Wolff is typing ...

A balloon was presented to the user saying that Wolff is typing to impersonate Wolff creating even more empathy.

This function created a delay between when Wolff responds and when the answer actually appears on the screen. This delay is calculated by the number of characters in the message. We did a study to understand a person's typing speed fast: in this case 6 characters per second.


Message status

With the message status we wanted to inform the user about her process. We had three status stages: sent, received and read. One clear ball to be sent, two balls (one green and one clear) to be received by Wolff and two green to determine that the message has been read and is already processing the response.

Basically, when saying the message was read, the answer was already on the user's computer waiting to be presented.


Making terms more accessible

The way Wolff talked needed to be accessible, not least because the way to make the whole process less bureaucratic came from the complication of the accounting, legal and official terms of a company opening process.

We had a UX Writer to help in the formulation of the dialogues, but sometimes, we needed to present a little more information, so some messages contained a balloon with them.

Backend, backoffice & pipelines

Work with the Board of Trade and public bodies

The project never had political positions, but we needed to be talking to the cities and assisting in the digitalization process, from mapping the city streets to a digital operating license, to integrating city hall systems, for once with a license, to already receive the access for issuing NF-e.

Backoffice

An important point was that when choosing Microsoft's Bot Framework, instead of other competitors, we did not have an easy interface for editing messages by those who are not developers. Building a back office that allowed it was essential. We also saved all user data there.


Content migration

With several environments being developed at the same time, and a different workflow on the part of the dialogs, a content migration mechanism was implemented, so the dialogs that were in production could also arrive in development, and vice versa. The back office system also allowed you to choose which environment you would be editing.

Build and release pipelines

For everything to work perfectly, we had some projects that were integrated at the time of a release: a chat in React, a CSS framework, a portal and an API in dotnet, a WordPress blog and the backoffice. All with development, approval and production environments.

What draws the most attention was the project's agile need, which, all together, allowed for requested changes and adjustments to be implemented in the various environments en route to meetings with the city hall and / or deputies.

vítor norton

I have this passion to create new things. I do not care if it’s a software, whether it’s a book or something design. I just can not stop creating, I can not stop imagining. I create stuff up for living.

Web and Windows developer for 9 years, I have been awarded 4 times from Microsoft as must valuable professional (Windows Insider MVP), In addition I'm passionate to learn more about new tech.

check my LinkedIn profile;

vtnorton for business

Boost your company's processes and methods. We offer the solution that your company needs: system or consultant, in the right measure.

see_more;

for-devs content

Are you a developer, like me? Here you have livecoding, articles, events and much more. We are among friends here.

see_more;