UX2 A2 — Pet Care App

4 min readApr 20, 2023

https://upload.wikimedia.org/wikipedia/en/thumb/0/05/RSPCA_logo_2014.gif/300px-RSPCA_logo_2014.gif

The Project

The project for this assignment was to create 3 different design concepts for an app for RSPCA. The main goals are to educate people on how to take care of their pets, especially exercise and diet, and find services in their local area.

The first design concept was to design a pet adoption feature where people can look at and adopt pets.

The second concept was to design the app using Firefox’s Photon design to make it aesthetically pleasing.

The third and last concept was to develop the app with accessibility in mind.

In my design, I based the second and third concepts on the same design. I found it difficult to create unique designs so I applied some different design concepts to the same design.

7 Step Process — Ideation

This is my sketching and ideation for the general design. This is the 7 step ideation process that sparked my initial design idea. As for the ideation for my actual screens, I looked at existing solutions or pages similar to what I was imagining. My ideation for the individual design concepts was done in Figma, and they ended up as my mockups. They might be a little too high fidelity however and should have been more general and not so detailed. In hindsight, I should have started with actually drawing the screens before starting the mockups and high-fidelity versions.

Design Concept 1 — Context Variation

The context variations feature a pet adoption feature. The feature lets you browse available pets in your preferred category and apply to adopt the pet. Extensions to this feature could be to schedule a play date with a pet to find out if you are a good fit.

The feature includes

Browse by preferred categories
Filtering and search
Introduction page for pets that are up for adoption
- Bio of pet and pictures
- Contact the current owner
Send an inquiry about adopting a pet

Design Concept 2 — Aesthetics

The aesthetics concepts use Firefox’s Photon design. I found it difficult to use as it seems like it is in its early stages of development and has been rebranded to Acorn

Aspects of the design system I have used:

Their button component (https://acorn.firefox.com/latest/components/button/overview.html)
Some color recommendations
- Background
- Use primary color on important buttons or as border colors

Features of the design:

Ability to add pets to your account
A home page that lists recommended articles and quick links to services
Services page where you can find vets, groomers, and more
Learning page where you can find articles on how to take care of your specific pet
Pet details page with an overview of all previous medical visits and medical history

Design Concept 3 — Accessibility

The accessibility concepts focus on providing a user interface for everybody. The design leverages icons to ensure that the meaning of buttons is clear without relying on color indication

The design has the same features as the aesthetics concept but is visually different

The design features:

Larger buttons
Makes it clear that they are clickable
Icon usage
- Use icons on buttons to indicate that they are clickable
- Use icons to indicate the type of buttons (radio, checkbox etc)
- Use icons combined with words