the VILLAIN:
Poor online communication, causing bad connections between participants and delivering a bad experience.

how i defeated him:
The main focus was the redesign of its institutional site.

DATA SURVEY
Initially, a large data collection was done through:
Interviews | Focused on understanding users’ specific opinions about the product.
Insights:
- The pop-up that appears on the homepage looks like a virus;
- There are too many links;
- Addresses need to be easier to find.

Questionnaires | Focused on getting as many answers as possible.
Insights:
- The website should have the news of the week as well as the folders distributed throughout the spiritist center;
- Need for social networks;
- Information structure should be more objective and clear.

Usability’s test | Capture insights from users through test, capturing insights and thoughts on each step.
Insights:
- The user closed the pop-up without reading;
- “Wow, what a confusing page!”;
- “Wow ... I will not read it all. No patience.”

Card Sorting | Used to find out how the user group information in their mind.
Insights:
- In almost every round, a section of “Photos and Videos” was created;
- In every round, “Livraria” and “Editora” were put together;
- In every round, a section speaking specifically about the Spiritist doctrine was created.

Personas and Scenarios | Creates characters and fictional scenarios to develop empathy with the target audience.
PERSONA 1
THE WELL-INTENDED
PERSONA 1 | THE WELL-INTENDED
Carlos is 32 years old sales manager of a famous company based in Rio de Janeiro. He lives alone in Botafogo and dates Bianca, a 30-year-old lawyer. His best friend, João, a spiritist since they were kids, always talks with him about his social work, stirring up his curiosity and empathy with the cases.
“I want to help somehow, although i don’t have time. I think the world would be a better place if everyone looked for something like that.“

SCENARIO 1 | CARLOS PRESENTS PROPOSAL OF SOCIAL CONTRIBUTION TO THE COMPANY
• Carlos spent the weekend in Petrópolis with João and other friends. In this trip, João told how the projects of the spiritist center were and they talked for a long time about spirituality, making Carlos think more about it.
• The week after, he researches the spiritist center’s site to read about the projects, finding several detailed explanations of each work done, confirming how many people are benefited, regardless their religious positioning.
• While browsing the website, admired by the organisation, he had the idea of ​​suggesting his own company a social contribution project, with several benefits, both moral for the company employees and economics for the company.
• After the proposal, the company visited the website to find more information in the later days, validating the seriousness of the work and approving Carlos’s proposal.
• The company contacted the spiritist center and a partnership was made.
• Carlos called João to talk about what happened, showing his happiness for being able to help on his own way. He even promised to take a day to visit the place with his friend.
P2 | THE UNLEASHED     P3 | THE CURIOUS    P4 | THE FOREIGNER     P5 | THE ENGAGED    P6 | THE UNFORTUNATE
PROJECT'S CONSTRUCTION
After the data collection and the personas and scenarios creation, it was possible to start the site’s construction, with a greater success chance, due to the human centred focus. The next steps were:
Benchmark
Site map, to define the information architecture. In this project, it was essential to create a map after data collection, especially in the Card Sorting and Personas and Scenarios steps, to organise the content and decide which parts should be collected, separated, added or withdrawn.
Wireframes, to design the website’s structure, both desktop and mobile. 
To give more context, this was the previous layout (not responsive).
Home | Desktop
The following changes were made:
1. The top menu remains in the same place, but with fewer links and some of them with sub-divisions that arise with mouse hover;
2. Social media stays together on the top menu, getting good visibility;
3. Replaced the previous pop-up for a carousel showing the top stories;
4. Message of the day highlighted in a box;
5. Quick links to the main topics;
6. A proper space to the news;
7. A newsletter registration;
8. Footer with the addresses and phone numbers, with Google Maps location.
Internal page with side menu | Desktop
1. Breadcrumbs to help the user with his location;
2. Side menu with more visibility.
Home | Mobile
Menu and Internal Page | Mobile
Layout, the final phase of the project.

Home | Desktop
1. When you hover the menus with an arrow, a window opens, showing the sub-menu.
2. When the mouse hover some article, its rectangle and title will change their color to light blue.
Internal page with side menu | Desktop 
Home | Mobile 
Back to Top