< Back to Portfolio
Project Name: Instant Pet Finder
Project: Pet Adoption Sign-up
Client: Instant Pet Finder
Project’s problem and context: The client asked me to create a design for a sign up form on their new pet adoption website. The website will allow users to receive emails about adoptable pets as well as communicate with shelters and search through available pets in their area through the website. I was asked to create simple wireframes of the form screen.
The primary goal of this form is to allow the audience to register their details. This will then allow them to see, through searching and by email, suitable pets that are available for adoption. A secondary goal is to gain further information about the audience. This will initially help their own search by reducing the number of animals to the type/s and area they are interested in. The additional information will also be useful for the animal shelters who have to gather information about adopters before allowing an adoption to take place. After initial sketches I produced wireframes using Balsamiq the low fidelity wireframing tool.
Home Page: There is an image slider which gives the user a variety of larger pictures to look at of animals that are currently up for adoption, possibly even including their name within the picture. These would act as a ‘hook’ to draw the user into signing up for the service. The user can then register or log-in if they already have an account.
Register Page: This includes unique text boxes for name and city/town and a drop down box for the county (or region) that they live in. The sequencing along the bottom of the page shows the user how far along the registration process they are.
Account Creation Page: This has text spaces for email and password, with a password confirmation box included. The checkboxes at the bottom of the page give permission to Instant Pet Finder to send emails and connect the user with local, relevant shelters. Again, the sequencing along the bottom of the page shows the user how far along the registration process they are.
Preferences Page: This uses a check box to allow the user to select more than one option. A user may be interested in adopting more than one animal or have not currently made a preference. The sequencing along the bottom now shows that they are almost finished. In the desktop version, pictures can be selected and a check/tick will appear over each that is selected.
More Details Page: This includes some things that shelters may need to know before placing an animal in a new home. Some pets may not be suitable for homes with small children, some may need an enclosed outdoor space. This page enables the user to be targeted with the most suitable animals in the pet search as well as allowing the shelters to immediately have more information about the user. The number stepper enables the user to quickly select the number of children/children under five they have with the default being zero. The sequencing along the bottom now shows that this is the last step.
Final Page: This is a ‘Congratulations’ page for registering and also allows the user to search for an animal immediately. There are also other options to return to the home screen, view their account and log-out.
I also produced a desktop version to show the client how this could work on multiple screens:
Skills:
- UX design Patterns
- Web Design Process
- Balsamiq
Hannah Belshaw 