top of page
Frame 1.png
Building Otto's app from scratch

Having the opportunity to be the first UX Designer in a well-funded, design centered startup is incredible.

 

In the year of 2019, I was invited for this role. We assembled a small team, consisting of 3 developers, our CEO, our CPO, an UX Designer (me!) and an UI Designer. Back then, we didn't even have a name for the product - and we also didn't have ANY product at all, just an idea.


Otto was born to help out real estate agents to sell more and to sell better. Initially focused on high-end real estate, we are bringing the whole experience of the sale journey to an app, where the real estate agent can have everything that he needs right on his cellphone - and more recently, on his computer too.

 

Otto was named after the number "8", in Italian: this number means prosperity in several languages, and this has always been the focus of this product, bringing prosperity to everyone involved on it, from the small team taking care of it to the real estate agent who can make better sales using our product.

IMG_20190906_103105.jpeg
Screen Shot 2021-03-15 at 17.53.17.png

A picture of us deciding on Otto's branding and the results we got!

First steps:
 Research 
 Interviews 
 User's journey mapping 
 User testing 

When I first got to Otto, a little market research had already been carried out, as well as a small benchmark. We used this as a basis to draw a roadmap of everything we wanted to do. One important point was to better understand the real estate agent's journey on a sale to be able to work on things that actually matter, and in the order that we perceived them as important.

So, this was the first design task. We went on several interviews with real estate agents to attain a better grasp of their processes and what were the biggest issues they were facing for cleaner and simpler sales. This happened through a series of semi-structured interviews, where we were able to speak with several real estate agents.
 

Group 345.png
Group 346.png

In the first picture you can see me conducting a user test, while on the second one you can see us building a user journey on the wall while we interviewed some users. In the second picture you can also see the real estate agent showing me the type of material she would design and print to showcase realties to her clients. Super valuable information!

Main issues we discovered with the research:
Group 3.png
All the information that the real estate agent needs to make a successful sale is spread across too many different platforms
Group.png
The information available to the real estate agent is very different from the one their clients want to know about
Group 5.png
Most of the real estate agents don't have good mobile or desktop equipment
Group 4.png
The sale journey has a lot of different steps and all of them seemed to have their own group of problems to be solved

With these interviews, we were able to assemble a complete user journey for the real estate agent.

The first step of this journey was what we called the "Discovery". Once a client approaches a real estate agent, she needs to find a realty that suits the client's requests and needs. How can we help the real estate agent to not only find the best realty for her client, but to also have access to all the information she needs and to easily share this with the client? Once we had this clear goal in mind, we decided to deep dive into the possible solution for it. Some of the solution requirements were:

  • We had to take into account that most of the real estate agents would often need to uninstall an app in order to install a new one. This was a super important point, the technical solution needed to meet this necessity, and one of the key points in our solution was leaving the information about the realties online, so the user wouldn't need to download it on her cellphone in order to share it with the client.;

  • Finding out the exact information the real estate agent needed in order to meet her clients' requests was essential for us to properly define our information architecture;

  • Easy navigation between realties and tools to make specific searches, such as being able to look for realties that are in specific stages of construction or by infrastructure, for example, if they have a pool or a garden;

  • The majority of the real estate agents used Whatsapp to keep in touch with their clients - we needed to provide easy sharing of the information contained in Otto through this app and some others.

We worked around 3 - 4 months on a cycle that looked like this:
 Research 
 Interviews 
 User testing 
 Wireframing 
 Prototyping 
 UI Design 
 Asset delivery 

Interviews: we would talk to real estate agents to better understand some of the key points we were trying to bring into the solution;

Wireframing and prototyping: I would get involved in most of the interaction design of the solution, creating wireframes and prototypes in medium and high fidelity. Our target user had some issues understanding low-fidelity prototypes, so it was important that the prototype felt like a real app.

User testing: with the support of the product team, we would test almost every idea we got. 

Iteration: Most of the times, the user testing would result in some changes to our initial idea. We would usually share all of our findings with the team and adjust what was perceived as important on the prototype. If required, we would test again.

High fidelity design: Our UI Designer would be responsible for the high fidelity design, but I would also get involved with it because the amount of work was high. She was responsible for the creation of Otto's style guide, which made the work much easier with time.

Asset delivery: All of our app was designed on Figma, and we agreed with the developers to utilize it as the tool for the asset delivery. We would also hold meetings to explain what were the expected behaviors and how we had thought out the feature as a whole before delivering anything.

Development and delivery: Once the feature was developed and went into production, we would carefully monitor the user's reactions to it. We got constant feedback and were able to adjust everything that was necessary.

This allowed us to test many ideas out, and helped us to establish a great relationship with several real estate agents, who became a fundamental part of our work. Our access to our users became really easy because of this. Here are some of the design steps from these months:

Frame 2.png

Very early-stage interaction flow - we abandoned most of the ideas you see here as we got a better grasp of what we needed to fix.

Group 348.png

Here are some of the many screens we used for our prototypes. This is pretty similar to what we have currently in our app.

Beta testing and final solution
 Beta testing  
 Iteration 

At this point of the product, we still didn't have any real users - our startup had been well backed financially, so even though this was a worry, we could still test out many things before putting them up on the market. Eventually, the day arrived and we began a "beta testing" program with around 200 real estate agents.

 

We still weren't using many data metrics and focused on a more qualitative answer to what we had delivered. So, talking to the real estate agents was part of our daily life, as they began to use the app and sharing questions and feedback.

I am writing about this project around one year and a half after the beginning of it.

Nowadays we have more than 4.000 users, several clients and we also established our business model. Our app is fast growing and we are already present in several Brazilian cities. This all was made without a marketing team, paid ads or anything of the sort, in a really small team (today we have 12 people working in our company).

 

Here are some of the screens we are currently using in our app:

otto-mock-up.jpg
Group 519.png
bottom otto.png

What I learned from this project?

It was an incredible experience to build an app from scratch and I am very thankful that I had this opportunity. I learned a lot from it, and here are some takeaways:

It's very important to understand and learn to recognize what are your clients' wishes towards your product and your actual users' wishes. We stumbled upon this issue several times, specially regarding the information topic: What the real estate agents needed to know about a realty was definitely not what the real estate developer provided or believed that they needed.

Working on a team that understands the need of thinking about design from day one makes all the difference. We were able to make a really useful app without facing the issue of having to redesign it years from now, because it was built upon user insights from the start, and not on founders' gut/feelings.

 
The work of an UX Designer is different from the work of an UI Designer, but both need to know a lot about each other's work and help each other every time that this is needed. In this project we had our separate set of duties well-established, but many times, out of need or to simply to help each other out, it was necessary that we got involved with the other's work. I don't think you can be a good UX Designer without at least some good skills in UI and vice-versa.
 
Good design takes time. Not every company or project will have the time we had to do this, but if you have the chance to be in a project like this once in your life, you should take it.


 
bottom of page