QRona

Inspiration

My university is planning to use a contact tracing app in the upcoming semester to mitigate risks of COVID-19. I downloaded the app and tried it out along with a few others. After some discussion, most of them expressed uncertainty about whether they should report their symptoms honestly because they don't know what the "consequences" are if they report some symptoms (e.g. will I be forced to quarantine for a bad allergy?). While I think everybody should report their symptoms honestly, I could see that their concerns are legitimate. Since contact tracing plays such a crucial role in curbing the spread of COVID-19, I wanted to find a solution that can improve its reliability and its reputation in the public eye.

I believe that the most important aspect of contact tracing is trust: if people trust that their information will be kept private and won't be used against them, they are more likely to report their symptoms honestly, which is crucial to contact tracing. Current contact tracing apps lack the transparency required to gain the trust of their users, and most of them remain rather unhelpful at helping users avoid hotspots. The main issues are summarized below:

1. With a contact tracing app made by an organization where administrators have all the user information, users are reluctant to report their symptoms honestly because they are worried that they will be prevented from carrying out their normal tasks if they are deemed "at risk".

2. Most contact tracing apps do not let users experience the benefits of the data contributed by them and those around them (e.g travel and contact history, a heat map of places to avoid).

3. Most contact tracing apps work at a county or state level, but are ineffective at the organization level: there is an obvious distinction between the risk levels of sitting inside a lecture hall and sitting at a bench just outside.

QRona aims to resolve these issues by anonymizing contact tracing data, providing room-level location tracing, and providing users with access to the data they contribute.

What it does

This app uses QR codes to achieve fast and anonymous contact tracing. The organization customizes the system to its own requirement (specific survey questions, custom maps, etc.), and users sign in with their organization's ID only to verify their identity. After that point, their information becomes anonymized, and nobody - not even the organization - can identify individuals from the data.

Each user fills out a symptom survey to generate their unique QR code each morning, which they can add to Apple Wallet. They will receive suggestions based on their responses, and the QR code will also reflect their responses. These QR codes can be scanned at room and building entrances (using a scanner or a smartphone). The organization may require or strongly urge users to scan their code before accessing locations, so that each location has a complete record of everybody present and their symptoms. Once a person scans into a location, they are presumed to be present at that location either until they scan somewhere else, or until the typical duration people stay at that location elapses.

Users can view heat maps of their organization showing high risk areas, and get detailed information when they click on a location in the map. They can also access a list view of each room and building within their organization, with real-time updating occupancy and risk levels. This can help them plan their routes and avoid unnecessary travels to high risk areas.

Users can choose to receive alerts when they are close to areas frequented by high risk or infected individuals, and they will also receive alerts if they've been in a room with someone who later tests positive. They will also be able to easily access a full history of their scans and see where and when alerts are triggered.

Because of the nature of this app, the user's location is not required. However, a user can choose to allow the app to track and share their locations anonymously to contribute to the heat map and to be warned about proximity to hotspots. They can also choose to share their vitals from Apple Health to contribute data to healthcare professionals.

How I built it

Originally, I wanted to create a design that uses existing ID tags of organizations. However, I soon realized that this option does not scale well because every organization has their own ID system, and it is difficult to design an app that is compatible with all of them. QR codes are universal and easy to work with, without sacrificing the contactless nature of the scans.

The application is prototyped entirely in Figma. I built a separate page for each tab in the navigation bar of the app, and a page for the setup process the first time a user opens the app. I also built a page that shows some examples of push notifications the app might send. I added interactivity to the prototype by adding at least one clickable example of each option, adding animations that feel intuitive to the flow of the app.

For the visuals, I took inspiration from a combination of Apple and Google user interfaces, and decided on a dark color palette. I found vector graphics for most of the icons, and I adjust their colors and added alpha channels as necessary. Overall, I aimed to make a clean app that has an intuitive flow, with all the important information no more than 2 taps away.

Challenges I ran into

Originally, I wanted some views to show up as over lays with background blur. However, the background blur for overlays did not behave as expected in device simulator. I ended up creating a separate frame with the blur present rather than an overlay.

It took some time to figure out how to create a scrolling screen in Figma. In the end, I realized that I needed to have a frame that extends beyond the bottom of the device, while making sure that the navigation bar stays in place.

It was difficult to get a working interactive map in Figma. I ended up using a picture of a map much larger than the device frame so that one can scroll around, and had a fixed frame to show what happens when one clicks on a location on the map.

I originally tried to prototype the whole app on a single page, however the control flow for navigations quickly became unwieldy. Therefore I decided to create each tab of the app on a separate page.

Accomplishments that I'm proud of

This was my first time using Figma, and I was able to learn to use it very quickly because of my experience in video graphics design.

What I learned

I did not know about Figma before, and I was always hesitant to prototype my UI ideas because I thought coding them would be difficult. Now I know that I do not necessarily need to code to design an app, and I can see myself using Figma and similar tools much more in the future to prototype and demonstrate my ideas. I also learned a lot about UX, IA, and UI design from reading the various documents linked in the handbook.

What's next for QRona

The prototype of QRona is only for the end user. The next step would be to create a version of the app for the administrators of the organization. The admin version should be capable of editing the symptom questionnaire, setting up and connecting new scanners at locations, exporting data as CSV for external data processing, and other enterprise level features. The aim is to have a system that is easily adaptable by organizations at minimal cost.

Another future feature for QRona is to open up the possibility of sharing data between organizations, so that organizations can join forces and contribute more data for the public's benefit.

Built With

• figma