Product Design for a Health Security Start-up
Role
UX Research Lead
Product Designer
Lead
​
User Research
Heuristic Evaluation
Usability Testing
Research Report
Duration
​
4 weeks
July - August 2020
Status​
​
Shipped
Background
Due to the pandemic, health security becomes a primary concern in the general public. Our client sees the opportunity in leveraging self reported behavioral, symptomatic, and vitals data to create a way for businesses and schools reopen safely.
Problem
As establishments start to reopen, many people are getting ready to transition out of quarantine. However, there are still concerns around returning to the office or school.
How might we build a health safety compliance tool to accommodate diverse user needs while ensuring accurate data capture and risk assessment?
Challenge
Data Collection Survey?
Confidential, Frictionless, and Delightful Experience
Outcome
Impact
With a series of digital product designs, we were able to:
-
Establish Civilience's brand identity and digital products
-
Increase their credibility with a established online presence
-
Acquire partnerships with University of Nebraska School of Public Health, Actionaly, and TechAscent
Discover
In order to better understand the needs and pain points of the target users during the COVID-19 pandemic, our team conducted both business analysis and user research. Then we synthesized that data from user research to further define the problem we are solving for before moving into design.​
User Research
We interviewed 5 users from our target audience who were considering or had already returned to work in person.
​
​
The interviews were conducted over Zoom to explore attitudes and concerns around returning to work during the COVID-19 pandemic and sharing health information online.
Affinity Map
We were able to group and consolidate the user interview notes into 8 general themes. We summarized each theme by an "I-statement" to represent that particular behavior or attitude. The affinity map enabled us to develop personas, user journey, and actionable insights.
Challenge: stakeholders’ varying perspectives on first adopters of MVP
During the initial client interview with the primary stakeholder, our team was informed that the target user of this mobile app is essential workers. However, in the second client interview, we spoke with two other founders of the company, who put great emphasis on the product’s accessibility for school-aged children.​
Solution: helped clients narrow the scope of the MVP
Our team took in considerations of the requirements from both client meetings, discussed the feasibility of the user interviews involving minors. We realized due to our time constraints and complication of privacy protection on minors, the MVP should be designed for working adults.
Our team went out and interviewed 5 working individuals, some are in the process of transitioning back to work, some are already commuting to work.
Define
Through talking to our potential users, we were able to better understand their thoughts on returning to work, disclosing medical information, as well as their habits on self reporting health related data.
User Needs
Users want employers to ensure health safety compliance at workplace
Users value looking at historical data to understand trends in their overall health
Users need to be motivated to continue recording their vitals data daily
Users would want their sensitive personal and medical information to be secure
Personas
Primary mobile and web app end-user
Secondary mobile and web app end-user
To ensure we keep the target audience in mind throughout the design process, we leveraged the user research insights and created two personas.
Maria is a primary persona that represents individuals getting ready to head back to work but is hesitant about how safe it is because she is afraid of getting her family sick. Alex is a proto-persona that represents the secondary target audience that reside in the same household as the primary users.
User Journey
Maria's emotions on a day back in the office
We mapped out an ordinary day in Maria’s life transitioning back to the office, so we can connect with her and understand her emotional journey. We identified multiple opportunities for our products, indicated by the red dots on the journey map.
Challenge: stakeholder emphasized on gamification
Our client stated the need to gamify the daily screening to make the process less daunting and more engaging. The daily screening also needed to be attention-grabbing. However, the user research did not support this feature.
Solution: explained the research findings did not support gamification needs, provided alternatives
We communicated the results of the user research to the stakeholders by presenting the insights, persona, and the user journey. Instead of gamification of the daily survey, we suggested keeping the conventional survey layout to ensure the tone of the screening products remaining friendly, warm, and caring.
Design
The design phase started with ideation and a design studio for the mobile app. We then iterated a mid-fidelity and a high-fidelity prototype in Figma. 3 rounds of usability testing were conducted to validate the changes made.
​
Mobile App Main Features
Daily behavioral and symptom self-report generates a QR code that serves as a pass to enter buildings
Provide access to historical data and trend of daily vitals data input
Earn point incentives for Daily Check In and redeem attainable rewards
Easily accessible and upfront privacy policy information in plain language
Mobile App Usability Tests
Due to the change in content of the intake and screening survey, we had to perform additional usability testing to validate the changes we made in the survey contents. The client's desired average time on task was set to 2-3 minutes per user.
Mobile App Usability Test Results
The number of behavioural questions increased from 9 to 14 - an increase of about 55% in length - time on task doubled. The easiness rating also dropped from 4.8 stars to just over 3 stars. The users' ability to complete the tasks was not impacted as much as their perception of the task and willingness.
We also received significant user pushback due to the increased Daily Checkin questions. We communicated this observation to the client, and they are currently working on reducing the questionnaires. A 3rd round of usability testing will be done with the new content.
Public Facing Website
Usability Test
We then moved on to designing a digital presence for Civilience - a public facing website. We carried out the same tone, brand, and illustration styles to achieve cohesion and unity. One usability test was conducted so far, we made changes to the primary navigations.
Primary Navigation Version 1
2
1
Website Usability Test Results
1
2
The primary navigation "Be Civil" was ambiguous and caused confusion for users.
"Contact Us" was misleading and was not connected to the sales contact form.
Primary Navigation Version 2
1
2
1
We proposed the suggestion to the client to change "Be Civil" to "Our Products" to provide more information in the navigation.
2
We suggested "Get Civilience" should replace "Contact Us" on the home screen to increase the findability.
Our next step is to conduct another round of usability testing to validate the changes we proposed.
UI Design
Colors are used deliberately in the mobile app design to convey tone and guide actions. We consistently reserved #5265A9 as the "active indicator" for users to learn and follow throughout the app (especially the long Daily Checkin surveys). Users simply follow this visual cue to continue the survey until they reach the end. If their result is desirable, they will see the same color again.
= Go!
1
1
2
2
1
Unfilled radio button and card indicate unanswered questions. "Next" button shows #757575 to indicate inactive state.
2
Radio button and card filled with #5265A9 to indicate selection. "Next" button inverts to the same color to indicate active (clickable).
We chose colors that represent friendliness, warmth, and caring per client's request. They are also passed readability check to ensure users with special visual needs are accounted for.
Colors for background, texts, and indication for inactive components. We did not use black and white but still have enough contrast for readability.
Illustrations by one of the UX designers on my team, Sheetal Suchde, conveys a warm, friendly tone. The characters are a vital part of the Civilience brand, as they not only inform users, but also bring delight to the experience.
Deliver
After 4 weeks, 2 design sprints, we delivered high fidelity prototypes of an iOS app, and a public facing website. The B2B customer portal and the web based survey are still in progress.
We implemented the real copy for intake and daily check-in surveys into the prototype to test the time on task. Over 100 screens were designed as a result. The above prototype is a shortened version to represent the core functionalities of the mobile app prototype.
KPIs and
Heuristic Evaluations
In order to ensure high quality implementation and track the performance of the mobile app and public facing website, our team also provided Google Heart Framework as KPI objectives. Heuristic evaluations are also provided with suggestions to set baselines for future iterations and usability testings.
Google Heart Frame
Heuristic Evaluations of Mobile App
Heuristic Evaluation for Public Facing Website
Google Heart Frame
Measurable KPIs | App Heuristic Evaluation | Website Heuristic Evaluation
Next Steps
Work in Progress
We are in the process of finish designing and testing the B2B customer portal site and a web-based version of the mobile app for ad-hoc users. We plan to conduct another round of usability test to validate the changes we implemented on the public facing website.
Future Collaboration
The CEO of Civilience is working with their new partner - Actionaly to kickstart a new project to help k-12 grades school openings go smoothly and safely.
We are excited for this opportunity and look forward to provide our expertise to help them achieve this goal.
Takeaways
1
I learned it is important to communicate the research finding to the client, especially the findings are different from what client initially envisioned. Research and usability testings are great ways to prevent errors before the developers write a single line of code.
2
Communication! Timely and open communication is important for any cross-functional team, especially for a rising startup. Plans and strategies change unexpectedly, we were able to navigate the changes and delegate quickly because we were effective communicators throughout this project.
3
How to meet and balance all 4 heuristics above? Research, test early and often, open to feedback, experiment, and most important: keep learning!
Thank You for Reading!