A responsive and intuitive website for The Sanctuary for Senior Dogs. Created in order to facilitate successful adoptions and mitigate the senior dog population in shelters more efficiently.
PROBLEM
The organization’s intention with the website is simple but the digital format it has created is very clunky and outdated in both its UI and overall functionality.
SOLUTION
Clearly outline the steps of the adoption and fostering process as well as creating a more clean, well-defined visual design of the website overall.
The Design Process
Define + Empathize
Research + Analyze
Design + Testing
Iterations + Prototype
DEFINE + EMPATHIZE
The Sanctuary for Senior Dogs is a non-profit organization based in Brooklyn, Ohio. It assists in the adoption process for senior dogs by informing the public and its followers of its events and opportunities to help grow its awareness. The organization’s intention is simple but the digital format it has created is cumbersome and very outdated in both its UI and functionality.​
Our group's objective was to work with The Sanctuary for Senior Dogs in order to understand its goals and discover its most frequently used systems. We wanted our research to help us understand the hierarchy of the website and determine how it should flow.​
By creating a proto-persona, we were able to hit the ground running in our research and interview plans.
Our research was conducted through use of interviews with dog owners as well as the organization’s co-owner.
Here's what we found:
User Findings
Majority of users want transparency in the online adoption process as well as a site that is friendly and approachable.
Co-Founder Findings
The organization's co-founder, Deborah Workman, stated that applicants are of all ages but donors tend to be older.
She feels that "senior dogs still hold a lot of value".
RESEARCH + ANALYZE
By creating a competitor analysis, our team was able to gather information from our direct and indirect app competitors. Doing this allowed us to visualize the potential for a cleaner layout for the Senior Dogs website redesign .
Senior Hearts Rescue + Renewal
The Grey Muzzle Organization
Sponsor Opportunities
Virtual Home Check
Grant Applications
Great Vet References
Pawsitive Teams
Ruff Haven
Crisis Sheltering
Showcases Therapy Dogs
Virtual Canine Therapy
Emergency Pet Supply Kits
Fostering Options
We wanted expand on our user, Emily Miller, a bit more. In order to gain more insight on her possible feelings and pain points, we created an empathy map. This, then, allowed us to map out a storyboard design and journey in order to, eventually, find our website's flow.
One warm and sunny afternoon, Emily decides to take her dog, Bella, out for a walk around the neighborhood.
During their walk, Emily and Bella spot someone walking their older dog. Emily has always admired senior dogs and smiles lovingly at the fluffy friend as they pass by.
Back at home, Emily sits at her desk and ponders about the older dog she saw. She always thought of adopting one but never knew how to provide that level of support.
Emily decides to do some research and quickly comes across the Sanctuary for Senior Dogs, not only was the website cute and informative, but the facility is local!
As Emily continues to explore the website, she becomes more confident in her decision to adopt a senior dog and can't wait to speak with someone at the facility soon!
Finding A Flow
After analyzing the original site and all of the research we gathered, we were able to start mapping out our user flow.
We wanted to stay consistent with the route in which we saw the original navigation going but add more readability and organization. On the right, is the main navigation flowing into the foster/adoption forms shown directly below.
DESIGN + TESTING
Once we were able to solidify our research, our user's goals, and the overall user flow, it was time to being drafting our vision for the website redesign. We started with simple drawings of buttons, menu placements, and what the flow of each page layout would look like.
Below, you will find the results we gathered from our research interviews organized into two categories of what worked for our users during navigation and what didn't work as well.
*hover over each image to reveal the mid-fidelity designs
PROS
• Navigation was simple to follow
​
• Donation process was 90% successful
​
• Minimal clicks in order to complete tasks
CONS
• Buttons need to be larger​
​
• Some information was not accessible
​
• Needs confirmation pages throughout
After analyzing the feedback we received from our mid-fidelity wireframes, we were able to get a better idea for certain layouts, color schemes, and icons.
This was a good time for us to study the original website again, this way, we could put ourselves back in the shoes of the "user". We wanted to showcase the overall appeal of simplicity in the website. This led us to creating our style guide and high fidelity designs.
High Fidelity
ITERATIONS + PROTOTYPE
With our high fidelity mobile design, we felt even closer to the finish line. The difficult part was trying not to get too comfortable with our work as it was due to the knowledge that we would need to soon iterate upon it.
A few parts of our redesign received praise along with some very appreciated feedback. Based on that feedback, we assessed the sections needing help and made the following iterations.
DropDown Menu Iteration
• color indication for items selected
• no unnecessary text or phrases
• logo instead of search bar
• search bar at the top of menu
• smaller font to fit extra verbiage
• no indicators for item selections
Adoption Process Iteration
• steps listed in detailed form
• only one visual graphic present
• text is condensed; no visual flow
• steps shortened; still detailed
• visual aids added for readability
• steps are spaced for better flow
A + B Testing
During our testing process, we decided to do A + B testing on the Available Dogs section of our redesign. Users that tested had some interesting feedback that helped us to get further in our overall design and push through to designing our high fidelity prototype.
The layout is familiar and reminds them of other frequently used platforms
There were more dogs visible on the screen
It was easier for users to miss information or available dogs.
Users felt the largers cards didn't showcase the dogs as well.
B
A
After making the necessary iterations on sections of our prototype, we finally reached our final product. We were able to create a responsive website redesign that was readable across desktop and mobile devices.
KEY TAKEAWAYS
Redesigning a website that already needed multiple changes to its organization was a challenge. Being able to keep our user's needs at the forefront of our research and design made a major difference in the final outcome. Here are a few big takeaways from this group case study including elements we would have loved to implement with more time.
The organization of a website redesign makes all the difference.
Research and feedback are important in making informed decisions and to iterate clearly throughout the process.
Consistency throughout the design is key in order to communicate effectively with the user/audience.
my responsibilities
Competitor Analysis
Interviews + Testing
Storyboard
User Flow
Low-Fi Wireframing
Usability Test Organization
Visual Design + Prototyping