The House Of Bow Meow Responsive Website
Project Vision
After completing my design exercise on the pet adoption app The House Of Bow Meow I created a fully functional, informative, and constantly updated responsive website listing all available pets in order to increase pet adoption and provide a large amount of information about adoption and pet care.
To view the app, click The House Of Bow Meow App
Challenges
-
Create easy-to-understand data visuals for Users.
-
Browse Pets and book appointments with ease.
-
Provide users with access to educational resources for learning about pet care and the adoption process.
-
Raise awareness about rescue pets.
-
Improve the customer experience on all devices.
Kickoff
To begin, I asked myself a few simple questions. Who is our main customer? What are their goals? Why would someone visit this website? How large do I want the scope of this project to be? After later interviewing four participants to establish themes, it became clear that the goals they wanted to achieve all fell into the same categories: learning more about pet adoption and rescuing pets so that the user feels more confident to adopt without regret.
Site Map
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on Pet adoption resources and simple adoption process.
Starting the design
Paper Wireframe
● Paper wireframe
● Digital wireframe
● Low-fidelity prototype
Before moving on to high-fidelity wireframes and mockups, I wanted to get a sense of what the website core would look like in front of me.
Digital Wireframe
After ideating and drafting some paper wireframes, I created the initial designs for the house of bow meow Responsive website.
Low-fidelity prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of viewing an item about to expire and using it in a recipe.
View
Refining the design
● Mockups
● High-fidelity prototype
● Accessibility
Mockups
Based on the insights from the usability studies, I applied design changes like providing a clear section from the home screen to browse desired pets or by breeds and also placed a floating Petbot for assistance and queries.
View
High-fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
View
Accessibility considerations
Create easy-to-understand data visuals and navigation for Users. Browse Pets and pet-related resources with ease.
Providing a AI Assistant Petbot for interactive user query and help.
Responsive designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Onboarding Screen
Conclusion
This project allowed me to improve my UX skills. While working on this exercise, I learned and had a lot of fun. Working on a project from start to finish is both exciting and exhausting. It was difficult at first, but it quickly became a fluid process for me as I became familiar with the standards and consistency. I followed material design guidelines throughout the process. I design properly to solve problems for potential adopters who are looking for a new pet that fits their lifestyle.
Takeaways
What I learned
Prioritizing
Narrowing down the ideas until you have the most relevant items to show.
Visual Hierarchy
How to direct the user's attention to the most important information first.
Iteration
The more you iterate on sketches, the more time you save and the better your ideas become.
I learned that the users are the most important factor in designing interfaces, and any small change can enhance their experience and make the product more enjoyable to use like the small gesture for booking an appointment.
UI Style Guide
