Website builder Locaweb

Website Builder
Locaweb

Digital Web Product • Launched in 2016

Digital Web Product • 
Launched in
2016

A drag-and-drop SaaS product that allows thousands of regular people to create their online presence by themselves.

A drag-and-drop SaaS product that allows thousands of regular people to create their online presence by themselves.

MORE ABOUT LOCAWEB

Locaweb was founded in 1998 and is the largest provider of web hosting and infrastructure services in South America. Pioneer and market leader in Brazil, the company serves around 400,000 customers and hosts more than 340,000 sites.

Locaweb was founded in 1998 and is the largest provider of web hosting and infrastructure services in South America. Pioneer and market leader in Brazil, the company serves around 400,000 customers and hosts more than 340,000 sites.

viewDragAndDrop_GIF
PRINCIPAL ROLE / ENTIRE PROJECT

Interaction Designer / User Experience Designer

Interaction Designer /
User Experience Designer

Inside a cross-functional team, I co-designed, launched, and worked on the product development for a new version of the Website Builder Locaweb. For almost 2 years, in partnership with a UI Designer,  I was responsible for activities related to Product Design and UX: from small usability improvements to internal design workshops with the product's team and several other stakeholders (Developers, Visual Designers, Customer Support, Marketing).

The activities for this role included: Product Design, Prototyping, User Research, Product Development, and Interaction Design for web applications.

Highlighted here, you will see our largest project that lasted about 1 year. I learned a lot during this process, and this is my favorite project and product until nowadays! Enjoy your reading.

PROJECT GOAL

A better scalable product

A better scalable product

We had some restrictions on the technology previously chosen to build the product. Thus, it was not possible to scale the product to meet the business and users' needs as well.

CHALLENGES

Bringing the user's perspective to a strong engineering culture

Bringing the user's perspective to a strong engineering culture

The product was initially created inside an environment with strong development and engineering culture. These cultural facts had a deep influence on the teams' vision and decisions. Sometimes, the tech perspective seemed more relevant than the user or the business perspective.

Although the product had regular (non-technical) people as its target, the development team had strong beliefs about how the product should be. They were so confident, that they started new technology discussions even before involving any people from other teams.

We faced a lot of internal pressure from the business for launching the new product as quickly as possible, and during this process, we also had to deal with some essential team members leaving our team.

PicturesSiteBuilder01

In 2015, we split the design team for the first time, and every designer had to work physically inside a product team.

DESIGN PROCESS

Data-driven design since the beginning

Data-driven design since the beginning

During the discovery phase, I had access to several sources of information. To ensure we focus on solving real users' problems, I continuously shared and discussed this information with the dev team during our meetings and collaborative workshops.

From the Customer Support team, I had access to the top reasons for contacts by phone, chat, tickets, and some personal views from the analysts that used to help the clients. Also, I read and categorized hundreds of comments and ratings from the product's past quarter on the Net Promoter Score (NPS) and Feedbackr, an internal software the customers used to send messages directly to the product team. Several problems were related to issues we couldn't solve because of the product's tech restrictions.

Screen Shot 2021-05-03 at 14.27.25

Usability Issues, such as difficulty in positioning items, flexibility to modify template elements, bugs concerning the text editor, and other features.

Features Scarcity, such as blog function, limited functionalities concerning the competitors, better website's layout, diversity of templates, etc.

Needs and goals:

Needs and goals of our users with the product:

Have an online presence.
Get the website online quickly.
Access to a professional website and pay little for it.
Have a beautiful website.
The website is a "plan B" or experiment.
Internet gateway for beginners.
Create the site by themselves. (Ownership)
Users even sell sites made in the product.

Top complaints:

Needs and goals of our users with the product:

1. New page creation.
2. How to link Domain to a website.
3. Gallery images edition.
4. Product bugs. 
5. Images' size edition on the website.
6. Find images to include on the website.
7. Menu editing.

Additional interesting discoveries

Additional interesting discoveries

In partnership with the Product Marketing Analyst, I analyzed an online survey we sent to our customers to understand better our users' demographics and their needs and goals with the product. Also, we recruited some of them for an in-depth interview.

86% OF TRIAL USERS WERE MEN;
61% OVER 36 YEARS OF WHICH, 33% OVER 45 YEARS

98% ACCESSED INTERNET EVERY DAY.
75% HAD 2MB OR MORE AS INTERNET CONNECTION.
75% HAD MOBILE INTERNET.
84% HAD USED A LAPTOP FOR INTERNET NAVIGATION.
COLLABORATION

Unlocking collaboration

Unlocking collaboration

After the initial discovery, I decided to facilitate a Design Studio workshop, and all team members could prototyping their expectations about the new website builder. Until that moment, the development team had never participated in any collaborative workshops.

First-time Design Sprint

First-time Design Sprint

Very few companies were making real design sprints in Brazil at that time in 2015. My manager, Patricia de Cia, saw this project as an opportunity to experiment with the process. She negotiated internally with our stakeholders the developer's participation. We should use five days for a full Design Sprint process, but we had done a satisfactory job in just three days.

Day 1: Balancing knowledge
Before we start, I presented summarized results from our previous discovery, plus printed versions of websites created by real users. We defined our challenge, designed journey maps, and empathized with the users' pains and needs.

Day 2: User-centered solutions
Based on specific use cases, the team had to sketch, present and discuss several solutions focusing on small user goals with the product.

Day 3: Conflicts and unusual decision
We noticed the product was too big and had many important issues to address. Therefore, some team members wanted to make a copy of WIX.com, the main competitor of our product. Because of that, instead of creating a prototype, it was decided to test WIX.com.

EXTENSIVE SKETCHING AND PROTOTYPING WORK

Designing for website designs

Designing for
website designs

After the usability test, we found out that our users were not skilled enough for a free layout tool like Wix, so we decided on the interaction style: drag and drop where the elements automatically adjust within a responsive layout, but differently from the past version of the product, we should evolve the possibilities of arrangement of the elements.

A few days later, the development team was already doing technical meetings to discuss which technology should be used to build the new version. I created several sketches with some basic interface interactions to guide their discussions. I also decided to document these sketches for better accessibility.

Despite my extensive sketching activities and prototyping work,  I needed to create very long and detailed specifications for each element or widget we were designing. The product's old version had 9 basic elements for building websites: Text, Image, Gallery, Button, Video, Form, Social Media Sharing, Online Sale, and Code. In the new Website Builder, we had to rebuild all of these elements, adding flow improvements and new features.  

Some images from the process.

Video example: from a friendly developer of my team.

FEATURES MAPPING

Visibility to improve focus

Visibility to improve focus

Few months after the ongoing development, I noticed we were developing the new product with several gaps. Some of them were even worse than the product that users had available.

I decided to do a feature mapping. Pointing out everything that was partially implemented, implemented with errors, or not implemented. This map helped a lot! Because of this, we made an entire sprint to fix bugs and implement minor improvements.

PicturesSiteBuilder21

New Website Builder project results, and five years later

New Website Builder project results,
and five years later

When we launched the new version, we still had several other issues to address, starting from users' migration, rebuild the domain panel, bugs correction, new templates, and other improvements. I helped the team with these tasks until I left the company in December 2016.

With the new product, we accomplished most of the users' needs earlier identified on research. Also, we accomplished the most crucial product requirement: create a scalable product to meet new requirements from customers and business. This version of the product is available since 2016. Nowadays, it has already received several new and exciting functionalities.

It is one of the main website builders in Brazil, being positively reviewed in specialized sites, and has thousands of active users. You can signup for a free trial here.

My final thoughts and learnings

My final thoughts and learnings

I needed to study in-depth concepts like drag and drop, interaction styles, interaction models, information architecture, and other HCI things. I had to properly know all these things to explain my decisions and suggestions. I was challenged, and I had to substantially improve my negotiation and stakeholder management skills to maintain the team focused on meeting the user needs and the business requirements considering the user-centered-design approach.

With the collaboration workshops we did, I collected important points of view regarding what the team imagined for the product. The workshops were also a great strategy to make the team less anxious and more participative in the design process, something very unusual for the company at that time.

It was an enormous project, and for sure, my delivery was possible because of all the support I received from my boss and my friends from the design team. I remember the day when I was drained, and my colleague Fernanda Passos said encouraging words to me, pushing me to do my best with the resources I had.

Despite all the difficulties, and I had plenty of it, this product is still the one I am most proud of!

Most Used Soft Skills:

Task management, teamwork, negotiation, conflict resolution, effective communication.

iconfinder_LinkedIn_3380448

Design and content © Murilo Bispo • 2021
Amsterdam Area, The Netherlands

BLM