SALVANDO PELUDOS WEBSITE

This project is a commission from the non-profit organization El Campito - Salvando Peludos to create a full web redesign. Starting from the Ux investigation and delivering a full web UI design.

The team of researchers composed by Pablo Vallejo and Javier Colomer (myself) have carried out a complete UX investigation to later develop the UI redesign, creating once again the prototype of the new version of the web. 


<--- Here you can watch a video with the result of this project. 



Challenge


The Challenge that was presented to us was to redesign the Salvando Peludos-El Campito website. The key points were to create a new heuristic evaluation to locate the main website pain points and to study their users so the new design becomes much more engaging and user friendly, as all the animal adoptions can be made online.


Defining the problem

In order to define the problem in a proper way, we used the tool Lean UX Canvas, this tool helped us to be agile in our decision making. 


Research

Thanks to the qualitative and quantitative research carried out, we detected three lines of action. 

- Transparency of the NGOs: As the research progressed, it became increasingly evident to us that the idea of ​​making a transparent app was key to the success of our tool. 

- Direct communication: Based on the results of our research, especially the in-depth interviews, it was determined that the inclusion of a direct communication system comprising of both volunteers and interested parties with the association's management would be beneficial for users. 

- Monitoring of NGOs on Social Networks: Monitoring of Social Networks, mainly Facebook and Instagram is key in attracting partners and adopting animals in the shelter. 

However, a lack of cohesion between the website and the latter was detected.

Affinity Diagram -> User Persona

Once 154 people had been surveyed (the majority of which were involved in the association or sensitized to the issue) and 7 interviewed (4 of them being stakeholders), all the information was uploaded in the Affinity Diagram to organize and identify patterns and turning the result into the MoSCoW prioritization system. With the conclusions drawn, we create the User Persona obtaining a profile, which would be the recipient of our product.


First conclusions

After completing the User Journey, it was much clearer to me when my digital solution would come into action:

User Journey

1. Brainstorming


With all this information we carried out a brainstorming that helped us to envision possible new functionalities.

2. Filtered out


The UX tool known as Moscow was key in determining which functionalities were more important than others when constructing the app.

3. Choice


The next challenge was how to deal with Information architecture.

MoSCoW

Prototype

After prioritizing, Crazy 8 and Round Robin techniques were applied to determine what our Low Mid Fidelity prototype would look like.

Once the model had been tested and the project was presented, we went to the second phase in which we began to define the product by applying UI tools.


Moodboard, Brand attributes y Style Tiles

Subsequently, the complete redesign of the web was carried out, using all the information collected in the investigation and applying it in the creative process. Creation of moodboards, brand attributes and other exercises were created to guide the final result.

Brand Attributes, Moodboard, Choosing and Pairing Fotns & Style Tile


Mid-fidelity Wireframes

Design of the final product adapting the UX / UI process in all its phases. Tests using an interactive prototype created in Figma.


High-fidelity Wireframes

Design of the final product adapting the UX / UI process in all its phases. Tests using an interactive prototype created in Figma.


Prototype and Final Result.

Here you can see the Prototype of the project designed with Figma. In turn, you can take a look of the Final Result going to the New Website of Salvando Peludos.  



That was all, if you want to know how the whole UX / UI process was carried out in depth, you can send me a message by filling out the following form.