Project Overview
Course: UX Design 1- Web Dev 2
Project Type: Solo Project
​
My Role: UX/UI Designer - Web developer
Timeline: September - December 2024
​
Story
Pawsitive Futures is a non-profit animal rescue that helps cats and dogs find forever homes. I designed and built a simple and accessible website to make the adoption process easier. It's my school project for UX Design 1 and Web Development 2 .
​
Outline
Competitive Analysis, Persona, User Journey, Sitemap, Mood Board, Style Guide, Lo-fi and Hi-fi Prototype, Web Development
User Flow
01.
Start at the Home Page
Users land on the homepage with a prominent call-to-action to start the adoption journey.
02.
Navigate to the Adoption Page
Clicking on the adoption button takes them to the page where they can choose between adopting a dog or a cat.
03.
Browse Available Pets
After selecting a pet type, users see a series of animal cards featuring a photo, age, and sex.
04.
Learn More and Get in Touch
Each card includes a “Learn More” button that leads to the contact page for the next steps.
UX Research
Competitive Analysis
I reviewed three Ottawa-based animal adoption websites. From this analysis, I identified key insights: the importance of a welcoming homepage, communicating the website’s purpose, and making the pet adoption process simple.
User Persona & User Journey Map
I reviewed recorded interviews with three groups of users: supporters, staff and volunteers, and adopters, to better understand their needs. I created three user personas and chose to focus on the Prospective Adopter as my primary target user. Then, I created a user journey map to highlight the steps an adopter might take during the adoption process.
Sitemap
I focused on designing three key pages because of the time limit for this project: the Home page, Adoption page, and Contact page. However, I created a complete site map to outline the full structure of the website for future development.
Moodboard
Wireframes
I created wireframes for the Home, Adoption, and Contact pages in three screen sizes: phone, tablet, and desktop.
Home Page: Includes a hero image with a call-to-action and service cards for adoption, donation, fostering, and clinic.
Adoption Page: Includes two call-to-action buttons allowing users to choose between dogs and cats.
Contact Page: Includes a contact form for inquiries, along with the location and an embedded map and reviews section.
Brand Identity Design
Colour Palette
I chose turquoise blue in two shades as the primary colour to show care and compassion. Yellow was selected as a complementary colour for warmth and friendliness.
Logo and Icons
The logo is a custom line-art design combining a dog and a cat within the shape of a heart. I also designed custom line icons for key site sections
Typography
For the primary heading, I chose the Fredoka font to give a friendly tone. For secondary headings and body text, I selected Poppins for its readability and modern appearance.
Buttons
I used yellow for the primary buttons to make them stand out. I used turquoise blue for secondary buttons to keep the design consistent with the brand colours.
Hi-fi Prototype
I created high-fidelity prototypes for three screen sizes, desktop, tablet, and mobile to ensure a responsive and accessible user experience across devices. I added interactions to show how users would move through the website.
You can explore the desktop version of the interactive Figma prototype and walk through the three main pages of the website​​​​
Web Development
As the final project for our Web Development 2 course, we were tasked with coding the website using HTML and CSS. I used Bootstrap as the framework to build a responsive layout and customized it by editing variables and overriding styles, and the result is a functional and accessible website.