.png)
CASE STUDY
ANIMAL RIGHTS COALITION
• University of Minnesota UX/UI Bootcamp Design Challenge
• 1 week sprint
• 4 person team
• My role: UX Researcher
OVERVIEW
This team challenge was to execute a redesign in any modality for a local or global cause of our choice, creating a high-fidelity clickable prototype and coding one to three responsive webpages through FE development. For our redesign we chose the Minneapolis based Animal Rights Coalition.
The Animal Rights Coalition (ARC) is the oldest and one of the most successful animal rights organizations in the state of Minnesota, operating for over three decades. Their focus is on advocacy for humane treatment of animals as well as education and community outreach for anyone interested in vegetarianism or veganism.
.png)
CURRENT SITE
The current site consists of seven pages, all chock-full of content, and each with a slightly different layout. Most of the pages are pretty text heavy and lengthy, and there are noticeable accessibility issues.
UNDERSTANDING
ACCESSIBILITY NEEDS
As a starting point, I constructed a proto-persona, envisioning a potential visitor who might be looking for general information about ARC. Meet Kaylee Erickson. She's 24, she's vegetarian, her passions are connecting with others, as well as animals and the environment. She's really interested in doing more volunteer, and she’s looking for an easy way to do this, but some of the challenges she faces are a busy schedule, and she’s not sure where to look for info on how to get involved.
Additionally, Kaylee has Dyslexia. This was something included in the proto-persona based on the current design of the site, which has some information overload, and a design that could make processing it all tricky. So we wanted to build something with users like Kaylee in mind.
PROTO-PERSONA • KAYLEE ERICKSON
COMPETITOR ANALYSIS
We felt that assessing the strengths and weaknesses of ARC’s contemporaries would be helpful with crafting the best redesign possible, so a competitor analysis was then conducted.
I examined the sites of three direct competitors: Compassionate Action for Animals, Vegan Outreach, and PETA, as well as two potential indirect competitors: a Meetup.com group called “Minnesota Animal Rights,” and Reverie, a local vegan restaurant, all of which offered the same or similar resources as ARC.
With a few of these competitors I found more modern designs, interfaces that were more user-friendly, less info overload, and better structuring of content.
Issues I was able to identify included lack of info for local resources, membership requirements which could create access barriers, accessibility issues with colors, typography, and content that for some might be too “aggressive” (shock value).
USER NEEDS
I then conducted user interviews with participants who identified as vegan or vegetarian, were active or interested in volunteering, or were involved/had an interest in animal rights advocacy. I inquired about their knowledge of ARC, their opinion of the website and similar sites/services/causes, and about their experience with volunteering.
A theme we noticed was a general interest in getting more involved in volunteering opportunities, and an interest in learning more about vegetarian/vegan resources. Some of the big things the interviewees would have liked to have seen from the site however, were a more organized structure, not getting routed elsewhere for info, a better calendar, and organizing opportunities by category, location, etc.
Through prioritizing possible features and assessing effort/reward, we narrowed it down to what we felt might be most useful to someone like Kaylee, and our interviewees, and this led us to the decision to make the “Get Involved” page the focus of the redesign.
ALEX, NEW YORK
“I'd be interested in volunteering, but maybe something more low-key, like prepping mailers, brochures, etc. How do I find that stuff?”
JOSH, ST. PAUL
“It's great that they have lots of information, but it's a little too much. It kind of feels like it was all just thrown on the page wherever there was space.”
DOM, RHODE ISLAND
“I can hardly look at this.
This site literally gives me a headache."
THE EXISTING PAGE
On the current Get Involved page, the main content is a long mix of general info regarding meeting times, directions, reviews of past events, and volunteer testimonials. The upcoming events and full calendar view option are listed on the right side, which some users stated they didn’t even notice given the amount of other content on the page.
It was also pointed out that when viewing the full calendar, it is very compact and it almost seems unclear if there are actually any events occurring on the dates.
Incorporating the user insights, our team's UI Designer, Courtney, began creating wireframes for the possible new design that addressed the issues brought up by users.
New Get Involved page layout.
DESIGNING WITH USERS IN MIND
Included were featured categories, different calendars views, and splitting content up to make the info more digestible.
Reworking of the categories.
Putting these changes and new features together, we arrived at a mid-fidelity prototype.
New Get Involved page layout.
THE NEW LAYOUT
New Volunteer Opportunities category screen.
New Event Details screen.
Event Sign-Up.
The idea was to break things up, chunk info, and put the calendar a little more front and center, making its associated content more accessible. There's still a lot on the page, but with the circle icon categories, hero image, and splits in sections, it helps give the page some room to breathe, and it doesn't have the "lengthy blog post after lengthy blog post" feel of the current page.
New Calendar view.
A usability test was done on the mid-fi prototype, having users complete tasks to observe how easily they were able to navigate searching and signing up for volunteer opportunities via the Categories section and Calendar feature. With these tasks we saw a average success rate of 90%, with only a few issues some users faced when searching for one of the volunteer opportunities.
We received positive feedback on the prototype design overall, with just a few critiques on some of the wording of things that made locating at-home volunteer opportunities a little tricky to find. In general, however, users felt it was “clean” and “simple.” They liked how there were now multiple clear ways to search for volunteer opportunities, and the new calendar feature went over very well.
90%
AVERAGE SUCESS RATE
OVERALL DESIGN FEEDBACK
USABILITY TESTING
Our team's Visual Designer, Sydney, then began putting together a style tile. The imagery selected was meant to create empathy with users, and establish an emotional connection to the animals pictured. Based on the interviews and competitor analysis, we stayed away from the “harsh” or sad imagery from the original site and competitor sites, which users did not like, and instead went for images that had more of the “warm and fuzzy” effect. Images of healthy plant based meals were also selected to represent the organization's vegetarian/vegan nutrition aspect.
VISUAL DIRECTION
The color scheme of the site was also updated. The user interviews found that the red and black of the current site gave it a bit of a heavy and even grim feeling, so we tinkered with the idea of yellow and gray, as these colors have a softer feel, but are still attention grabbing.
A NEW PAGE
This brought us to our high-fidelity version. This iteration encompassed the style tile elements and changes made based on user feedback from testing, by focusing on simplification, accessibility, and highlighting the calls to action of the page.
We ran another round of user testing, asking participants to complete the same tasks from previous testing. This time around we saw a 100% success rate with task completion, and the response to the new design was very positive. Users felt they could easily identify where to look for relevant information, and the new calendar got lots of thumbs up, as it now provided a better presentation of upcoming events, which was one of the main things we wanted to address.
100%
AVERAGE SUCESS RATE
USER FEEDBACK
KYLE, LOS ANGELES
“Having the option to explore categories for volunteering is nice.”
ELAINA, MINNEAPOLIS
“I like this calendar layout much better than on the existing site. I can actually see what's happening and when.”
TASHA, PHOENIX
“The overall look of this just feels like there was actual thought put into it. It's visually more appealing, the placement of things makes more sense, and things just flow.”
FURTHER TESTING
CONCLUSION
With additional time, the next thing our team would have liked to have done was move on to the home page of the site. Much like the Get Involved page, it currently has what seems like an endless flow of content that, while informative, could stand to benefit from some revamping.
A more modern look, restructuring of content, and dialing back some of the information provided would help lessen the overload, assist with directing people to its other pages, and better highlight valuable resources that are perhaps getting lost in the mix of it all (i.e. info in the footer that’s almost invisible, and the carousel in the hero that we almost didn’t even realize was a carousel).
We feel these improvements would prove especially helpful with users visiting the site on mobile devices, where responsive design issues exist and the content is even more compacted.