Il Paese dei Gatti

The project

The first capstone project of DesignLab's UX Academy should have been a genuine unsolicited redesign of an existing website, i.e. ilpaesedeigatti.blogspot.com, a blog-turned-website that represents a small local cat shelter. Unfortunately, despite accepting the redesign, the owner did not want to collaborate during the research phase. This is why the research phase went on without being able to consider the true needs of the actual stakeholder.

As the current website was not fully responsive and did not look professional at all, the main goal was to create a usable responsive website that would fit the cat shelter and inspire trust in the user. Creating a logo and definig the brand, both of which were absent, were additional goals. 

Duration: 1 month.
Role:  UX Researcher, UX/UI Designer.
Tools: Figma, InVision, Illustrator, Maze.

The process

While wokring on the redesign of the Il Paese dei Gatti website, I relied on the Design Thinking process.

STEP 1

Empathize

Research
Persona

STEP 2

Define

Feature roadmap
Sitemap
Task flow
User flows

STEP 3

Ideate

Homepage sketches
Wireframes
Logo
Style guide

STEP 4

Prototype

STEP 5

Test

Usability test plan
Usability tests
Report
Affinity map

ITERATE

1 - Empathize

My research included a competitor analysis and customer interviews, both in-person and online using a questionnaire created with Google Forms. While the participants of the in-person interviews were recruited among family and coworkers, the participants of the survey were recruited on Slack among fellow UX Academy students.

The goal was to get a feeling about what competitors were doing, find out what users would need to know to consider a shelter reliable (both in general and regarding contents of a website), how they chose/would choose their cat(s), and so on.

The results confirmed the type of provisional personas I had created during the research ramp-up, as among the interviewees there were people who adopted a cat from a shelter, donated to shelters and/or volunteered for shelters. It helped flesh out the personas with information based on real data concerning e.g. their needs and fears.

In general, regarding the online presence of a cat shelter, respondents valued beautiful pictures of cats and location, a professional layout and testimonials by cat adopters when it came to reliability.

Research ramp-up

Research findings

Persona #1

Persona #2

Persona #3

2 - Define

The insights gathered during the research phase were extremely valuable and they  helped me during the next phase of defining the product. My approach included constant interation, albeit user testing only happend after creating the mockups.

Based on the research, I created the feature roadmap, that ranked the features from must-have to "can come later". Later, I created a sitemap that showed how the website would be structured. In order to define the steps and therefore the pages required for each one of the main tasks that arised from the three personas, I created task and user flows. 

Feature roadmap 

Sitemap

Task flows

User flows

3 - Ideate

I sketched different versions of the home page and then proceeded to create grid-base, responsive wireframes using Figma.

After a brainstorming session that helped me defining the brand's attributes, I created the logo, as well as a style tile, and was then ready to create the first mockup, which underwent various iterations. Later, I also created a UI kit that would illustrate several important aspects of the design.  

While I like creating wireframes, applying the brand elements to a design is extremely rewarding, as it makes the screens become alive, like adding flesh and skin to a bare skeleton.

Creating a logo is always challenging, although brainstorming sessions are very helpful. But finding the right combination of color, type, sizing and placement is always tricky.

Home page sketches

Responsive wireframes created with Figma

Brainstorming session

Il Paese dei Gatti's new logo

Style tile 

UI Kit 

Grid-based responsive mockup using Figma

4 - Prototype

After creating the mockups for all three screen types (i.e. desktop, tablet, mobile phone), I developed a protptype using InVision.

This helped me understand whether all the steps the user would need to follow to complete the main tasks presented in the task flow were present.

Mockup prototype using InVision

5 - Test

After defining the test objectives and other specifications, I used Maze to conduct my usability tests on the desktop version. The results were then gathered and summarized in a report and illustrated by means of an affinity map that included possible solutions to the problems that were highlighted by the test. 

In general, the users were able to complete all tasks. Issues concerned e.g. the form to apply for adoption, as users either missed it (as it would appear once the CTA was clicked) or expected to be directed to another page. One user also perceived all elements to be to big, confirming a doubt I had.

Usability test created with Maze

Usability test plan & results

Affinity map

Conclusion

This was the first project I carried out without the guide that was provided at the beginning of DesignLab's UX Academy. Despite this, all steps ran smoothly and it was interesting to dive into the world of (cat) shelters, as, like the respondes of my interviews and questionnaire, I love animals.

The resulting website would finally offer a professional presence to the cat shelter, with beautiful pictures and testimonials, which are all elements that prove the shelter is reliable, according to my research. Moreover, the website would now be easily navigable with a desktop, tablet or mobile device.

Given more time, I would also have conducted in-person, moderated usability tests and recruited more interviewees, both for the in-person interviews, as well as for the survey. 

Overall, I enjoyed every step of this project, not only because of the topic, but also because each phase led to the creation of a valid redesign of a blog-turned-website that was neither professional nor appealing, as the layout looked quite disorganized and inconsistent, and it was not very responsive.

Contact

Isabel Mercedes Parini
Calzania 12
CH-6653 Verscio
pariniim@gmail.com
LinkedIn
Dribbble

© Isabel Mercedes Parini 2023

Website built with Semplice