RSPCA App Prototype

Ubayd Hosenbocus
7 min readMay 28, 2021

BRIEF

The task at hand is to design an adoption feature for the RSPCA organization which helps take care of rescue pets and find homes for them through their adoption process. They want to ease the adoption process with an added adoption feature on their app. To start beforehand, research is conducted on current existing solutions and how they tackle their adoption process.

EXISTING DESIGN SOLUTIONS ANALYSIS

  1. Adopt Me App
Adopt Me App Screens

- Color scheme is present throughout the app which helps in better visual hierarchy.

- Sorting out pets through line illustrations pet categories and preferences categorization.

- Dark mode for accessibility.

- Pet images’ carousel for browsing through the pet profile.

- Adoption call to action buttons presented in simple iconography.

2. Pet Finder App

Pet Finder App Screens

- Structure and layout is key for good visual hierarchy and information hierarchy.

- Good use of psychology of color and 3x3 gird system for the gallery.

- Simplified recognizable icons for the adoption process at the end of the pet’s profile.

3. Happy Pet App

Happy Pet App Screens

- Use of flat illustration for better visual aesthetics and better user interface design as simplified illustration are soothing to see.

- Color palette kept consistent through the application.

- Minimal interface increases user experience as they ease the flow of information coming at the user.

IDENTIFYING USER GROUPS

User Groups

The main user groups for this app would be those want to adopt new pets, The Adopters.

Demographics of Adopters

The adopters are within a specific demographic group relative to high school students to college students and some young working adults. They are within the age range of 16 years old to 30 years old meaning they fall within two generations, notably generation Y, also known as millennials and generation Z. Both sexes are prone to adopting pets prior to have kids which we see is a rising trend among these two generations. So the need to adoption on a digital platform such as as app would be helpful to meet the demand of this target audience.

Adopters Skill Level / User Roles

High school students, college students, part-timers, undergraduates, post-graduates, office workers, construction workers, bartenders, social media influencers, health workers, front liners.

To have a better grasp of the audience information, 4 personas will be depicted.

PERSONAS

  1. Marianne
Marianne

2. Stephane

Stephane

3. Gabriel

Gabriel

4. Jocelyn

Jocelyne

STORYBOARDS

A better way to preview the adoption in process is to put forth a situation involving our personas. In this case, we will see how Jocelyne and Stephane interact with the adoption process of the RSPCA app.

Storyboard 1: Stephane Scenario

Stephane’s Scenario

Storyboard 2: Jocelyne Scenario

Jocelyne’s Scenario

After analysis of the storyboards, three user goals have been put forward that the RSPCA app adoption process should take care of:

USER GOALS

GOAL 1: user should be able to navigate through the app fluidly without any incoherence.

GOAL 2: user should be able to sort out pets by category and preferences.

GOAL 3: user should be able to go through the adoption process smoothly.

Keeping in mind these three user goals, two app prototypes will be developed with variations of some of its main screens.

Version 1 will follow Stephane’s scenario.

Version 2 will follow Jocelyne scenario.

PROTOTYPES FOR TESTING

Version 1: https://www.figma.com/proto/6vDZmbzCHF2S8ZWd9nH40c/FINAL-1?page-id=0%3A1&node-id=1%3A2&viewport=71%2C293%2C0.07065732032060623&scaling=s

Version 2: https://www.figma.com/proto/dBEZaIsz0tJMsX0bjXFUMh/FINAL-2?page-id=0%3A1&node-id=1%3A21&viewport=-6566%2C646%2C1.2179999351501465&scaling=scale-down

For the A/B split testing, version 1 and version 2 will differ through these four main screens variations:

  1. Homescreen
Version 1 (Left-hand side) Version 2 (Right-hand Side)

2. Pet category

Version 1 (Left-hand side) Version 2 (Right-hand Side)

3. Pet Preference

Version 1 (Left-hand side) Version 2 (Right-hand Side)

4. Pet Profile

Version 1 (Left-hand side) Version 2 (Right-hand Side)

TESTING PROTOTYPES

10 user testings will be conducted.

Due to the pandemic of COVID 19 Situation, 5 testings will be conducted via Skype and recorded. 5 testings will be done through survey forms. On both testing platforms, the A/B split testing will be conducted to finalize the version that will be put forward to the final prototype.

Recordings Links:

Gyanish Testing — https://youtu.be/eBTvkm2-Sf0

Kishaiy Testing — https://youtu.be/MaEUgVIgrdk

Raphael Testing — https://youtu.be/rLT75TVkczA

Yusuf Testing — https://youtu.be/2GQ6VYSjoo8

Yuvin Testing — https://youtu.be/LKBJ5qe0HAw

SKYPE TESTINGS FEEDBACK

So to summarize all the testings, the users found that the app layout was clean and minimalist. There was visual hierarchy present in both versions of the prototypes. They could easily navigate and browse through the pet of their choices.

4 out of 5 of the users opted for the the second prototype, version 2, which had the different screens variation as they could pinpoint and notice the different features available on the app.

SURVEY TESTINGS

Survey Link: https://forms.gle/LVa7iFTbWDRr7QqA8

Survey Form

SURVEY TESTINGS FEEDBACK

Analytics Link: https://docs.google.com/forms/d/1XZmWcK9ZBGyiUVqEda5lZLUwssb1XsSKx3mwOg-Pyoo/viewanalytics

Survey Results

SURVEY TESTINGS FEEDBACK

After analysing the responses given from the testers in the survey, it can be seen that the users go through the adoption process smoothly. Some discrepancies to be noted was that, the version 2 did much better compared to the version 1.

The A/B split test was conducted on the survey as well as both the screens and its variation was presented alongside each other so that the user can do a side by side comparison to decide which they would prefer.

ALL 10 TESTERS FEEDBACK

To recapitulate the testers answer with all testings, the homepage was much more better in version 2 compared to version 1 as the buttons could easily be demarcated with the outlines and the color theme used on the home page represented the RSPCA color palette which add up to the aesthetics of the app.

Secondly the pet category prior to see the selection of pets on version 2 was more appraised than version one as it directly communicates the pet’s category labelled as either dogs, cats or others compared to version one with its approach that the category was dog person cat person or others. The direct labelling of version 2 was much more preferred.

Thirdly, the filter search option in version 2 was very much appreciated by the users to narrow down their pet preferences and search which led them to their specific pet of their choice.

Lastly the pet profile of version 2 with its different categorization of the pet’s breed, age, size and status was very instructive and minimal which helped the testers in profiling their pet much more before proceeding to the adoption process.

One common mishap that was pointed out was that the hamburger button of my profile page in version 2 was not working and be resolved for the final prototype.

To summarize all the testings done from the first batch of testers: Gyanish, Kishlaiy, Raphael, Yusuf and Yuvin, and the second batch of testers that was done through survey forms: Arzina, Saffiyah, Zahrah, Fatimah and Zaynab, the A/B split tests result to:

90% Conversion Rate for Version 2.

10% Conversion Rate for Version 1.

Version 2 with its necessary corrections is selected as the final prototype for the RSPCA app.

FINAL PROTOTYPE LINK:

https://www.figma.com/proto/dBEZaIsz0tJMsX0bjXFUMh/FINAL-2?page-id=0%3A1&node-id=1%3A21&viewport=-1687%2C-3723%2C1.467813491821289&scaling=scale-down

REFLECTION

In the final version, all user goals have been successfully tackled.

- The user can navigate through the app fluidly without any incoherence.

- The user can sort out pets by category and preferences.

- The user can go through the adoption process smoothly.

This is because the app has a good hierarchy of information as well as hierarchy of visuals. It respects the norms of the universal design principle of balance and alignment with the different components of the app. Consistency can be seen throughout the app with respect to the RSPCA color palette. All the aforementioned elements create a symphony which creates a fluid, balanced and smooth app for its users.

--

--