Animal Rescue
Creating a High-Fidelity Prototype for Animal Rescue’s Website
DURATION
3 weeks
YEAR
2024
ROLE
UI/UX designer, brand identity designer
PROJECT
Course assignment
about
Animal Rescue
A hypothetical animal rescue organization needed a four-page website focused on showcasing dogs available for adoption, along with a logo, colors, and branding. Prototyping had to be added to certain pages and elements.
Green was chosen as the primary color to symbolize fresh starts and harmony, complemented by orange for contrast, happiness, and optimism. The cheerful website, featuring the Sigmar font, required a clean, simple logo for balance. Raleway was added as a straightforward font for clear messaging.
TASK
What to include
Homepage
- Logo/Header area
- Navigation menu
- Hero image
- Text surrounding the dog shelter
- Section highlighting 3-4 dogs up for adoption
- Section on how to adopt
- Footer with social media icons and contact information
Dog category page
- Dog photos
- Dog names
- Information on each dog
- Button for more information on the dog
specific dog page
- Dog name, photo and description
- Dog age, size, gender and breed
- Whether the dog is good or not with cats and children
- If dog is house trained
- Link to a form they can use to book a visit with the dog
contact page
- Contact information
- Contact form
- Map
Homepage
Ideas
Include a clear call-to-action section for pet adoption, highlight the organization’s achievements to build trust, and showcase owner satisfaction with adopting through Animal Rescue
Challenges
How to create several sections without it looking clustered or too boring
Solution
Use same colors, icons and shapes to create a combined expression, and distribute them equally on the site
focus points
Compelling
Helps with reaching the goal of pet getting adopted or getting donations to the organization
Clear
Avoids distraction and makes sure user is focused on what’s important
Charming
Pets’ charming nature and a charming design helps further the organization’s goals
Dog category page
Ideas
Add filter sections to enhance usability and allow users to save pets to a “Likes” page for easy access to potential matches.
Challenges
What makes sense to add in the filter-sections?
Solution
Add what was requested from task, but also geographic options. As breed has many options, it was added on top as an accordion. Search-bar also added as it is important for improved usability.
Specific dog page
Ideas
Give important information as clear and short as possible, also added icons to make meanings more explicit
Challenges
The layout of the pictures and short information itself. Worried if it looks weird to change out the heading image with the dog image and descriptions
Solutions
As the dog is in center, it can work to place it on top of the page. Avoids too much scrolling and gets straight to the point
Contact page
Ideas
Ensure consistent branding and keep the design simple for better efficiency.
Challenges
Layout of the different elements so it doesn’t look cluttered
Solution
The layout seems symmetrical as there is an invisible rectangle keeping the items in place
Lessons Learned
Structure of Adoption Pages
I have learned how to structure an adoption page to highlight the most important sections, while also making it user-friendly and accessible
Prototyping in Figma
This project has made me more comfortable around prototyping in Figma
Other Work
Nor Møbler
UI DESIGN
Høydepunkt Arrangementsservice AS
UI/UX DESIGN, BRAND IDENTITY DESIGN