Macbook Air
My Role
Project Manager
User Scenarios
Prototyping
User Personas
Wireframes
Conducting interviews
Interview Questions
Sketches
Competitive Analysis
Project Planning
Priority Matrix
Affinity Mapping
Project Timeline
1st
Day
2nd
Day
3rd
Day
4th
Day
5th
Day
6th
Day
7th
Day
8th
Day
9th
Day
10th
Day
11th
Day
12th
Day
Research/ Planning
Interview
Questions
Paper
Wireframes
Usability Testing
Mid Fidelity
High Fidelity
Prototyping,
Presentation
Conduct interviews,
Heuristic Evaluation
Card Sorting, Information
Architecture
C&C Analysis
Problem Statement,
Solution Statement
Affinity Mapping,
User Flow
User Persona,
User Scenario,
User Flow,
Information Architecture
Business & User Needs
Action Priority Matrix
UX/UI Design
Discover Phase
The user interview method helps to gain a deeper understanding of who the users are, what their experiences are like, what are there needs, values in an animal welfare website.
BSPCA are not organized with appointments and services.
BSPCA hos dinners that gets donated to animals in need. but they are too expensive and not inclusive to people of all ages.
BSPCA needs more advertisements in social media and in websites.
They should host more events for volunteers to join and guests.
Qualitative Research
Interview Questions
Key Insight Derived
Double Diamond Process
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Discover
Develop
Deliver
Next Steps
User Research
User Interview
Competitive
Analysis
Card Sort
information architecture
User Persona/ Scenarios
Business and User Needs
Matrix Priority Chart
User Flow
Sketching
Usability testing
Draft Wireframes
Visual Design
Prototype
Next Steps
Visual Design
High Fidelity Wireframes
The users will be able to see the companies social medias to follow them on other platforms
The user will be able to have quick assistance if the user has any inqieries.
Here is where the user will be able to navigate through the pages
This is a short introduction of what the companies goals arw and how they started out.
Social Medias
Chat Bot
Navigation Bar
Our Story
Possible Solution
The Donor
We believe by having a website that accepts multiple ways of payment such as benefit, credit card, visa and apple pay for the donors. We will achieve this when the user is able to preform this task easily.
We will know this to be true when the user is able to go to the payment gateway and make a successful donation payment.
The Adopter
We believe by building a clear intuitive navigation with steps on how to adopt an animal with detailed information about each animal from there background to the name. We will achieve this for the adopters by gaining Complete knowledge and able adopting the pet.
We will know this to be true when we have successful adoptions from the users by getting feedback on how they are doing with their pets.
The Volunteer
We believe by creating a website that has information about how to volunteer with clear steps, and having information about up coming events that the organization are hosting that raises awareness. The volunteers will be able to join events or volunteer in the animal welfare with ease.
We will know this to be true when the user are able to preform booking as volunteer and joining the events successfully.
Target Audience
Pet Advocates.
Donors.
Adopters.
Volunteers.
The Goal
The project's Goal entailed the revamping an animal welfare website (BSPCA), involving extensive phases of user research, competitor analysis, organizational assessment, meticulous sitemap creation, thoughtful wireframing, and rigorous testing—culminating in the development of the final, refined solution.
Deliver Phase
Next Steps
Bahrain Society for the Prevention of Cruelty to Animals (BSPCA)
BSPCA (Team
Work)
UI/UX Case Study
Usability Testing
Business & User Needs
Have you ever heard of BSPCA? Are you aware of their activities?
What do you think about such organizations?
Tell me about the last time you experienced donating, volunteering, or even adopting a pet.
Walk me through the last time you rescued an animal? Is that something that you will be interested in? Tell me more about that.
Describe a situation that would allow the community to raise awareness about animal welfare issues?
What would motivate you to support animal welfare, whether through volunteering, donations, or other means?
How do you think the community could support Animal welfare better?
In your opinion how could the community encourage or motivate people to participate in BSPCA?
What do you think will enhance your experience with donating?
Were you interested in adopting? If so, how would you go about it?
If there’s one thing you could change in the animal welfare in Bahrain what would it be? Why?
Competitive Analysis
Thank you for your time :)
Wireframes/ Prototypes
This Section will showcase the sketches, wire frames, and the final product of the BSPCA final Website Redesign Prototype.
Sketches Phase
Usability Test
Mid Fidelity Wireframes
Information Architecture
Adoption
Donation
Volunteer Center
Lost & Missing Animals
Animal Care
Clinic
Rehome
To Adopt
Online Donation
Fundraising
Volunteer Team
Thrift Shop
About us
Developer team
About app
Animal Care Guide
Food
Cat and Kittens
Dogs and Puppies
Rabbits
Clinic
Card Sorting
Define Phase
These are the user personas where were based on research that we have discovered. Which are The donor, adopter, volunteer. Here we take a diep dive into each persona and who they are
Eman Ali/ The Donor
Layla/The Adopter
Eman Ali/ The Donor
Quote
Quote
Quote
Breif Story
Breif Story
Breif Story
Age
Age
Age
Education
Education
Education
Status
Status
Status
Occupation
Occupation
Occupation
Location
Location
Location
32
24
27
B.A. Business
B.A. Web Media
B.A. Marketing
Married
Single
Single
Regional Manger
Graphic Designer
Client Service
Bahrain
Bahrain
Bahrain
User Scenario
User Scenario
User Scenario
Eman is an animal advocate and likes to donate often, she wants a website that has multiple and secure ways of payment to donate for different causes such as participating in medical bills for recused animals, for special needs or to donate any amount of money in general. She would also like to buy thrifted products as long as the benefits goes to the animals in need.
Layla believes in adopting pets and not shopping for them, she is looking for a website that has detailed descriptions about each pet to then make her final decision of adopting a cat. Layla also likes to see testimonials of previous owners who adopted pets and what their experience were like and how the pet is doing now.
Khalid is a veterinarian and he spends his free time volunteering at a local animal shelter. Khalid is looking for a website that has information of local events happening regarding volunteer and where is it happening and at what time. Khalid also lives far away so he cant always go to the shelter but would like to volunteer in any events.
Needs and Goals
Needs and Goals
Needs and Goals
Easy and trust worthy payment/ donating method.
Multiple payment options.
Proof that her donations is actually being implemented.
Going to fundraising events.
To understand organization goals and mission.
Needs a clear guide for adoption and how to take care of animals.
Easy and clear adoption process.
Wants / View animals details and history.
Would like to see previous owners experience and where are the pets now.
Strict policies for adopting pet.
Flexible volunteer programs and timings.
They want their work to be recognized and appreciated.
Gathering a volunteers community to Interact with.
Using his expertise in saving as many animals as possible.
Pain Points
Pain Points
Pain Points
Not being able to donate safely.
Not confident about where the money is going.
Complicated process for donating.
Limited options for payment method.
Not being updated about fundraising events and opportunities.
Adoption process being complicated.
Not having strict policies when adopting (having background checks on new adopters.)
Not having detailed description of animal breed/ story.
Not being informed on how to care for the animal.
Lack of awareness for animal welfare.
Not having a community to work and connect with.
Volunteer timings not fitting with their schedule.
Not being updated about volunteer programs and activities.
Eman is 32 years old she works in a corporate environment and she is an animal rights activist. She believes in the inherent value of every life and creating a world with passion for making a difference. Actively contributing time and recourses to various organizations and making a meaning impacts on the lives of animals.
Layla is 24 years old she believes that adopting an animal is better then shopping. As rescued animals deserve a second chance too. When Layla has the chance to rescue an animal she goes out of her way to make sure the animal is safe
Khalid is 27 years old veterinarian and he spares his own time to volunteer at the local animal shelter and to promote pet adoption. He Is an advocate about the wellbeing of animals and wants to spread awareness on how to care for them.
Opportunities
Opportunities
Opportunities
Donation boxes/stands in public places
Show acknowledgment and appreciation for big donations
Increasing social media and promoting the work being done
Offering multiple payments methods for donating
Company contact the customers checking up on pet receiving updates and sharing testimonials.
Posting about recused and pets up for adoption on social media platforms.
Success stories and testimonials.
Engaging social media campaigns highlighting the importance of pet adoption.
Collaborations with rescue organizations.
To receive a accredited certificates and reward loyalty.
Cooperation with different stores and places to increase the scope of volunteering.
Having events that will allow people to socialize with the animals and interact volunteers.
Active and reliable relationship with BSPCA.
“I care deeply about animal rights and to help them live happier lives”
“There are so many good animals out there that deserve a second chance.”
“I love volunteering it not only makes me happy to see that I am making a difference in the lives of animals, but also allows me to learn more about animal care”
Business and User Needs
Matrix Priority Chart
User Persona/ Scenarios Sorting
Develop Phase
User Flows
The Donor:
The Adopter:
The Volunteer:
These are the task flows of the donor, adopter and volunteer. These are the specific tasks that the users will preform based on there goals, pain points and opportunities.
Home Page
Home Page
Adopt Page 3
Adopt Page 3
Donation Payment Page
Donation Page Information
Volunteer Details Page
Payment Success Pop Up
Donation Payment Page
Adopt Page 1
Adopt Page 1
Adopt Page 4
Adopt Page 4
Volunteer Page 1
Donation Payment Page
Volunteer Pop Up
Adopt Page 2
Adopt Page 2
Donation Page 1
Donation Page 1
Volrnteer Form Page
Volunteer Page
Volunteer Success Pop Up
Volrnteer Form Page
Macbook Pro
The Donor
The user needs a clear and multi-option donation process with a secure payment gateway . So they will satisfy their desire to protect animals and ensure safety that their money is going to the right place.
The Adopter
The user needs a clear navigation and information on how to adopt an animal, as well as require enough information regarding the animals story and needs. So that the user is able to make their final decision in adopting the animal.
The Volunteer
The user needs an easy and clear way to volunteer, stay updated on events, information and stay engaged being captivated in volunteering, to sustain their passion for advocating animal welfare.
Problem Statements
Easy navigation bar.
FAQ’s kept for users to get information easily.
Adopt page has information about each pet.
Customer testimonials.
Features :
Navigation bar is minimal.
Social medias kept on footer.
What's app button on the left bottom corner.
Services are listed on the website.
Features :
Footer has quick links and social medias.
The website is minimal with high quality images.
There is a search bar functionality.
Features :
The information available is insightful minimal towards the users needs.
The website is multilingual.
Goals of charity are mentioned in details.
Available live chat bot.
Option for people to register online to volunteer.
Secure payment gateway.
Features :
Offers a wide range of products for animals.
Product recommendation section.
Website has privacy terms ans secure.
Loyalty Program.
Features :
Website is multilingual.
Social media icons places on footer.
Good call to action and value propersition.
Slide show images.
Features :
Have an ecommerce website.
Multilingual.
Animal details and there stories how they ended p in the shelter.
Testimonials of people who adopted pets previously.
Host volunteer events.
Key Insight From C & C Analysis
Font Used
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Poppins font is a minimal and timeless sans serif font. It is very neat and clean. It has more readability and variety of options. That’s why we decided to go with this font.
Poppins Bold
Poppins regular
Poppins Light
Poppins Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
Poppins
Color Used
Primary Color
#007293
Text Color
#FFE141
BG Color
#F0FCFF
Text Color
#58585A
Secondary Color
#009BC9
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Macbook Air
Test more people to develop the website futher.
Design the rest of the remaining pages.
In the profile page to include th users previous donations and
volunteers.
Macbook Air
Task 1 : Adoption
To Adopt any pet in 2 minute
Task 2 : Donation
To Donate from online donation in 2 minute
Task 3 : Volunteer
Join a event as a volunteer in 2 minute
Comments:
Comments:
Comments:
Results:
Results:
Results:
7/8 People was able to completed the task in under than 2 minute.
8/8 Said that the flow is clear
3/8 Find the donate banner confusing because it the first thing I saw in the page.
8/8 People was able to completed the task in under than 2 minute.
8/8 Said that the flow is clear
2/8 People don’t know what the parentage stand for(Is it the target? is it like the monthly limit?)
6/8 People was able to completed the task in under than 2 minute.
8/8 Said that the flow is clear
8/8 People was click in the quick access and not went thorough the details page which confusing.
“Adopt me” button on the description card for animals.
Decrease the number of the donate banner and don’t make them appear in all pages.
Be aware of spacing and size of the text in all pages.
“Donate” button confusing.
No need for donate banner in the page because I already donating.
Have the custom option be more obvious.
Add title for the page and for the percentages.
Add a share icon for the events.
Include itinerary for the event.
change the join as a volunteer or attend event to view more details.
Remove the donate banner in the page.
Business Needs
User Needs
Keep stray animals safe
More funding from society to stay operating
Need more volunteers and donations
Loyalty experience
We need rescuers
Licensed volunteers (veterinary clinic)
Building a trust worthy experience for consumers
More sponsors and collaborations
Volunteer engagement
Community engagement
Positive media and public relations
Building relationships with recurring donors
A place near by
Different/ Easy way of donation
Trustful organization to donate
Available vet and medical care
Activities/fundraising to join to help animals
Recovered stray animals to adopt
To donate/ Volunteer
Clear steps to adopt
Flexible volunteer timings
Live chat support
FAQ’s
More visuals of animal adoption
Easy account creation and login
Animal welfare awareness
Organization Growth
More social media and promotion
To know more about the rescued animals
Certificate for volunteering
A more direct and clear website redesign
Clear pricing and availability information
24 hours availability
Success stories adoption
Improving adoption process