Malinois Rescue League

From Darkness to Freedom: Overhauling a Non-Profit Website to Rescue Malinois and Ignite Donor Support

285

Datapoints

56

Fields Organized

4

Testing Rounds

Project Overview

CHALLENGE

Our objective encompassed crafting an aesthetically pleasing and seamlessly functional design, deliberately guiding users towards their desired destinations with intuitive clarity, ensuring a seamless accomplishment of their tasks.

solution

Crafting a seamless customer journey and intuitive functionality are the focal points of the non-profit website redesign, ensuring a clear and effortless user experience.

role

UX/UI Designer, UX Lead

time

3 Weeks

Task

Website Redesign & Adoption Form Update

tools

Figma, Figjam, Google Suite, Slack, Zoom

My Design Process

  • We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights.

  • Using the data gathered, I identified the key struggles and developed strategic solutions that allowed users and the business to succeed!

  • Working from sketches, to lofi, to mid-fidelity wireframes and ending with a prototype; I began to craft a clear path for success while maintaining stakeholder alignment.

  • I tested multiple high traffic tasks and journey flows & successfully validated some aspects of the design while uncovering ways to optimize for ease of use.

  • The last step was to implement the learnings, recieve stakeholder alignment on the prototype, then annotate & hand-off for development. (Followed by QA)

Choose my view

Designer Recruiter

Empathize

Research

To better understand Malinois Rescue Leagues’ background, market space, and user base I initiated research with specific goals in mind. Through user interviews and surveys, the research seeks insights into users' priorities and preferred actions, particularly in donating and adopting, ultimately informing design decisions and optimizing the user journey.

Research Goals

  1. Understand how users were currently engaging with the platform

  2. Identify the hierarchy of actions users make on the site

  3. Understand what factors lead a user’s decisions

  4. Understand how people feel when interacting with the platform

  5. Discover a user’s motivation behind taking action

Competitive Analysis

Following my market research, I examined MRL's main rivals to gauge their strengths and weaknesses. This enabled me to grasp overarching trends, distinguish their individual nuances, and uncover the reasons behind users' preferences.

Provisional Persona

Having learned more about MRL's market, I wanted to start exploring and identifying who their target users might be. Creating a provisional persona allowed me to swiftly connect with their users, forming a groundwork for choosing interviewees to validate these findings.

User Interviews

To validate the provisional personas and learn about MRL’s user’s personal experiences I conducted user interviews. I interviewed 10 people between the ages of 25-50, 15-20 minutes each, asking open-ended questions to learn as much as possible about their experiences and relationship with adopting, donations, and dog-oriented non-profits.

Empathy Map

Using an empathy map, I synthesized all the information I gathered during the user interviews to uncover key insights that led to identifying MRL’s target user group.

First, I started by categorizing my notes into the categories of Doing, Thinking-Feeling, Seeing, Hearing, Gains, and Pains to get an overall understanding of everything learned during my interviews with the different participants.

From the major patterns that I identified from the empathy map, I discovered the following key insights which helped me to understand what the user’s needs are:

Donations

Many people mentioned feeling skeptical when giving money.

Adoptions

Having a clear idea of a dog’s personality and health are important.

Insights

  1. Many users have a healthy skepticism when donating money.

  2. Having a clear understanding of a potential adoptable dog is very important for the user.

  3. Users often feel the adoption process is too difficult.

Needs

  1. People need transparency regarding how money and supplies are utilized.

  2. People need a clear understanding of “who” each adoptable dog is.

  3. A clean & efficient adoption application is a must.

User Persona

Merging insights from secondary and primary research, I fashioned a user persona that reflects the essence of my design's intended users. This persona acts as a guiding light, ensuring that the user remains at the core of my design approach. Let's meet Veronica:

DEFINE & IDEATE

Defining the Problems

Now that I had my target audience identified, I utilized research insights to pinpoint the key challenges I aimed to address. By crafting POV statements and HMW questions from user insights, I delved into understanding the problems and generating potential solutions.

Project Goals

With a range of solutions in hand for the core issues, I transitioned to structuring the implementation plan. Beginning with a clear definition of project goals, I aimed to comprehend the desired outcomes of applying these solutions.

Heuristic Annotations

Homepage

Focusing on the prioritized solutions, I conducted heuristic annotations of each aspect in the user journey. This allowed me to step into the user’s shoes and experience their successes and frustrations. This step also informed me as to where to focus my attention when designing the new platform interface.

Get Involved

The current page that educates users on how they can contribute to MRL’s mission struggles to accomplish this goal. Many users we tested wanted to take an action or felt like they “should” be able to take an action on this page but lacked links which left them feeling confused.


Using these annotations allowed me to identify potential changes that could significantly improve the usability and usefulness of this page.

Adoptable Dog Cards

Users reported that it was hard to get a “bird’s eye view” of each dog using the current cards. “It would be nice to see stats or something”. We also identified that while a “read more” CTA is useful, users reported a higher likelihood of clicking if the CTA had more personality.

Adoption Form

Finally, users reported that their initial impression when presented with the form was “intimidation”. It was clear that this needs to be chunked, reorganized, and presented in a way that is friendly to the user and applies up-to-date form trends. This became one of my biggest challenges

Task Flow

Now that I had orientated myself to MRL’s process, I was keen to dive into how users would actually get stuff done. I kicked things off by referencing my heuristic annotations to spot the main tasks tied to our users' goals and then spelled out the nitty-gritty details for each screen, ensuring users can smoothly tackle those tasks.

With the same key tasks in mind, I shaped task flows to get a handle on the steps users would follow and the pivotal pages they'd utilize in order to wrap up those tasks

User Flow

Now that I had orientated myself to MRL’s process, I was keen to dive into how users would actually get stuff done. I kicked things off by referencing my heuristic annotations to spot the main tasks tied to our users' goals and then spelled out the nitty-gritty details for each screen, ensuring users can smoothly tackle those tasks.

With the same key tasks in mind, I shaped task flows to get a handle on the steps users would follow and the pivotal pages they'd utilize in order to wrap up those tasks

Prototype & Testing

Building a Prototype to Test

Now to build a prototype to ensure that the design choices in the lo-fi wireframes contribute effectively to our project goals. My objective was to reach a stage where we could conduct real-user testing on the design.

Usability Testing

Having wrapped up my prototype, I delved into creating a test plan to steer the upcoming testing efforts. After enlisting participants, I carried out usability testing to observe user interactions with the design, aiming to uncover opportunities for design enhancements.

Overview

  • Method: Remote, moderated usability testing (Think Aloud)

  • Participants: 7

  • Age: 25-45 years

  • Average Time: 15 minutes

  • Task Completion Rate: 100%

  • Error-Free Rate: 99.2%

Results

Pain Points

While all users were easily able to accomplish their tasks, there were a few areas that needed addressing.

  • 5/7 users noted that having 3 CTA’s on the “megatron” caused them to pause and think too much.

  • 4/7 users mentioned “wondering” how much more of the application was remaining.

Based on these pain points, I was able to draw key insights which helped me to identify what improvements I should prioritize on the design.

Insights

  1. Users prefer to not have a lot of options given to them at once.

  2. People will not complete a form if they feel its too long, and don’t know when they’ll be done.

Recommendations

  1. Reduce the initial amount of CTA’s and streamline the flow.

  2. Include form pagination that informs the user about “what” they are doing.

  3. Include pagination so a user knows “where” they are in the process.

Priority Revision

Having identified the specific design recommendations, I started making revisions to my design to improve the design:

Reducing the number of CTAs

Originally it was my hypothesis that a user would want to navigate directly to one of the 3 main pillars of the site that we identified during our initial research. Usability testing concluded that the additional options actually caused the users to hesitate and think too much. After reworking the flow and shifting to a single CTA, user satisfaction increased.

Form Self Orientation

Originally, pagination was planned to be at the bottom of the page. But since it was below the fold on mobile, and sometimes not above the fold on some desktop resolutions users would sometime miss this feature altogether. I introduced icons and titles that briefly explain to the user where they are in the process, and what their information is being collected for.

Style Tile

High Fidelity Wireframes

After completing the High Fidelity wireframes, I created a clickable prototype with the final design.

Welcome to MRL

Final Prototype

After creating my hi-fidelity wireframes, I created a prototype with the final design.

Reflection & Next Steps

This was a great project that allowed me to exercise many of my UX and UI skills. However, I was also able to walk away with many valuable insights that will carry over into every future project.

intentional Spacing

In the beginning stages things were placed according to the principle of proximity but it became apparent that more needed to be done. We quickly decided that all vertical spacings needed to be a multiple of eight (i.e. 8px, 16px, 24px, 32px etc.) and we quickly developed a spacing rubric that could easily be carried across from page to page.

Thoughtful components

A button is not just a button. We needed to design a button (and other components) that were future proof. Meaning we built in left and right icons, states, booleans, and text fields so that future designers can easily adapt the design if needed.

Form & Focus

At first I was intimidated by the form (just think about how the user must feel) but soon realized that this challenge would be incredibly valuable once completed. I went back to step 1 of my design process and approached it one step at a time until I was able to iterate on something that was usable and non-threatening.

Informed Design

There were countless times where I wondered “How can I make this better?” Then I realized the real questions I should be asking are: “What purpose does this serve?” -> “Does it accomplish the purpose well?” -> “Is there a better way to accomplish the purpose?”

What people are saying

  • "Working with Andrew on our new platform development has been a pleasure."

    Jeff S. - Developer

  • "I was impressed with his collaborative and communicative nature"

    Nick H. - UX Designer

  • "I am constantly impressed by his ability to think outside the box"

    Anna R. - UX/UI Designer

CONTACT ME

CONTACT ME

Upgrade your web presence

Contact Andrew and get your custom solution