top of page
Redesigning Civilience's Community Health for Accessibility
mockup-of-three-iphones-xs-max-lying-on-a-customizable-background-253-el.png
Who is Civilience?
Civilience is a non-profit start-up that aims to build a community in real life by aligning the actions of community stakeholders, including individuals, government, and enterprises. The company provides guidance, self-awareness, and community through its product.
The Task
To evaluate and enhance accessibility on Civilience's first vertical, Community Health. Keeping the budget, software constraints and deadline in mind I would need to prioritize my design decisions.
Context: 
As a UX design intern at Civilience, I evaluated their Community Health mobile prototype and identified several accessibility concerns on my first day. I provided recommendations to improve the UI and accessibility.

Challenge: Improve accessibility and UI 

Duration: 3 months on a part time schedule (research, develop, deliver, and implement)

My role: UX Designer

My deliverables: Included are a UI and Accessibility Audit report with Figma high-fidelity wireframes, as well as functionality testing after implementing the redesign.

Team: Consists of the Founder, a UX team comprising of three designers (including myself), and a frontend team.

Product: A mobile screening tool for infectious diseases that offers quick, clear guidelines in real-time to align communities, enterprises, and local government.
The Goal
To audit the MVP for Community Health feature's accessibility and UI, prioritize and create solutions for identified problem areas before launch.
The Problem
Users need to access the Community Health feature to assess their health and protocols with the infectious disease survey.
Design Process
Develop
 Prioritization Matrix
Deliver
Hi-fi wireframes
Implement
Work with frontend to implement
Research
External secondary research
4 Phases
This project was divided into four stages: conducting external secondary research on visual design accessibility standards, prioritizing the research using a feature matrix, delivering a validated Community Health feature through an iterative research and development process, and implementing improvements with the frontend team and testing before launch.
The First Three Phases
External Secondary Research, Prioritization Matrix and Hi-fi wireframes
After conducting my secondary research and reviewing the UI and accessibility of the MVP, I found the following to be major concerns that needed to be addressed.
 
  • Typography: Font sizes and color combinations
  • Color Contrast: Use adequate color contrast
  • Call to Action Buttons: Smaller then the standard buttons
  • Coding errors: Minor coding issues
I provided recommendations and worked with the founder and UX team to create a prioritization matrix that helped us generate a prioritized listed based on the business and user goals. We decided to focus on the following five problem areas:
  • Placement and UI of the Weather Panel Box
  • Color combination of the local infectious disease graphic and text
  • Interface design of the Community Health segment
  • Error Boxes and Default Language Issues
  • Color combinations and accessibility scores for the DO, SAY, and SEE sections of the Community Health Home screen
I worked with the UX team to create the following new Figma wireframes.
Problem Areas and Recommendations
Problems: Placement of the Weather Panel Box
Screenshot 2023-05-01 at 2.43.29 PM.png
This feature detects the user's location and uploads their local infectious disease data. However, the weather panel box design appears unimportant and visually lost, and instead visually appears to be a part of the ad and header.
After detecting the user's location, the Community Health card displays the local infectious disease data. However, the color contrast of the circle and score is a major concern.
Color choices lack purpose for Health feature, impacting user engagement. Incorporating more fitting colors could improve overall appeal.
Recommendation: 
Screenshot 2023-05-01 at 3.04.01 PM.png
The UX team improved the weather panel box UI by adjusting its placement and creating a clear hierarchy between the text and the box. It now appears as an integral part of the app below the Civilience logo.
We faced color difficulties as they were tied to the infection risk bar's color spectrum. Despite this, we improved the number's readability by adding a drop shadow. We also ensured adequate color contrast for accessibility throughout the app.
We used varying shades of blue for each Health segment to aid user association.
Error Boxes and Default Language Issues
Screenshot 2023-05-01 at 3.16.01 PM.png
I found that the error box overlaps with survey text, hindering readability. The error message is also unclear.
Screenshot 2023-05-01 at 3.16.09 PM.png
More space is needed to ensure that the error boxes are visible without obstructing the text. The current position of the boxes above the survey text is causing readability issues. The error messages also need to be clearer and more concise for better user understanding.
Recommendation: Front-end fixed the above problems.
Color combinations and accessibility scores
Tested Civilience's style guide colors for below combinations, but failed for adequate contrast. This was more noticeable on mobile with small text. Call-to-action buttons were also small and could be hard to tap accurately. Further accessibility improvements are necessary.
Screenshot 2023-05-01 at 3.31.50 PM.png
Recommendation: Improved colors and UI complement each other. Text and button sizes have been increased to meet accessibility standards.
We added drop shadows to improve readability and make the numbers stand out more on the circle background, as we could not change the background color of the circles.
Screenshot 2023-05-01 at 3.37.48 PM.png
The blue tone and white text were chosen for the Community Health feature to maintain visual cohesion and clarity, respectively. They passed accessibility testing.
The same background color and text color were applied for the Submit action button.
Phase 4
Work with front-end to implement the new Figma wireframes
I was in charge of working with the front-end team to implement and test the new iterations to the Community Health segment. We collaborated on the following:
 
  • Implementation of new wireframes: I prepared and handed off the necessary files to the front-end team so they can begin implementation.
  • Weekly meetings: We held weekly meetings to discuss design requirements
  • Testing: Once the new design was implemented, I prepared and managed testing the final and improved prototype.
Improving and Reiterating
Next Steps
  1. Usability testing to validate design decisions
Key Performance Indicators to monitor:
  • Number of users successfully navigating the Community Health screen
  • Number of users successfully reading and responding to the SAY section with the larger text
  • Number of users completing infectious surveys
bottom of page