Overview

Details

Project
Responsive Website Redesign

Role
UX Designer

Methodologies
Heuristic Evaluation (pdf)
Site Traffic Analysis
Interviewing
Usability Testing
Personas
User Journeys
User Flows
User Stories

Team
Liam Robb O’Hagan

Duration
Ongoing

Figma
View Files

This Connecticut based non-profit was conceived in 2019 and launched in a hurry in response to the pandemic in March 2020.

The aim of the organization is to match older or disabled people in need, called Community Members, with volunteers who can help them out by completing a Deed the Member had requested. Typical Deeds ranged from help at home or in the garden to transport to a doctors appointment.

By October the founders were looking for a volunteer to do website audit on catch-a-fire. I was given the job after a live heuristic evaluation of the site’s home screen during the initial interview.

How might we help URCC design systems and a website that explains its mission and better connects its volunteers, community members and partners?

Research

Heuristic Evaluation

I started by producing a 60-page Heuristic Evaluation of the site using the ABBY Method. The heuristic violations broke into two broad categories:

1.     User Interface issues.

a.   Inconsistent styling of headlines and buttons.

b.   Variable page structure, that appeared like a template that had been broken at will.

c.  Hard to read blocks of text.

d.   Poor or non-existent error handling in forms.

e. A user profile interface that was crud in the lower-case sense of the word.

f.   Requiring users to make unnecessary clicks to navigate the site.

g.   Some things like the hot magenta and electric green colors were not negotiable, but having each color refer to the volunteer or member section of the site was recommended.

2.     Content. This was where the site really fell down. The content of the site was not arranged with any sense as to how a user might interact with it. 

a.     The Homepage content included sections about being a community connection and Media Coverage of URCC before the section titled “What We Do?”

b.     Content in unexpected places. Rather than appearing on the About Us page, the founder bios were on the Contact Us page, which had no link to contact anyone.

c.     Repetition of mission messaging on secondary pages that only served to tell the user what they already knew and block the implicit action they came to take.

d.     No clear messaging on how the process worked and what the requirements were.

e.     Secondary level concepts such as Partner Organization and Hometown Hero that only added to the potential confusion.

f.  Images not supporting text or the mission of the site.

g. Email messages generated by forms that provided users with no indication of what would happen next.

In so far as the website is a window into the design of the organization beneath it, many of these content issues indicate problems with the rushed conception of UR Community Cares that had not been properly addressed.

For example, during sign up members could indicate if they had a pet, but they were not asked to provide information about the pet that might be useful to a volunteer who was scanning the site deciding to help with a deed; was that pet a large dog that I might be scared of or a cat I might be allergic to?

The process of matching volunteers and members involved some very interesting user flows. Strategically these need to be better designed.

Usability Testing & User Interviews

Usability testing of the existing site with people who fit the profile of a Volunteer and a Community Member, and interviews with current Community Members and Volunteers backed up the findings of the Heuristic Evaluation. The site was unwieldy, frustrating and detrimental to the cause. Perhaps nothing summed up the issues and the opportunity like this quote from a Community Member.

“The website is a pain in the butt. But I found a volunteer;
She is awesome. I call her when I need stuff done.”

Personas and User Journeys

This site has multiple users. These personas and user journeys focus on three most important. The failure of the current site to meet their needs presents an opportunity to overhaul the design of the system.

Research Recommendations

The existing site needs to be made functional/debugged as soon as possible. I recommended some quick fixes to the content and the form flows.

Then the site must be redesigned using the following insights:

1. Central concepts like “Community Member”, “Deed” and “Partner Organization” need to be better explained to the users.

2. Earning Trust is a barrier to getting users to sign up.

   1. Warn users they will have to provide sensitive information during the sign up and explain why this is.

   2. Move the collection of Social Security Numbers off-site to a Background Checking company.

3. Break the registration process into a pre-background check and post-background check flows.

4. Collect information that is useful and can help match a Volunteer with a Community Member. For example,

   1. The nature of the Community Member’s disability.

   2. Is there parking/home access information the volunteer should know

   3. Collect Allergy information.

5. Upon sign in users should be shown a dashboard of Deeds rather than their profile.

6. Improve the Deed processing by giving Community Members the ability to:

   1. Reschedule a Deed that wasn’t Accepted, rather than canceling it and creating a new one

   2. Request a particular volunteer with whom they have worked before

   3. Make a Deed repeat

   4. Indicate a Range of Days and Times the Deed can be done.

   5. Have a friend or relative manage their account on their behalf.

7. Improve the CRUD functionality by giving the users and administrators the ability to:

   1. Put an account on hold

   2. Edit all profile functions

   3. Undo edits to their account.

8. There were also new operational requirements that needed to be integrated into the redesigned site

   1. Display sponsorship messages on select pages

   2. Integrate a Specially Trained Volunteer program

   3. Handle minor volunteers, and the requirement they be supervised by adults.

   4. Handle volunteers requiring their Service hours tracked.

9. Redesign the automated email communications with the users.

   1. Add emails that explain to the users what is happening with the site

   2. Limit the volume of Deed emails, so as not to overwhelm volunteers with requests.

10. The changes would require an expansion of the database.

    1. A separate volunteer who specialized in Database design recommended starting over with a better designed database.

The New Site

Pro Bono Development: Story 1

UR Community Cares got a commitment from a large web development company to rebuild the site pro bono. They wanted to start before I was anywhere near finished with the design, and insisted on freezing the requirements prior to starting the development. In order to get a minimum viable site ready I had to cut out some desired functionality, and to buy time I requested they take medium-fidelity prototypes and have one of their creative partners design the high-fidelity user interface. I had to design the dashboards, editing functions and profiles based on their design.

I also had to rewrite the user stories documentation to account for all the needs of the site, as the person they assigned had done a poor job. There were Create account user stories, but no Read, Update or Delete stories. This extended the development time of the site. Regularly during status meetings they would complain about the additional user stories. I gently reminded them that they represented the minimum requirements for a user to interact with the site and therefore they shouldn’t be a surprised to see them.

Furthermore, they insisted on developing the site based on the existing code. This was against the advice of myself, and a volunteer database administrator, who felt the existing database was poorly designed and would require some complicated coding to overcome these deficiencies.

The development took over 18 months. We were not involved in the process, except as testers. A lot of time was wasted as developers went off on their own, often with little familiarity with the requirements. The development team was constantly changing, and the communication between developers was poor. The same basic form inputs were often coded differently on separate registration flows! It was not how I expected a large firm would operate, but it demonstrated the importance of including designers in the development cycle.

It was very much a take what we give you situation. It dragged on, and the folly of building on the faulty existing site made the process more and more complicated.

Iterative Testing

Because the developer insisted on freezing the design at the start of the process, which was based on a mid-fidelity design, it was a struggle to get any changes from the usability testing of the high-fidelity designs included in the scope of the development.

Usability testing of the new site demonstrated some improvement in performance. As the operation, and the website that supported it were essentially rebuilt and expanded comparisons to the existing site were of limited value. One task that tested the content on the public-facing pages did indicate that the new site better communicated the goals and processes of UR Community Cares. While the collection of private information, especially Social Security Numbers, remains a concern to seniors, the addition of an upfront disclaimer at the beginning of the registration process, and the use of the a separate specialist background check organization at the end, largely eliminated the sharp negative reactions to the Community Member registration process that greeted testing of the existing site.

However, the learning curve required to use the site remains steep, and as the functionality has increased at least four-fold it is only steeper. It was noticeable in testing that those who didn’t take the time to read through the explanations struggled to complete the tasks. While too much text can smother usability, at some point you have to rely on the user being willing to put in the effort to understand a complex site. If the artifice of Usability Testing falls down, it is in replicating this need.

The organization was reluctant to change its terminology, Community Member and Deed would remain, and although they were not intuitive terms, there was no obvious replacements. For example, using Seniors for Community Members, would exclude younger people with permanent or temporary disabilities. Rather than searching for a perfect descriptor, I decided we needed to invest in the education of the users, by adding user guides and informational modals that would help walk them through the site. Although, testing soon revealed a button labeled “Deed Guide” was better suited to older users than “Deeds 101”.

We also decided to work on a robust plan to transition existing users to the new site, which will include zoom seminars. For example, while most young people intuitively understood that the close eye, thumbs up and thumbs down icons in the Actions column on the Dashboard would enable them to hide, accept or decline a deed, these action icons were less clear to older users, hence the addition of a pop-up modal to help them understand how they could use them.

One example of the challenge of increasing complexity was the difficulty test-takers had with the task of Closing of a Deed.

In the existing site there was no distinction between a Volunteer or a Community Member Closing a Deed although these were distinct processes. Being the user who set the time, the Community Member directly influenced the number of hours the Volunteer got credit for, which is important for Volunteers who are required to do a set number of service hours. The solution, to separate the Community Member’s and Volunteer’s post-deed being done actions into Deed Closure (Community Members) and Deed Completion (Volunteers) flows presented new challenges. A Volunteer Completing a Deed was largely irrelevant to a Community Member so we tried to not confuse them with the term Completed: from the Community Member’s perspective the Deed status would only be Closed or Not Closed.

For a Volunteer, it was not only important to show their post-deed status, but also what the Community Member had or had not done, resulting in four post-deed statuses: Incomplete-Not Closed, Incomplete-Closed, Complete-Not Closed and Complete-Closed. These were all dependent one which user had done what across time.

On the user Dashboard, time was also used to separate Deeds into those that were in the future, Upcoming Deeds and those that were in the past, Overdue and Done Deeds. In testing it was apparent that this required some learning, reading on behalf of the users.

Pro Bono Development: Story 2

In June 2022, the first development partners were convinced that they were close to having a site ready for production. Myself and my Database specialist peer were testing it. We felt it was a long way from being ready for the public. The Database specialist was skeptical they could ever graft the new site onto the woeful data model.

Just as the imperatives and expectations were diverging, a second website development company, Sysintelli, made us an offer to start development from scratch. They would work with us to redesign the database, build the new site on an angular platform, and meet the functional requirements we wanted. We advised the UR Community Cares board to take up their offer.

Before starting over, I took the opportunity to the build out of the functionality, which had been prematurely frozen by the first developer, resulting in a much fuller site with fewer loose ends. The final site is rendered in high-fidelity screens on 7 different figma files:

1. The style guide and public facing pages of the site and a library of components. Each form input is rendered in a default state, error state, review state, edit state and updated state.

2. Registration for the Volunteer users: Individual Volunteers, Transport Volunteers, Group Volunteers, Families and Specially Trained Volunteers.

3. Registration of Community Members and Partner Organizations

4. Dashboards for all users and site administrators

5. Profile Read, Update and Delete functions and user status updates

6. Deed creation and processing

7. Mobile version

The first site development was based on a limited MVP. Starting over enabled me to iterate based on testing and design a much more user-friendly site, that meets the expanding needs of the organization.

Development started in the fall of 2022, and is still ongoing.