Anti-Racism Commitment Coalition (ARCC)

ARCC is an NGO operating out of Minnesota and has a huge online presence. ARCC's websites -
https://www.joinarcc.org - is the heart of their outreach and education operation. I was hired as a web UX intern to improve this crucial tool in their arsenal.

Roles

Web User Experience Designer, Web Developer, Backend Engineer.

Project Specs

WordPress (Beaver Builder Plugin), Figma, Zoom, Captivate.fm, Google Docs, Google Drive, Whatsapp

Deliverables

Website, UX research metrics, automated e-mail responses,
SEO optimization, content management.

Problem Statement #1

The NGO’s outreach program needed a fix for their broken automated notifications system which had them working blindly to reach out to web visitors.

Solution

I dug through Wordpress’s admin settings to search for site notifications system. After some trial and error and account verification, I was able to get the notifications going for ARCC’s email account.

Problem Statement #2

Improve site-wide navigation and give the website a visual makeover to remove the dated feel.

Solution

Fixed the navigation bar and removed unnecessary navigation items. Restructured navigation menus to better organize the remaining navigation items, resulting in a navigation bar that felt less cramped. Used rounded corners to make everything look and feel modern.

Problem Statement #3

Improve information organization and make better use of the webpage real estate.

Solution

Redesigned the website to make it easier for the visitors to skim through the website and focus on the important information. Fixed the website’s color palette and typeface to use visual cues.

Joining ARCC

When rejection is not the end

I joined ARCC in October, the interview for which happened in late August. I was initially denied the opportunity based on a misunderstanding, but seeing how that opportunity could provide me with:

  • An NGO that I would be proud to work with.

  • An opportunity to work on a website viewed me thousands of visitors on a monthly basis.

I emailed my interviewer to ask for a volunteering position. He happily offered it to me, and I kept in touch with him constantly to obtain new tasks. After two weeks, I received an unexpected email from him saying that their current intern at the time had left the position and they would be happy to have me instead. He mentioned that my active communication and professional demeanor encouraged him to reconsider me for the internship. I happily accepted the offer and got to work on October 18, 2024 as ARCC’s web UX designer.

Responsibilities

Since I am the only Web designer and developer at ARCC, the responsibility of running the entire website falls on me.

  • Improving the website’s design and adding new elements wherever necessary.

  • Improving the user experience through the help of internal and external surveys and feedback.

  • Formatting and Uploading blog posts and articles regularly submitted to me by other ARCC interns.

  • Uploading podcast episodes regularly submitted to me by ARCC’s founder.

  • Maintaining subscriptions and APIs in the back end so that they do not expire.

  • Fixing a very specific email issue which is preventing the official ARCC email from receiving notifications from the website’s forms that the users fill and submit.

Broken Notification system for Automated Email

The Email Issue: ARCC was suffering from an issue with their Email ever since summer of 2024. They had migrated their website from Squarespace to GoDaddy, but in this process they lost the ability to receive emails on their official email ID.

This was a critical issue for ARCC, as their website is the central point of contact for new visitors to not only talk to ARCC but also to apply to join the NGO. The previous interns had called Squarespace and GoDaddy several times, but the issue had not been resolved. The previous intern had left abruptly and the intern before that had no clue how to go about solving this problem, so I was alone and the clock was ticking.

After my onboarding, I spent a few days understanding the WordPress ecosystem that the website was using. I made some minor changes here and there and posted a few blogs given to me by the team. This helped me build confidence in my ability to handle the website functions and move to more troubling issues.

My Approach

Detailed Solution

I first checked all the “users” that were added to the website to try to understand who was and wasn’t getting the email. The problem had been presented to me as website issue. I was told that there was some disconnect between the website forms and the backend email. But when I opened the company’s Gmail account and looked at the inbox, I noticed something that I had missed on all of my previous visits. That Gmail account had not received a single email since July, not even a spam email! That set sirens blaring in my brain. I thought maybe the issue is with this Gmail account itself not being able to receive emails, rather than the website being unable to connect to this particular Gmail account because GoDaddy was sending website-related notifications to me and other email account automatically. I tested this hypothesis by sending an email to the company email from my personal account and the email just never reached. That was a confirmation for my hypothesis, and now the problem had shifted from a website connection issue to a Gmail inbox issue, which also meant that I would have no success calling GoDaddy or Squarespace because it was not an issue pertaining to their domain.

Then, I went to the Google Admin Controls directly to see the email IDs that were set-up during the transfer of the website from Squarespace to GoDaddy. I dug a little deeper and voila! I found out that the ARCC emails with the new Gmail domain, i.e. @joinarcc.org were not enabled to receive or send emails. It took about 5 minutes to get them activated. Once done, I tested it again by sending an email from my personal email id and this time it reached the destination!

Then I checked all the forms on the website and all of them worked, sending emails timely and properly. Thus, the issue was finally resolved and although it took me around 3 weeks, it was the source of months of trouble for ARCC.

Unpolished Navigation Bar

The website’s top navigation bar was colorless and at time, blended with the background when scrolling. The dropdown menu from the navigation bar also gave a feeling of being dated. It was the same color as the navigation bar and had a very noticeable drop shadow, which is something that modern websites and apps have moved away from. Drop shadows nowadays are very subtle and only function to elevate the content, instead of being noticeable themselves. The current design trends are rounded corners, glassmorphism (to some degree) and flat design. Dark, noticeable drop-shadows are left for 3D or 3D appearing objects.

The Solution

One day, while working on the website, I accidentally stumbled upon a dropdown menu in the toolbar of the website builder, and it had two options - Header and Footer. I clicked on the “header” option to see if I had finally found the goldmine and it turns out THAT I DID!

The navigation settings were a little weird for me and things didn’t seem to be working like they were supposed to. At one point, I ended up deleting the navigation bar altogether and had to drop an emergency message in the ARCC group about the changes. Thankfully, I was able to revert to the previous state of the website.

Having learned my lesson, I went forward wiser and braver and finally fixed the top navigation and the dropdown menu. The satisfaction was immense, and my day was made!

Dated Visual Design and Unorganized Information

The website had a lot of information and interesting content for the user since the start of my internship. Unfortunately, the information was not properly highlighted. Although one could make out the structure of a webpage on the website, a user could not easily skim through the information to find something that piqued their interest because that kind of engagement was not facilitated by the design.

The Solution

My simple solution was to add some separation between the sections containing important information by using the site’s existing color palette. This change immediately uplifted the content and gave the user subtle hints about where they should pay attention when the webpage was loaded.

I understand that the solution might feel “too simple” to some, but often times the solution to a problem is simpler than we think, and simpler solutions should always be prioritized because they offer scalability and easier understanding for successor designers when the time comes to take over.

What’s Next?

My next steps are to continue making the website better. Even though I have made some UI changes to make the website look better and more up to date, there’s still more to do, especially in terms of the user experience.

  • To improve the user experience, I will need to conduct user research and surveys, both internal and external which I am currently preparing to do.

  • Continue performing my regular functions of uploading blogs, maintaining the expected functionality and managing the podcast.