Dog Rescue Without Borders (DRWB) is a non-profit dog rescue organization that teams with other local groups in Tijuana, Mexico to save homeless and abandoned dogs. The website redesign aims to establish a brand that evokes fun, reliable, and friendly vibes that will invite users to put trust in the organization and, ultimately, adopt, donate, or foster.
Duration: April 2014 - June 2014
My Role: Interaction Designer and Front-End Developer
For starters, DRWB's current website uses vague navigation links, confusing site architecture, and ineffective imagery. The client's goal of the website redesign is to present DRWB as an honest and reliable reputation so that people adopt / foster their dogs, donate, and volunteer to their cause. With just 10 weeks, my teammates and I were determined to give the website an overhaul by first getting to know the target users.
Understanding the User Needs
After conducting 10 user interviews and collecting responses on post-its, we determined that the primary users of the website could be organized into three personas; volunteers, potential adopters, and fosters. Throughout the design process, I would frequently refer back to the personas to ensure preceding steps were aligning to the end user needs.
To gain insight and inspiration, we evaluated the good and bad cases of brand, functionality, content, information architecture, navigation, and design of three competitor websites. I took a deep-dive in Rocket Dog Rescue's website and really liked how they organized their IA and showcased meta-data about the dogs in a delightful way.
Updating the Client
Before jumping the ideation phase, we prepared a creative brief for the client that summarizes our user research findings, objectives, scope, and potential roadblocks.
The mood board served as a canvas of images, text, colors, and textures aimed to evoke feelings of care, unity, comfort, and playfulness. These are the emotions that align with the act of adopting and fostering a rescue dog, as well as donating to the cause.
Wireframes & Functional Specs
Using Axure, my teammates and I worked together closely to create consistent layouts and styles between the different screens of the website. We each annotated the functionality for all the interactive elements on the pages we were responsible for.
After gathering user feedback on our wireframes, I made adjustments before bringing the designs into development.
To allow users to find the dog that meets their needs, I designed a filter feature with the criteria of "Breed", "Age", "Sex", and "Size". To add to the playful brand, I added a delightful transition between each filter selection.
Above: Age field set to "Puppy" repopulates the collection of dogs to only display puppies.
Users were apprehensive about where their donations were going towards. The client reiterated that the money was going towards items that would help the dogs (ie. medicine, shelter, toys, and food). I decided to leverage Instagram's API to collect imagery of "wish-list" items for the pups to be displayed on the donations page.
Above: A random selection of wishlist items that the donation money will go towards. Images leveraged from Instagram's Developer API (#dogtreats #dogtoy #dogbed #dogmeds).
At the end of a 10 week timeline, we tied our user research, client's needs, interaction design, and technical implementation into a 15 minute presentation given to the class and client.