RSPCA Pet care mobile app

Vincent Yip
3 min readApr 28, 2021

--

Logo of the client

RSPCA’ stands for the Royal Society for the Prevention of Cruelty to Animals. It is an independent, community-based charity providing animal care and protection services across the country.

The mission of the RSPCA is to prevent animal cruelty by vigorously promoting animal treatment and conservation. To do this, the RSPCA works to uphold animal cruelty laws and, where appropriate, lobby for new legislation.

What RSPCA does:

  • Caring for animals, rehoming neglected and unwanted animals.
  • Enforcing the law to prevent cruelty to animals.
  • Advocates for the welfare of animals, environments and issues.
  • Improving farm animal welfare.
7 step canvas from week 5

It was the first step to build on to the 3 design concepts.

Concept 1 — Context Variation

The first design model would appeal solely to prospective owners interested in adopting a rescue animal. This framework must be included in all aspects of the app design, ensuring that all content, functionality, and UI elements are appropriate for this particular audience, as well as any queries or needs they might have.

High fidelity mockups of 4 screens

The first concept utilised the colour palette of the brand on its layout making it simple but pleasing to eye.

Concept 2 — Aesthetic Variation

The second design principle would make use of Firefox’s Photon design language (also known as a design system). Illustration, iconography, and bright colors are prominent in this visual vocabulary. We were not expected to use the original RSPCA design language or branding for this concept, and we are also welcome to update the RSPCA logo to fit the Photon theme.

High fidelity mockups of 4 screens

Illustrations of dogs and cats have been highly used and the paws of the logo have also been made use of a background. Some of the screens are really simple and enjoyable with minimal words and more focus on the illustration.

Concept 3 — Accessibility Variation

The third and final design definition should take into account visually impaired people, including those with low vision. These users need more contrast in the user interface and have difficulty reading small font sizes and iconography.

High fidelity mockups of 4 screens

High contrast colour has been used to pop out the text from the background such as the teal 70 with the white text.

--

--