Multicultural Refugee Coalition Usability Audit
UX Audit
Introduction
Company: Multicultural Refugee Coalition
My role: UX Researcher and Designer
Device: Web
Audience: B2C
Timeframe: June 2021 - July 2021
Multicultural Refugee Coalition is an Austin, TX based non-profit that provides refugees and immigrants with fairly waged, ethical job opportunities on a community farm and textile production studio. The aim of this audit was to identify usability issues and implement design and non-profit best practices to increase conversions, reduce drop-offs, and further engage MRC’s users in their mission.
Stage 1: Analysis
I began the web audit by interviewing stakeholders to identify MRC’s organizational goals and develop a high level view of the website’s place in MRC’s mission. I also used stakeholder interviews to identify typical users of MRC’s website, as that information was absent from the website’s Google Analytics. I then analyzed the website’s Google Analytics data to determine high conversion rate pages/flows, pain points, and problem areas to focus my audit.
Stakeholder Interview
I conducted interviews with stakeholders at MRC to identify the organization’s goals for their website and give my audit more context. I spoke with two members of MRC’s administrative staff, and asked them what they wanted their website to accomplish. I also used my stakeholder interviews to identify typical user goals when using the website by asking about feedback MRC had received from web users.
Organizational Goals
Increase website efficiency
Increase donation conversion rates
Direct users to CSA (community supported agriculture) subscription
Inform supporters so they can become engaged with the organization’s mission
User Goals
Learn about MRC’s mission and how MRC accomplishes it
Learn how they can support MRC
Donate/subscribe to CSA/volunteer
Foundations looking to make funding decisions look for general overview of MRC/examples of impact before making their funding choices
User Persona
I used the insights gathered from my stakeholder interviews to create a persona for MRC’s typical donor/volunteer/web user to center my audit on issues the typical user may face. By centering the user in my audit, I could think through problems empathically and offer recommendations that would help the user and MRC reach their goals.
Google Analytics
I analyzed the website’s Google Analytics to identify usability issues that would impede MRC’s goals of fostering organizational understanding and increasing conversions. I wanted to determine which parts of the website users found confusing or otherwise difficult to use.
Stage 2: Evaluate
After determining the website and user’s goals, reviewing the analytics data, and determining the main areas of the website where problems arise for users, I evaluated the website’s design to determine usability issues. I also performed a heuristic analysis using Nielsen’s usability heuristics. Further, I analyzed the website using the Nielsen Group’s non-profit best practices to identify areas that could be improved.
I focused particularly on the CSA subscription user-flow, as both my stakeholder interviews and analytics review indicated that this is the highest traffic and highest revenue generating area of the website. Improving usability issues in this area could have a larger impact on both the user’s experience and MRC’s conversion rates.
CSA/Product Pages Flow
Issues
It takes more clicks than necessary to reach the CSA page, which is the chief way for people to support the organization
The CSA product page is vague and fails to clearly communicate what different produce options and subscription sizes are available
CSA product information is on another page, requiring the user to backtrack to figure out what it is they’re looking at
Shopify menus display different products, are incomplete, or difficult to navigate
Key Takeaways
Reducing the number of separate shop pages from 4 to 1 will help focus users on key points for conversion
Updating the CSA product page to properly communicate user options is essential to drive conversions
This is the shop landing page, which displays three products. A user may think that these are all the products offered by MRC when they are directed to this page.
However, clicking the box labeled “CSA” takes you to a second page with two options, one of which is not contained on the shop landing page. This page does not contain face masks and the tote bag shown on the landing page and provides no clear way to access those options.
Clicking on the “New Leaf Agriculture” shop in the header navigation above shows a third menu, containing yet another product unavailable on both the shop landing page and the CSA shop page. This page does not contain face masks and the tote bag shown on the landing page and provides no clear way to access those options.
Clicking on “Open Arms Studio” shop in the header navigation shows a fourth product menu. This one contains three options not presented on the shop landing page. It does not contain the CSA subsciption or New Leaf Agriculture hat.
In short, there are four product menus that are difficult to navigate and contain altogether different items. While it appears the goal of separating the products from the farm and the textile studio was achieved, it came at a severe usability cost. Consolidating these menus to make accessing and viewing all the products will make it easier for users to convert.
Heuristic Analysis
Nielsen Group’s Best Practices for Non-Profits
Usability Issues Summary
Product menus are disorganized and confusing and should be reorganized to provide users with clarity
Some design elements should be changed to bring valuable information above the fold
Product page copy should be clarified to provide the user with all relevant information to drive conversions
Implementing best practices for non-profits may help increase conversions and improve user experience
Stage 3: Recommending Design Solutions and Preliminary Designs
I took the information gathered from my evaluation of the website and used it to generate design solutions to recommend to MRC that could reduce usability issues, improve the user’s experience, and increase user conversion.
I presented my design recommendations over video call with MRC stakeholders illustrated the usability issues I found and provide clear recommendations to meet their goals. I used medium fidelity mockups to suggest what changes the organization could make to improve usability and clarity.
Homepage Recommendations
Move donate button to be the central feature of the landing page
Include clear header navigation to donate or volunteer, making it clear that both options are available
Frequent, clearly visible calls to action may result in higher conversion rates
The updated homepage places the donate button squarely in the middle of the page instead of requiring users to scroll down to find it.
The copy of the mission statement incorporates language that explains how donations and volunteering can help the organization.
Shopify Menu Recommendations
“Shop Our Store” should link to a page containing either all products offered from New Leaf and Open Arms, or links to each store’s offerings
Currently, some products are hidden in deeper menus that are not obvious on the main shopify menu
Clarify offerings by placing them all in front of the user on the main menu, or by showing the user clear next steps to take to view all available products
The shop page should include all possible options as shown above instead of hiding options in different menu pages
The low fidelity mockup above maintains the separation between the farm and the textile shop by introducing them using headers, but the options themselves are still available on the same page.
Selecting to see more from the farm or textile shop would simply narrow the results to only those from that category.
CSA Product Page Recommendations
The CSA product information is vague and not available directly on the product page. Adding more information to the product page will clarify options and drive conversions
The mockup above shows a product page for a CSA subscription that fully informs the user about their options and does not require the user to search for further information