Designing For Animal Welfare

Animal Aid required a fully responsive website redesign to strengthen their message of the protection of animals to a wider audience and greater numbers. I was lead designer whilst working at the brilliant agency Reason Digital.


Working closely with the development team, I created a series of wireframes that allowed us to communicate with the client how their content would fit into the new site design. These were high fidelity wireframes showing functionality that was discussed with the development team early on. I utilised copy that would be used on the live site in order to communicate how their content could work, without the need to rely on lorem ipsum as this more often than not creates issues further down the line. It also allows for a greater buy in from the client, as you can fully express your decisions as to why you placed an item of content.


Use of Imagery

Early on I noticed that imagery would play a vital part in the outcome of this redesign. Previously the client had used imagery that was of a shock and awe approach.

The client was keen to move into the educational sector, therefore it was deemed more appropriate to display images that were less gruesome in order to catch the attention of a young audience.


Modular Styleguide

Once the wireframes were created and we understood the user journey, I moved into the phase of creating a modular styleguide. This allowed the developer to get a great overview of the elements that would be required for their build phase.

As the wireframes were designed in such high fidelity this also allowed the process of designing the elements to be more efficient. It saved a lot of time in the build phase as much of what was designed had been discussed with the development team early on in the design process.

Design System