El Jardinet Dels Gats is a cat sanctuary in Barcelona. It is a not for profit organisation that operates thanks to donations and the adoption fees that they collect. For this project we had to undertake a complete site redesign that examined the content, information architecture and visual design. We designed for both desktop and mobile and also coded a responsive version of the landing page
The Brief and Scope
Getting Started
Content Audit
The original landing page for the website was created using a WordPress template and had quite a confusing information hierarchy.
To improve this we completed a content audit and looked for content that was:
Outdated
Repetitive
Unnecessary
When we had completed the content audit as created a new navigation system, we tested our hypothesis using open and closed card sorting as well as tree testing. We completed this testing with 7 users to make iterations and finally have a navigation system that matched the mental model of most users.
From this testing we created the following navigation bar. We reduced the main functions of the site to links that are calls to action and also put an emphasis on the DONATE button as this is a very important function for the organisation.
Getting The Right Look
Benchmarking
To get a feel for how similar organisation present their services we undertook extensive benchmarking. We looked in particular at their visual identity as well as their copy. We noticed that the sites all used quite light and airy colours and the copy on the sites tended to be light-hearted and friendly. The style of our current site tended to be more ‘halloweenish’ and the copy was quite bland and formal.
Mood Board
Once we had completed the benchmarking, and keeping in mind our client, we created a mood board that would help us begin to iterate on the visual identity of the site. From this mood board we came up with the following brand attributes that we were trying to convey:
Caring
Playful
Mischievous
Natural
Crazy
Style Tiles
Taking these brand attributes we created dozens of style tiles to play around with combinations of colours, textures and typefaces. Using desirability testing we were able to narrow down and iterate upon these options to get to our final design choices.
Final Style
Through these rounds of testing we settled on the styles that you see below. We chose a bold serif typeface for headings as it had a lots of personality and energy. The sans-serif typeface was chosen as a more serious and subtle option to be used for body text – it was also chosen for this purpose because of its readability. The light blue colour was chosen as a calm backdrop for the site while the electric pink was used to add energy and draw attention. A dark grey was chosen instead of pure black to avoid too much contrast and yellow detailing was used to add some energy to the site and attract users’ attention.
Creating The User Flow
Paper Prototype
We ideated many times on paper for both desktop and mobile. Through this ideation we settled on a 3-screen user flow that would reflect the most realistic user journey for someone visiting the site.
Landing page - General information about the organisation and overview of cats up for adoption
Cat page – Specific information about a cat
Get in touch – A contact form to finalise an adoption
Wireframes
We created user flow mock-ups for both desktop and mobile in Figma and tested these with 4 users and completed two rounds of iterations to finalise the design.
The Final Version
Desktop Prototype
The Figma prototype for this project is available here
Responsive Coded Design
You can find the live version of this site here on Glitch.
Looking Back
Working on this project was a lot of fun mainly because we got to look at cats all day but also because it had a focus on visual design and branding as well as coding. For these reasons we got to focus less of our time on initial user research spend more time exploring visual iterations and testing them with users. It was also very satisfying to deliver the code for this project and see our design ‘live’ on the web.
But it wasn’t all easy, we ran into some obstacles along the way. Firstly we got totally stuck on the visual design, to overcome this we decided to ‘go crazy’ with visual iterations doing ‘180 activities’ and trying dozens of very different iterations to get un-stuck. Secondly, we broke our code the morning of the project presentation. A very frustrating experience, but one that we were able to overcome with the help of some friendly developers!
What We Learned
If you get stuck, don’t stop moving – make a break things quickly to get new ideas and explore new paths.
Lo-fi is sometimes better – we tried to use digital card sorting tools, but sometimes post-its are our best friends!
Ask for help – while I’m proud to say that we did the vast majority of the coding for this project ourselves, asking for help got us to the end while we working under a tight deadline.