Feral Bridge is a non-profit organization dedicated to rescuing and rehabilitating feral cats in urban areas. As part of a collaborative effort with Feral Bridge, I undertook the role of lead designer and project manager to revamp the organization's digital presence and outreach strategy. With a focus on increasing awareness and support for feral cat rescue initiatives, my responsibilities included overseeing the redesign of the organization's website, implementing effective communication strategies, and optimizing user engagement across digital platforms. Through close collaboration with the Feral Bridge team, I aimed to create a cohesive online experience that effectively conveyed the organization's mission and facilitated community involvement. Key achievements included the development of a visually compelling website, the implementation of targeted social media campaigns, and the establishment of strategic partnerships to expand outreach efforts.

Feral Bridge faced challenges in engaging and supporting potential adopters through their website.
Users encountered obstacles accessing essential resources, leading to feelings of being overwhelmed and discouraged.
Transparent communication and personal connection with the organization's mission were lacking, hindering user engagement.
A website redesign was necessary to address these challenges and enhance user engagement, transparency, and support for feral cat adoption efforts.

Problem

The redesign of Feral Bridge's website focused on key design elements to enhance user engagement and support for feral cat rescue. A carefully selected color scheme evoked a sense of nature, while typography choices ensured readability and clarity. Ample white space reduced cognitive overload. The layout aimed to engage users through personal stories and transparent communication, fostering a connection with the organization's mission. Challenges included simplifying the adoption process, addressed through a resources page and informative blog articles. Overall, the redesign prioritized user experience, transparency, and engagement, reflecting the importance of user-centric design principles and accessible resources in supporting nonprofit initiatives.

Solution

Tools

Figma

Team

1 UX designer

My Role

UX design
UI design

Timeline

Overall: 9 weeks

My Design Process

1

2

3

4

5

6

Persona

Sketches

Wireframes

UI Design

Next Steps

Learnings

Personas

I developed two personas for each of our user segments. Personas were deemed necessary to better understand the diverse range of users interacting with Feral Bridge's website.

Each persona included detailed information about the user's story, goals, pain points, behavior patterns, and preferences related to interacting with the Feral Bridge website. This information encompassed factors such as motivations for visiting the website and technological proficiency.

I continually reflected on the personas at various stages of the design process, including initial sketches and prototyping. Whenever making design decisions, I revisited the personas to ensure alignment with user expectations and goals.

By creating personas, I was able to humanize my target audience, gain insight into their goals, pain points, and preferences, and tailor my redesign decisions to meet their needs.

Sketches

I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time. My sketches were based on the initial user interviews, the business goal, and the heuristic evaluation. They each pointed to the fact that there were too many distractions in the flow. We came back to the sketches throughout the entire design process to make sure that we don’t lose sight of our primary goals and ideas.

The main purpose of our sketches was to brainstorm and explore various design concepts for the Feral Bridge website. Additionally, the sketches served as a means of presenting initial ideas to stakeholders and testing the feasibility of different layout options.

The sketches were based on the information gathered during the research phase, including user personas.

Explain the layout and arrangement of the elements!

The sketches served as a foundation for the subsequent design iterations, providing a visual reference for translating conceptual ideas into tangible website layouts. By sketching out different options, we were able to explore various design directions, identify potential challenges early on, and iterate rapidly based on feedback from stakeholders and usability testing sessions. Ultimately, the sketches helped us refine our design concepts and move forward with confidence in the chosen direction for the website.

Wireframes

UI Design

Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the brand’s values and message, which is: “brand motto”. Also, I’ve checked the competition and took a deep dive into my catalog of references for inspiration.

We followed a visual style that could be described as "fresh" and "inviting." This choice was made to align with the mission of Feral Bridge, which aims to create a welcoming and compassionate environment for users interested in feral cat rescue. The use of vibrant colors, engaging imagery, and clean typography helped create a sense of warmth and approachability, reflecting the organization's values and fostering a positive user experience.

While we didn't adhere strictly to any specific design guidelines, we drew inspiration from principles of user-centered design and accessibility best practices. We aimed to create a layout that was intuitive and easy to navigate for users of all skill levels, drawing on elements of Material Design for clarity and consistency.

The final design reflects our learnings about our users by prioritizing simplicity, clarity, and empathy. Through user research and persona development, we gained insights into the preferences and needs of our target audience, which informed the design decisions. For example, the layout and arrangement of elements were optimized to facilitate easy navigation and engagement, while the use of personal stories and imagery aimed to create an emotional connection with users. Overall, the final design reflects a user-centric approach, striving to meet the needs and expectations of visitors to the Feral Bridge website.

Next Steps

Continuing the project, I'd prioritize refining the website's functionality and user experience based on feedback and analytics insights. Iterative design changes would aim to address identified pain points and improve overall usability. Additionally, I'd explore enhancing interactivity and engagement features, such as incorporating live chat support to facilitate immediate assistance for users.

01

02

Due to time and resource constraints, I couldn't delve as deeply into user research or experiment extensively with advanced design techniques. However, I made the most of available data and feedback to inform design decisions and drive improvements. Despite limitations, the focus remained on delivering a user-centric experience aligned with the project's objectives.

03

My advice to the team or future designers undertaking similar projects is to prioritize user feedback throughout the design process. Continuous iteration and adaptation based on user insights are essential for refining and optimizing digital experiences effectively. Additionally, staying open to experimentation while remaining aligned with project goals can lead to innovative solutions and improved outcomes.

What I Learned

Throughout this project, I acquired a deeper understanding of user personas and their significance in informing design decisions. It was my first time creating personas, and I learned how crucial they are in guiding the design process by keeping the user at the forefront of decision-making.

One preconception that was crushed during this project was the notion that a visually appealing design is always the most effective. While aesthetics are important, I learned that usability and functionality are equally crucial. Balancing aesthetics with usability ensures that the design not only looks good but also serves its purpose effectively in meeting user needs.

Moving forward, this project has influenced the way I design by emphasizing the importance of user-centric design principles and continuous iteration. I now approach design projects with a greater focus on understanding user goals and preferences, and I'm more proactive in seeking feedback and making iterative improvements based on user insights.