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.
In order to define the problem in a proper way, we used the tool Blueprint 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.
First conclusions
After completing the User Journey, it was much clearer to me when my digital solution would come into action:
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.
