Circle the City
(Healthcare) Revamped

Role

UI Designer
UX Designer
UX Reseacher

TOOLS

Figma, Google Docs, Google Sheets, Zoom

CLIENT

Circle The City

TIMELINE

Sep 2024 - Dec 2024
(13 weeks)
The Circle the City website plays a crucial role in connecting donors, volunteers, and patients with essential healthcare services. However, users face significant challenges due to poor navigation, unclear error messages, and accessibility barriers. The reliance on outdated processes, such as downloadable volunteer sign-up PDFs, further complicates user interactions. These issues create frustration, reduce engagement, and hinder task completion rates, underscoring the urgent need for a comprehensive revamp to improve usability, accessibility, and overall user experience.

Problem Statement

Goal

  • Simplify donation and volunteer sign-up processes
  • Improve navigation and accessibility
  • Enhance user engagement and retention
The goal of this project was to identify usability challenges on the Circle the City website and redesign critical workflows to:

This redesign aimed to create a user-centric experience aligned with the organization’s mission to support vulnerable communities through seamless digital interactions.

Heuristic Evalution

overview

To address the usability challenges of the Circle the City website, a heuristic evaluation was conducted based on Nielsen's 10 Usability Heuristics for User Interface Design. The goal was to identify key usability issues affecting navigation, error messaging, accessibility, and user workflows.

PURPOSE

This heuristic evaluation aimed to identify usability gaps in the donation process, volunteer sign-up workflows, and content accessibility to inform future design decisions and testing strategies.

User Research

After conducting the heuristic evaluation, a user research survey was performed to gain insights into the Circle the City website's users. The survey aimed to understand user needs, motivations, frustrations, and expectations to guide design decisions and improve functionality and usability.

PURPOSE

  • To identify user pain points in key areas such as donation workflows, volunteer sign-ups, and website navigation.
  • To gather demographic and behavioral data to tailor the redesign toward user needs.
  • To uncover frustrations and motivations influencing user engagement with the website.

Survey Results – Who are Circle the City’s users?

age

Primarily ranged from 18–55+, covering diverse user groups.

Demographics

 A mix of donors, volunteers, and patients accessing healthcare services.

Common Frustrations:

  • Unclear donation error messages
  • Difficulty in locating volunteer sign-up forms
  • Outdated workflows relying on PDFs
  • Navigation inconsistencies

Common Motivations:

  • Support healthcare initiatives
  • Participate in volunteer opportunities easily
  • Contribute donations seamlessly

Most Important Needs:

  • Clear workflows for donations and volunteer sign-ups
  • Accessible content for users with disabilities
  • Real-time feedback and confirmation mechanisms

Accessibility Audit

An Accessibility Audit was conducted on the Circle the City website to evaluate its compliance with WCAG 2.1 AA standards. The audit aimed to identify barriers preventing users, especially those with disabilities, from effectively accessing and interacting with the platform.

USER PERSONAS

overview

The user personas for the Circle the City project were developed based on insights gathered from user research surveys and usability testing. These personas represent the key user groups interacting with the platform.

PURPOSE

The goal of creating personas was to build empathy and gain a deeper understanding of the needs, motivations, and frustrations of primary users. This approach ensured that the redesign aligns with user expectations and effectively addresses critical usability challenges.

Usability Testing

OVERVIEW

A usability testing phase was conducted for the Circle the City website. The goal was to evaluate the user experience, identify usability pain points, and validate design assumptions
The usability testing process included:

Pre-test Questionnaire:

Collected demographic information, user motivations, and familiarity with healthcare-related websites.

Scenarios & Tasks:

  • Navigating to the Donation Page and completing the donation process.
  • Finding and completing the Volunteer Sign-Up Form.
  • Accessing Healthcare Services Information efficiently.
3 scenarios with multiple associated tasks were designed, focusing on:

Post-test Questionnaire:

Gathered insights on user satisfaction, task completion difficulties, and suggestions for improvements.

Purpose

The purpose of usability testing was to:
  • Identify pain points in donation workflows, volunteer sign-ups, and service navigation.
  • Observe user interactions to validate design hypotheses.
  • Collect qualitative and quantitative feedback to guide iterative improvements.

Participants Tested: 5 participants

Usability Data from Testing

The usability testing for the Circle the City website revealed critical insights into user pain points, including navigation challenges, unclear donation workflows, and volunteer sign-up inefficiencies. These findings, along with qualitative and quantitative data from participant feedback, were systematically organized and analyzed in a comprehensive spreadsheet to guide the redesign process effectively.

wireframing and prototyping

LOW FIDELITY

The results of the usability testing on the Circle the City website allowed me to move forward with creating a wireframe to better serve the needs of donors, volunteers, and patients. This prototype was created in Figma, focusing on improving navigation workflows, streamlined donation processes, and accessible volunteer sign-up forms to enhance overall user experience.
While working on the wireframe design for the Circle the City website, a detailed write-up was created to explain the changes made and the rationale behind each design decision. This document outlined the improvements in navigation workflows, streamlined donation processes, and enhanced volunteer sign-up forms, ensuring clarity on how each adjustment addressed specific usability issues identified during testing.

HIGH FIDELITY PROTOTYPING

After several rounds of research, prototyping, testing, and iteration, I successfully created the final version of the Circle the City website prototype. My primary focus was on key user goals, including improving the donation workflow, enhancing the volunteer sign-up process, and streamlining access to healthcare services information, all of which were significant sources of frustration identified during usability testing.

Key changes included enhancing navigation clarity, providing clear feedback mechanisms during donations and sign-ups, and ensuring consistency across all key interaction points to build user trust.

LEARNING

  • The critical role UX plays in improving healthcare engagement and outcomes.
  • Time management is essential for iterative design and usability testing.
  • User feedback is invaluable for identifying key pain points and areas for improvement.
  • Staying updated with modern design standards ensures relevance and usability.
  • Clear communication and alignment with stakeholders drive project success.
  • Striving for perfection can hinder progress; iteration is key.
  • Constructive feedback accelerates refinement and enhances outcomes.

NEXT STEPS

Future research opportunities will include conducting mobile usability testing to ensure an optimized experience across various devices and screen sizes. Expanding participant demographics to include individuals with diverse accessibility needs will provide deeper insights into creating an inclusive design.
Additionally, implementing iterative feedback loops - with prototypes tested at multiple stages will allow for continuous refinement and validation of design choices. This iterative approach will ensure that the final platform aligns with user needs, organizational goals, and modern usability standards.
By focusing on these next steps, Circle the City can continue to enhance its digital presence, foster user trust and engagement, and support its mission of delivering accessible healthcare services effectively.
Previous
Previous

AI-Enhanced Cancer Toxicity Reporting App at the Mayo Clinic

Next
Next

City of Mesa - Natural Gas Form Redesign