Scooby Doo’s Rescue Mission

Summary: The president of the nonprofit needed our help to redesign their website because they felt their design was outdated and negatively impacting their organization.

Objective: Improve the website's UX and visual design to potentially increase awareness, donations, and adoption rates.

My Role: UI Designer, UX Designer & UX Researcher

Results: We had 2 different versions of their website. This included:

  • the revamped Wix website

  • and the “reimagined” website I created using Figma.

After eight weeks of using the new website, we were able to achieve a 58% increase in website traffic and boosted the average session duration by 18%.

Research

Competitive Analysis

By conducting a thorough analysis of 3 competitors in New Jersey, we discovered that they had a much better user experience and better implemented modern design practices.

Part of our analysis was conducted by auditing our own website by using the Nielsen Normans Usability Heuristics. We found that our organization needed to improve:

  • Ease of Navigation

  • Consistency and Standards

  • Flexibility and Efficiency of Use

  • Aesthetic and Minimalist Design

We then audited our competitors with these same principles and looked at where we could improve the overall UX design for our users in this specific industry.

Survey Findings

To gather essential information about our potential users, we conducted a comprehensive survey that focused on three key sections of the website:

  • In regard to adopting and fostering dogs, our research uncovered a strong desire among users to know more about the application process.

    Furthermore, many individuals expressed concerns about unknown backgrounds or potential behavioral issues.

    We also found that women exhibit a higher likelihood to adopt and foster from SDRM compared to men.

  • Regarding donations to SDRM, participants emphasized the importance of having multiple donation options available.

    They expressed a preference for various donation methods, including making online payments, mailing in supplies, purchasing items from a wishlist, and donating money in exchange for a gift.

  • Based on our findings, we have developed an innovative concept to rebrand our "shop" as a "donation shop." In this revamped approach, users will have the opportunity to make a donation and receive a gift that matches the value of their donation.

    Furthermore, our survey highlighted the significance of pet owners' concerns regarding the ingredients in their pets' food and treats. We observed that participants prioritize their pets' overall health, indicating a strong focus on providing high-quality nutrition for their furry companions.

Each section allowed us to gather valuable insights and gain a deeper understanding of user preferences and behaviors before starting the design process.

The “Helper” & The “Spender”

Utilizing the insights and demographic information gained from our survey, we developed persona archetypes that effectively represent two primary user groups of our website.

“The Helper” and “The Spender”.

This strategic approach was crucial in ensuring that our design process remained focused, avoiding an excessive focus on numerous user groups. By creating these personas, we were able to gain a deeper understanding of the primary users and focus on meeting their needs.

Ideation

Sitemap

To establish a structured framework for our website, we created a sitemap. This enabled us to come together as a team and determine what main pages we needed to develop.

By mapping out the content placement, the sitemap was a valuable tool in starting our project and keeping our team aligned with the bigger picture throughout development.

User Flow

My next step was to craft a general user flow following our sitemap. I aimed to showcase the typical steps users might undertake within each of the main pages so we can further develop our foundation before coming up with sketches.

Sketches

To optimize our time and leverage the capabilities of Wix, we began the design process by developing low-fidelity desktop and mobile sketches.

However, due to time constraints, there were instances where we directly transitioned from the low-fidelity sketches to Wix, without creating wireframes. This approach allowed us to work quickly and ensure progress within our limited timeframe.

Wireframes

In the later iteration of the design I created in Figma, I designed mid-fidelity wireframes to better understand my personal designs, have a clearer vision, and work out any functional issues before moving to a high-fidelity prototype.

Style Guide

Tone and Style

As our responsibility was to improve the visual design, we prioritized maintaining consistent branding elements.

After coordinating with the President of Scooby Doo’s Rescue Mission, we decided to retain the existing logo and incorporated a similar shade of purple as the primary color to ensure visual continuity. We also expanded the color palette by introducing secondary colors.

After a deliberation process, we decided to opt for a new playful display font for headings, which added a personal and whimsical touch that we thought fit the branding of this organization. We paired it with the sans-serif font "Inter" for subheadings and paragraph text, providing a balanced and readable combination.

Design Components

Desktop Components

Mobile Components

Final Designs

3 Designs

1. Old design: The previous version of the SDRM website.

2. New design (current): The new website design showcases the current revamped version of the SDRM website.

3. Reimagined website on Figma:

The reimagined website design, I created using Figma, presents a fresh perspective on the SDRM website. This design represents an alternative vision and potential improvements that were not previously attainable using Wix.

The Old Design

  • Old homepage

  • Old homepage 2

  • Old homepage 3

  • Old donate page

  • Old donate page 2

  • Old shop page

These pages served as a starting point for brainstorming and exploring various design possibilities. By using them as a reference, we aimed to align our vision with the client's expectations and ensure that the project would progress in the desired direction.

The Current Design

  • Homepage

  • Shop

  • About Us

  • Adopt

  • Adopt - 2

  • Donate

  • Shop

This is what the site currently looks like, and I believe it reflects a significant improvement over the previous design. However, it is worth noting that the Wix platform’s constraints impacted the desired level of flexibility and customization.

Reaching a consensus with the team on certain design decisions proved to be challenging. Balancing differing perspectives and finding common ground can be a natural part of any collaborative project.

After the completion of the project, the client made further changes, which highlights the iterative nature of website development.

It's important to recognize that despite the challenges, the current website represents a strong improvement and a valuable learning experience in navigating design limitations, collaboration, and evolving client requirements.

Reimagined Design

  • Homepage

  • Shop

  • Adopt

  • Donate

  • Adoptables

  • Adoption application

  • About Us

After finishing the current design, I took it upon myself to push the boundaries even further and make more improvements to both the desktop and mobile experiences.

In my opinion, this represents the definitive edition of the SDRM website, and I take the most pride in this version.

The updated design features a cleaner aesthetic with a modern touch, improved design elements such as refined buttons, optimized spacing, and strategic implementation of layout grids. These enhancements follow current design practices and elevate the overall user experience.

By making these improvements, I aimed to create a more visually appealing and user-friendly website. I am confident that this version showcases the evolution and progress of the SDRM website design.

Conclusion

What did I learn?

Collaborating with Scooby-Doo's Rescue Mission pushed me outside my comfort zone, and I'm thankful for the chance to enhance their websites user experience and visual design. The project taught me to delve deeper into user needs and translate the insights into intuitive designs. Conducting extensive research has given me a more comprehensive understanding of organizing and executing ideas for larger projects.

What would I iterate?

This project was completed without conducting user testing, mostly due to time limitations. Although we were confident that any changes would improve the original design, we recognize the missed opportunity to gather valuable user feedback after creating the new design.

In hindsight, I would prioritize conducting user tests and consider involving a developer to transition the website away from Wix. My Figma design could serve as a starting point for a fresh and innovative approach to better meet user needs.

Next

The Awakening Collective