American Red Cross Volunteer Connection Site Redesign

THE BACKGROUND

Volunteer Connection is an internal site that volunteers for the American Red Cross use to manage their involvement with the Red Cross. 

Primary user tasks include:

  • Sign up for volunteer shifts

  • Find training material and resources

  • Look for volunteer opportunities

  • Maintain a personal record of hours, shifts, and events

  • Communicate with other volunteers

However, throughout my own involvement with the Red Cross, I have found that the Red Cross struggles with volunteer retention, as well as making sure the active volunteers are continuously engaged in volunteer shifts and training activities.

At this point, I had not been as active as I should be, and that I did not take all the classes required to be able to move up to the next level (because I couldn't find the training requirements on the site!). So I wanted to take the opportunity to locate the source of my frustrations with the Volunteer Connections site, resolve them with my expertise in information architecture, and find a way to improve the experience that will result in behavior change for volunteers like me.

Therefore, I have defined the business goal for the Volunteer Connections site to be:

  • Increase in shift sign-up

  • Increase in number of volunteer promotions (for example, moving from trainee to member)

  • Increase in volunteer engagement and retention


CURRENT SITE ISSUES

I have produced a version of the current sitemap, shown below. Upon first glance, it is very obvious that the different categories in the navigation structure do not contain the same levels of information: too much content is stored under "My Chapter." 

Current sitemap for Volunteer Connection.

Primary level navigation on the homepage.

Secondly, content is not logically grouped, and similar content is spread across multiple categories. For example, training material can both be found under "My Chapter" and "My NHQ" (NHQ stands for national headquarters, so there are also labeling issues here). 

Volunteers are usually left with links embedded with in text, instead of structured navigation paths that guides them to the things they need to find.

Thirdly, after the tertiary level of navigation, content is not organized into categories. Instead, users must click on links on the page for more information.

Fourthly, the navigation menus does not follow a recognizable mental model. If a volunteer trainee is looking for the training needed to become a member, he/she will have to go to “My Chapter” – “Disaster Cycle Services Training: Resources for Volunteers” – “Training Checklists for Promotion”. This path does not map the logical mental models of the volunteer. Similarly, “Updating personal information” is under the “My NHQ” tab, but not under the “My Profile” category.

Another navigation issue that is not a result of poor structure is that expanded navigation offered on the left side of most pages. The navigation panel is very long and the highlight indicating to the users where they are on the page does not provide enough contrast for it to be easily seen. As users scroll through the page, it's very likely that they will miss the highlighted section. There are also no breadcrumbs offered on the site, the expanded navigation is the only thing users can rely on to orient themselves.

Long expanded navigation with low color contrast.


REDESIGN GOALS

My main goal for the redesign is to create a categorization structure that matches users’ mental models of information finding. This includes:

  • Organizing and renaming different categories

  • Using layered information display based on the primary user tasks and business goals

  • Making sure the information appears in the right place

  • Eliminate duplicate links that doesn't make sense

Under the new categorization structure, I also wanted use information layering to create a navigation structure that helps users to more easily complete specific tasks. In the sections below, I will show

  • the redesigned sitemap,

  • the redesigned homepage, and

  • the current and redesigned workflow for 2 tasks:

    • Finding training information for Disaster Action Team volunteers

    • Signing up for shifts

Here is the link to the interactive prototype.


REDESIGNED SITEMAP

For the sitemap redesign I started breaking out commonly accessed information associated with primary user tasks into their own categories.  As a result, “Volunteer and Training Information” and “Disaster Cycle Services” are moved to the main navigation.

I also took out categories under "My NHQ" and "My Chapter" and organized them into “General Red Cross Information.” Since these information are not critical to users performing their primary tasks, I put this category to the right.

I made some changes so that the category names are consistent and the labels make sense. The repeated pages in the structure only contain essential resources such as CAS, EDGE, and calendar, which are all featured in the global utility menu at the top.

 

Redesigned sitemap.

Redesigned sitemap.


REDESIGNED HOMEPAGE

After the site structure has been set, I redesigned the homepage to help with easier navigation. The content on the home page is largely determined by the user goals and business goals.

CURRENT Volunteer Connection Landing Page (February 2018).

On the current homepage, the numbers and icons featured refer to an arbitrary translation of the volunteer hours ("This is what X hours look like in each of the service areas"). I understand this was an attempt to show the volunteers that they are making a difference. However, I find this very confusing because these are not necessarily the activities I have engaged in. So in the redesign, I changed this into an actual breakdown of the hours I have volunteered, with the second row referring to the impact in each of the activities. 

Redesigned homepage.

One of the primary tasks volunteers engage in on this site is to sign up for shifts, so I added the shifts available for the day to the front page. The shifts are broken down into on-call shifts (you only go if you get called) and working shifts (you are working the full hours listed) because the two requires different types of planning and schedule flexibility.

I have also added the "Upcoming" section as a place where the Red Cross can request for volunteers if they are not getting enough sign-ups. This could also help expose volunteers to additional volunteer opportunities (In my case, I am not in the Blood Drive group, but I do receive this volunteer request information in update emails sent weekly). 

Rationale for homepage redesign.

Rationale for homepage redesign.

The "Red Cross Updates" section includes Disaster Morning Report, which includes information on recent disasters, how many people were affected, and the volunteers who were able to help out. This information is currently hidden levels deep in "My Groups," but I think it's important to show on the front page because it serves as a reminder that accidents and disasters happen regardless of whether you are signed up for shifts or not, and that it provides volunteers with recognition inside the community. Similarly, I think it's important to add other articles and reports on the impacts volunteers are making to this section, because it gives Red Cross an opportunity to showcase what was achieved and to thank the volunteer. In this case, the "332 lives saved" article is a real piece on a campaign I was a part of that was sent to my email through weekly updates, but it is nowhere to be found on this site.

I will demonstrate how the redesigned site helps improve user experience by walking through 2 workflows. In both cases, I will show the current experience and contrast it with the redesigned one.

Here is the link to the interactive prototype


WORKFLOW 1: FINDING TRAINING INFORMATION

Current Experience

If users are trying to find training information, they will likely have to go through all labels (because the categories are very vague) to find “Red Cross Training Information” under "My NHQ". However, this only links to EDGE, the online learning platform, and training on how to manage volunteers, which is not what the user was originally looking for.

Because of this labeling issue, users will probably have to scramble around, go through all secondary and tertiary levels in the navigation to find the real path, which is "My Chapters" - “Disaster Cycle Services Training: Resources for Volunteers” - “Training Checklist for Promotion.”

Then the user is taken to another page, with a link to the PDF document (this is a common issue on the site where a lot of the content has to be downloaded as a separate file).

Screen Shot 2018-02-03 at 11.23.28 PM.png

Once the users clicks on the link, the PDF shows the list of courses volunteers need to take, along with links to courses hosted online on the EDGE platform.

Redesigned Experience

Here is the link to the interactive prototype.

From the redesigned homepage, users can find "Volunteer and Training Information" in the primary navigation. When they hover on the label, the secondary level navigation, which only contains 3 categories, pops up.

User hovers on "Disaster Cycle Services Training", and the tertiary level navigation pops up. User selects "Training Guide".

Then the user is taken directly to the information page. A breadcrumb is offered on the page to help orient the users and help them get to the higher level pages. The links on this information page will take the user directly to course pages.





WORKFLOW 2. SIGNING UP FOR SHIFTS

Current Experience

Finding shift calendar.

Finding shift calendar.

The homepage currently does not offer shortcuts to the calendar or the shift pages, so the user will have to go to "My Shifts" - "View All" to see the master calendar. The user can also choose from the individual pages in the navigation to see the individual calendars.

GIANT CALENDAR WITH ALL SHIFTS AVAILABLE.

GIANT CALENDAR WITH ALL SHIFTS AVAILABLE.

User is presented with a giant calendar with all shifts available. The different groups are color-coded, but don't really make sense. (Personally I don't know why the Fire Alarm Installations are broken into pink and orange, or the Food Pantry Shifts are lumped with DAT shifts in blue).

Register for shifts.

Register for shifts.

If the user went to an individual page, the calendar is slightly less overwhelming, with more information presented on each tile.

Once the user clicks on a tile (event), the event is automatically registered, and the tile will be shown in green in the calendar. Depending on the type of event involved, sometimes clicking on the tile will take the user to a page with additional information, where the users can select "Register" from there.

Redesigned Experience

Here is the link to the interactive prototype.

Redesigned homepage has direct link to shift calendar.

Redesigned homepage has direct link to shift calendar.

From the home page, the user can sign up for a shift directly with the link to the shift on the homepage, or go to the calendar with “View Calendar” (this is the same as clicking on “My Shifts” in the navigation but that part is not built out in the prototype).

Redesigned calendar page.

Redesigned calendar page.

On the calendar page, the size of the event box represents the length of the shift, the tab colors correspond to different volunteer groups, and all events are stacked. When the user hovers on one event, it’s brought to the front of the stack with additional information shown (hovering animations are not built out in the prototype ). The colors used here are mostly the the same as the ones currently used because I am not aware of whether the colors are chosen for specific reasons.

Redesigned EVENT DETAIL PAGE.

Redesigned EVENT DETAIL PAGE.

Instead of instant sign-up, when users clicks on an event, they are always brought to the page with detailed information (this page can be accessed directly from the homepage). User can review the information and then click on “Register.”

REDESIGNED SUCCESS MESSAGE.

REDESIGNED SUCCESS MESSAGE.

A success message pops up letting the user know the registration is successful. User can see his/her name added to the attendee list. User can click on “Cancel Registration”, which will lead to the previous calendar page, unchanged.

REDESIGNED CALENDAR PAGE AFTER REGISTRATION.

REDESIGNED CALENDAR PAGE AFTER REGISTRATION.

If user clicks on “Back to Calendar" on the previous page after registration, the calendar will show the event with the full box colored. This provides more visual contrast to show the shifts the user has signed up for. This also requires less mental resources since colored area can be perceived pre-attentively, and that users are not required to remember which color means successful registration.






SUMMARY

This project focused on the redesign of the information architecture of the Volunteer Connection site, and I built out two different scenarios to illustrate how the user experience can be improved with the new structure and navigation.

There are still other aspects of the site that can benefit from redesigns, such as minimizing the use of links (to PDF and Word documents), rethinking the content strategy of the site, and improving the mobile experience. However, these are out of scope for this project.

I do realize that the redesign is based on my own experience as the user and dealing with the organization, so this mainly serves as an expert review instead of an actual design based on user research and testing. I am glad that I am able to use my expertise to relieve my own frustrations and remove the obstacles to changing my behavior and becoming a better volunteer. I have send this to management within the Red Cross and I hope that at least some of the insights are be useful in their efforts to retain and engage volunteers.