The Rescued Dog, situated in Denver, Colorado, is a shelter dedicated to serving and engaging with the local community. Their mission includes facilitating adoptions for dogs of all ages and raising funds to expand their shelter capacity. The website plays a pivotal role in their business operations and community outreach, serving as a cornerstone for their growth within the Denver community.
The shelter requires a comprehensive website to provide the community with information on dog adoption and donations. Such a platform would facilitate their expansion efforts, enabling them to make a more significant impact on the community through their dog-focused initiatives.
Our aim for the website is to offer a user-friendly and engaging platform for individuals seeking information about the shelter. It should serve as a comprehensive resource, catering to a wide range of needs, from volunteering and fostering to donating and adoption inquiries.
Google Certificate Project - Web Design
Date: August - September 2023
Role: UX designer designing a website for The Rescued Dog from conception to delivery.
The Research:
I conducted empathy mapping to gain insights into the needs and preferences of the target user group. The research identified a primary user demographic consisting of first-time adopters and individuals interested in supporting the shelter's mission.
This user segment affirmed the necessity for a comprehensive website serving as a centralized resource for all aspects of dog adoption and shelter support. However, during the creation of personas, additional challenges emerged, rooted in the lack of user-friendliness in existing dog shelter websites, particularly for those with limited technological familiarity.
An exemplar user problem extracted from one of the personas developed for this project is as follows:
Andy, a father and novice dog owner, seeks an easily navigable dog adoption website to ensure he can find the perfect canine companion for his family. His motivation arises from his son's desire for a dog, believing it would make a valuable addition to their household.
Starting the Design:
Prior to the creation of paper wireframes, I established a sitemap for the website. This step allowed me to define the necessary navigation structure for the design process. The paper wireframes were subsequently developed in alignment with this sitemap to ensure consistency between the design and website navigation.
Sitemap
Paper Wireframes
Digital Wireframes
After the ideation and the initial development of paper wireframes, I advanced to create the foundational design concepts for the Rescued Dog website. In crafting our digital wireframes, attention was given to ensuring effortless navigation and visibility of crucial and frequently accessed elements on the website.
Additionally, after creating our digital wireframes it became evident that infusing a more cheerful and inviting design aesthetic was of utmost significance. This approach was adopted to inspire a sense of joy and enthusiasm among users, encouraging them to actively engage with and contribute to the mission of the website, thereby fostering a positive and compassionate online community.
Lo-Fi Prototype and Usability Study
Usability Study Parameters:
Study Type: Moderated
Location: US, Remote
Participants: 5
Duration: 15 - 30 minutes
Usability Study Findings:
Images, Icons, and Design Scale: Users found the images, icons, and overall design to be excessively large, which hindered their ability to locate desired content efficiently.
Navigation: Users expressed satisfaction with the website's navigation, finding it easy and helpful in their search for information.
Desire for Playful Designs: Users indicated a preference for more playful design elements in the mockups, citing a desire for a departure from the typical somber aesthetics often encountered on other adoption websites.
Mock-Ups and Hi-Fi Prototype:
In response to usability study feedback, we opted to streamline the design by reducing its overall dimensions, creating a more compact and less overwhelming layout. This involved downsizing the navigation bar, icons, and images featured throughout the webpage to enhance user accessibility and comfort.
A notable recommendation stemming from the usability study was to infuse a playful design element into the final product. In response, I integrated this feedback into various design elements, such as the font selection, button shapes, image presentation, and color scheme. The overarching goal was to leverage insights from the usability study to craft an inviting, inspiring, and playful design.
Other Mockups:
Takeaways:
Users expressed that the website's design evoked excitement and a sense of purpose in their efforts to support local dogs in need. They found the website to be well-organized, informative, and enjoyable to navigate, enabling The Rescued Dog to efficiently carry out its mission of aiding numerous dogs. Notably, a peer's feedback included the sentiment that "this website showed me how I can contribute to the welfare of community dogs, and I'm now considering adopting a canine companion of my own in the near future."
Throughout the website design process, I acquired proficiency in utilizing Adobe XD, a new software tool. Most significantly, I cultivated an understanding of the importance of tailoring each design to the specific needs and identity of the company in question. This involved a thorough exploration of various design elements to determine the most effective means of conveying the company's message.