top of page
Redesigning Civilience's Community Health for Accessibility
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.
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.
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.
To audit the MVP for Community Health feature's accessibility and UI, prioritize and create solutions for identified problem areas before launch.
Users need to access the Community Health feature to assess their health and protocols with the infectious disease survey.
Work with frontend to implement
External secondary research
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
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.
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
I found that the error box overlaps with survey text, hindering readability. The error message is also unclear.
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.
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.
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.
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
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