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

capstone1-research-ramp-up_v20200514

Research findings

Il-Paese-dei-Gatti-redesign-Interview-findings_v20200129-1

Persona #1

persona_development_v20200130_Silvia-Sciaroni-The-Donor

Persona #2

persona_development_v20200130_Silvia-Sciaroni-The-Donor-copia

Persona #3

persona_development_v20200130_Silvia-Sciaroni-The-Donor-copia-2

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 

il_paese_dei_gatti_Feature-Roadmap_v20200130-v20200131-1

Sitemap

il_paese_dei_gatti_sitemap_v20200202

Task flows

il_paese_dei_gatti_task_flows_v20200202-1

User flows

il_paese_dei_gatti_user_flows_v20200202-1-1-1

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

il_paese_dei_gatti_home_page_sketches_v20200203-1

Responsive wireframes created with Figma

ipdg-wireframes_responsive_v20200210-01-homepage

Brainstorming session

ipdg-brainstorming.map

Il Paese dei Gatti's new logo

ipdg-logo-2l

Style tile 

ipdg-brand-style-guide_v20200212

UI Kit 

ipdg_ui-kit_cs6_v20200225_cropped

Grid-based responsive mockup using Figma

mockup_screens_20200514_home_cropped
mockup_screens_available_cats_cropped
mockup_screens_available_cats_cat_profile_cropped
mockup_screens_help_us_cropped
mockup_screens_help_us_become_a_volunteer_cropped

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

Il-Paese-dei-Gatti-Desktop-prototype-Screens-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

ipdg-maze

Usability test plan & results

ipdg_usability_test_results_v20200217-1_cropped

Affinity map

ipdg-affinity_map_v20200217

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.



Selected Works

SeasonalEnd to end app

Apple MusicAdding a feature to an existing app

Il Paese dei GattiResponsive website & logo

KAUSResponsive website & logo

© Isabel Mercedes Parini 2020
UI / UX Designer

Website built with Semplice