Clube Amigo Suvinil

Suvinil is a major real estate paint manufacturer owned by the German multinational BASF. They have the Clube Amigo (Friends Club), which is the relationship club composed mainly by the painters that are the most important part of the whole platform construction. clubeamigosuvinil.com.br

The Challenge

Suvinil was tackling to engage the painters to visit their platform mostly because it was very outdated and not intuitive.

It was also learned from stakeholders that the painters needed to be encouraged by other advantages to trigger them to use the website. According to internal research, they could be much more prone to visit the site if they had discount coupons or product bonus attached to it. Something extra to make them feel special, together with benefits gained with the company's products.

That was when we came up with the gamification idea. That was basically an attempt to increase their engagement throughout a gamify process and a gamified site. But first, we needed to collect data from them: their habits, workflow processes, preferences, daily routine and so on, to allow us to use that information to gamify the website.

And to achieve that, we decided to split the MVP delivery into two phases:
Surveys and Gamification.

MVP Phase 1 - Surveys

Based on brainstorming sessions with the team and stakeholders, we learned that in order to understand the painters and make use of this knowledge, we would need their data. The phase 1 should and would be a data-gathering throughout company's questionaires that would be displayed on the website.

We introduced multiple choice questions about the painters life and their everyday routine such as “what is your favourite paint to use on texture walls?” but also, personal questions they were more inclined to answer like “what is your football team?”.

We identified these key points on phase 1:

Knowing the painters: Encouraging the painters to visit the website were directly linked to how interesting the questions of the surveys were. So, boring questions were out.

Data focus: Leverage as much data as we can from the surveys/workshops to get a more closer look of painters work mindset.

Understand impacts of phase 1: After gathering all the information we need, learn from it, and prepare it for phase 2.

Be clear about second phase: Understand that for the painters, knowing they can win prizes and benefits may be the most important feature of this entire platform. So, being transparent and direct about this, was key.

I used Miro to do the flows, painter journeys, brainstorms, card-sorting and low-definition wireframes:

brainstorm
sketch

MVP Phase 2 - Gamification

After all data-gathering from phase 1, gamification takes place. Using the data we got from the surveys, we had enough information to change the wireframes, flows and visuals into a game language with challenges, winning stars, missions and prizes.

We identified these key points on phase 2:

Main goal: Leverage data from phase 1 and use it to increase the number of painters interacting with the new website.

Learn from painters: Now it's time to look at the platform usage from painter's perspective and keep improving it, coming up with new solutions, new ways of getting data from them, and so on.

Keep next iterations: Constant maintenance of the platform making small and hassle-free iterations.

gamification
wireframe

My role

UX/UI Designer and Prototypes
After all reports and research data we got from the stakeholders and from the painters themselves, I was able to build initial wireframes and prototypes, test with the developers and drive the visual design from that point on.

Using Suvinil's guidelines, I created new design options, with more dynamic and updated visual appeal to better suit the new gamified language, aiming to draw the painter's attention.

Some of the options I did before the final version, as follows:

studies

Final designs
I opted for the third version of the options because of the simplicity and freshness. Also, another advantage was the easy implementation for developers:

homepage-suvinil inside-page-suvinil
mobile-mockup

Mobile prototyping for gamification phase
It was decided with the stakeholders and developers that the second phase would be mobile-only until we had more data to open to desktop in the future iterations:

gamification-mobile-1
gamification-mobile-2
gamification-mobile-3

Results and takeaways

For this project, we learned that even working against the clock, we were able to deliver a feasible and very functional product within the deadlines. Not only we learned from the process, but also and specially from the painters.

Some key takeaways from this experience were:

Working with end-user: Unlike most projects that I worked on, this one my team and I were side by side with the website audience and we learned much more than we could ever imagine.

Effective design thinking: The surveys, brainstorms and discussions with the team and the painters, really helped me to shape the entire platform, as it allowed me to stay focussed and on track throughout the phases of the website.

Hurry is the enemy of iterations: We were working on a cascading/waterfall methodology with tight deadlines, and a lot of pressure from all sides. The whole experience requires patience and team alignment. Therefore it takes many iterations into consideration, but once again, I was very fortunate to have amazing team players with me along the way.