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.