evt1

The Green Squad Tang is a social platform where children can have fun, learn, and help the world through topics related to recycling, sustainability, and music.

UX TEAM:

Euripedes, Andréa Mayumi, Nasser Said, Erika Shimaoka

evt2

STARTUP

The Squad website is a dynamic website that calls for constant changes to improve strategic and navigation aspects. Therefore, analyzes are made constantly to meet diverse needs.

evt3

Starting with a new proposal for interaction with the agents (the children who use the site), we first chose to do site performance analysis and tests.

 


 

AB TEST

We performed an A / B test to test the performance of the record page, which was the space where agents could send photos of the activities proposed on the site. In the new proposal, we redesigned the page so that the explanation of the task was simpler, with clear steps and iconography to help to understand. As a test objective, we analyzed which position of the “send photo” button would have the best performance.

First page, A e B page:

evt4

 

Results:

Depois de quase 22 dias de teste A/B, foi gerada massa critica suficiente para encerrarameAfter almost 22 days of A / B testing, enough critical mass was generated to end the test. Visits – 3,220 (Which had their impressions divided by 50% for each version) Conversions – 70 (Which 40% generated by the original page and 60% by version B)nto do teste. Visitas – 3.220 (Que tiveram suas impressões divididas em 50% para cada versão) Conversões – 70 (Que 40% gerado pela página original e 60% pela versão B)

In total: 53% increase in the volume of videos sent in version B (button below the step) over version A. 69% higher than the conversion rate of version A on 9/13.

 


HEAT MAP

Utilizando a ferramenta de mapa de calor, estudamos a performance dos elementos e botões da home do site e testamos algumas versões aplicando melhorias, sempre procurando uma divisão de calor mais homogênea no contexto geral.

First home

evt5

 

First modification – robot input

evt6

 

Despite an increase of about 15% on average in the click of buttons and input hits in the login area, the heat map was still poorly integrated, in the next version, we worked on the page with less scroll.

 

Second modification – robot

evt7

Success! (Phew) The version brought a more homogeneous heat map and consequently the elements and highlights of the page started to be better used.

evt8

 


 

THE EVOLUTION

Every year, the theme of the site changes, in 2011, recycling records were worked, ending the year with a record book and an event for 20 thousand people with a 16-meter high sculpture of the Tangobô (name voted for by the site) that joined the Guinness Book. In 2012, the Recycling Olympics took over the site, which, in addition to being engaged, had the function of supporting the campaigns developed in schools. The results of interface and interaction came after a lot of research and discussions between Kraft, Ogilvy, and Katavento.

 


 

WORKING!

Research with children, evaluating the understanding of the site and its pedagogical function, a lot of conversation with the planning and attendance in an immersion in the job, ended with an extensive meeting with many flows and concepts.

evt10 evt11

 

The navigation flow was divided between the login and the registration of new agents, with the changes in menu and home more importance was created for the games area (for non-logged in visitors), in addition to the already known login areas and new registrations. A very positive result with regard to the propagation of the relationship and interactivity, generating a subsequent increase in visitor loyalty.

 

Analytics navigation flows

evt12

 


 

NEW PROPOSAL

We defined a new grid and applied the heat map learning to position the elements, focusing on the navigation elements according to their importance. We built a mood board as inspiration for elements and shapes, which also served as a color palette for the website.

 

Grid and wireframe

evt13

 

Mood board and color pallet

evt14

 


 

ALIGNMENT

The work at all times was aligned with the agency’s planning and creation, following the assets and key visuals defined and applied in the digital environment.

evt16