TraceHub
Now, you don't need to download 5 apps for the latest COVID-19 updates. Access bite-size news, government guidance, and contact tracing abilities all in one spot.
Role
TraceHub was a passion project, where I did research, testing, prototyping, and branding.
Duration
1 month (July 2020)
Overview
TraceHub is a public service app designed to stop the spread of COVID-19. For existing coronavirus applications, the data visualization, updated resources, and contact tracing features are either disjointed or unreliable. Addressing those pain points, TraceHub aims to bridge the gap between a secure contact tracing experience and tailored health recommendations.
Team
Personal Project
Tools
Figma, Adobe XD
Scope
UI/UX, Branding
Kickoff
In this project, I took a goal-directed design method, focusing on qualitative research and asking initial key questions. I conducted a multi-methodology research to further understand people’s unique needs during the time of uncertainty. How do we bring factual statistics and informative news to people efficiently? What are ways that we can improve community-driven contact tracing? Examining existing COVID-19 mobile apps, media outlets, and academic articles, I want to create a faster link between possible carriers and reactive government authorities, minimizing the spread of the disease.
The first thing to do is to get to know the users through data. To better understand user needs and frustrations with the pandemic, I conducted interviews with 9 individuals who are regular users of iOS news apps. With more time, I would have preferred to reach a wider range of demographics, but due to the constraints of the sprint, my sample size was more limited.
Context
The first thing to do is to get to know the users through data. To better understand user needs and frustrations with the pandemic, I conducted interviews with 9 individuals who are regular users of iOS news apps. With more time, I would have preferred to reach a wider range of demographics, but due to the constraints of the sprint, my sample size was more limited.
From my observation, people are increasingly reliant on their phones during the outbreak. In terms of journalism and media coverage, people seek guidance on COVID-19 related information through searches on the internet and multiple news apps. According to the research conducted by the Pew Research Center, Americans are still not immune from campaigns of fabricated coronavirus news rampant across the internet. The environment in which people acquire factual information has changed drastically due to the physical constraints of the pandemic.
There is an opportunity to consolidate news reporting from trusted sources into one mobile platform.
PIVOT
People asked: “How can I actively help others in this pandemic?”
Among the 9 interviews I conducted, 7 of the participants raised this question. Staying updated on news coverage and practicing social distancing might not mitigate the spread fast enough. Users asked if there are ways to utilize technology to track potential carriers or locations with high risk exposures.
From here, I found a pivot point for the project. What if I can create a “hub” service that combines contract tracing abilities with up-to-date coverage and official instructions from the CDC? I began to refine the scope of the platform.
What is contact tracing?
Contact tracing has been a core disease control measure employed by health departments for decades.
Traditional contract tracing methods starts with the process of identifying patients with suspected or confirmed infection. The core principle rely on the patient’s ability to recall potential people who they had close contact with during the timeframe when they are infectious carriers. Public health staff will then warn individuals with potential exposure as rapidly as possible.
It’s Flawed
Try recalling someone you met three weeks ago.
There is a high possibility that people cannot memorize all of their encounters and locations they have been.
When people are prompted to answer questions during highly stressful situations, it is easy to forget past interactions.
The efficacy of Bluetooth during a pandemic is undeniable. The wireless technology, by design, is constantly detecting and reaching other Bluetooth-enabled devices. When Bluetooth chips create contact with unrecognized devices, they automatically delete each other from their respective memories.
Digitalized contact tracing technology retains the transmission history via Bluetooth signals. When people are diagnosed with COVID-19, health officials can now access their trace and other devices they have come in contact with. While human memory can be fallible, the anonymous Bluetooth trace will be much more reliable for future inquiries.
Evaluation
Where is the data going? Who has access to the trace history? The biggest worry of digitalized contact tracing system is the matter of privacy and security. In Singapore, South Korea, and Taiwan, data from governmental and voluntary contact tracing apps have already tracked potential carriers of COVID-19 and contributed to data from centralized healthcare systems.
The efficiency of digital contact tracing is apparent. Now, how do I increase users’ trust in the app experience through design?
I took a step back to discover potential worries and revisited the concept of privacy to realize 3 key pillars.
Competitive Analysis
Prior to developing the essential features for TraceHub, I wanted to find out what available apps offered.
Insights
Compiling results from user interviews and competitive analysis, I synthesized insights and organized them within three categories - Content, Privacy, and Interactions. I realized users questioned the security of contact tracing and their pain points are interdependent on each other.
DEFINE
Translating insights into features.
I extracted the pain points and user needs, translating them into potential features. I found out that TraceHub’s target user seeks for a comprehensive platform, where all news, guidance, and screening tools are available within one place.
The core features of the app became apparent after the user needs are defined. Due to the time constraints, I decided to create 6 minimum set of functions that will create the most impact on the user’s experience handling the pandemic.
Paper Prototype
I started iterating on the wireframe design by conducting the preliminary usability testing. The users provided feedbacks on the accessibility, readability, and discoverability of the low-fidelity prototype.
Initial Wireframes and Feedback
After prototyping some P&P wireframes, I reviewed necessary features and focused on screens that needed improvement. I designed two sets of mid-fi wireframes that are essential to the concept: Homepage and Checkups.
Polishing the underlying UX, I tested the wireframes with three participants to uncover their preferences for information extraction, visual appeal, and screening abilities.
I also found out that the money transfer feature between friends was widely used. People seemed to like the social aspect and enjoyed the convenience of the “Favorited” profile section. In terms of the Dashboard, I plan to give the Bank Account overview more visual impact. Users also love scrolling through Short Term Goals in the Goal Tracker screen. Perhaps, saving up for a tangible future heightens the motivation and anticipation for users.
HOMEPAGE
More clarity.
All three users preferred Option 2 for its visual appeal. They liked the tailored notifications on top, which suggested a sense of urgency and direction.
CHECKUPS
Less scrolling, more compact.
Most users preferred Option 1 for the “History” collapsible. They believe the pop-up is more efficient in categorizing past screening results. The long scroll in Option 2 makes it harder for the users to reach other functions on the screen.
HI-FI PROTOTYPE
The Solution —
Onboarding
The onboarding screens introduce the branding and the core features of the app. Users will have options to create a new account via email or integrate their social profiles.
PAIN POINTS SOLVED:
The option of integrating social platforms will simplify the sign up process for the users and help build a comprehensive user authentication database for TraceHub.
Dashboard
The dashboard incorporates daily reminders, urging users to routinize their daily checkups. Easy-to-understand data visualizations are key to the UI, so users can hover through tailored COVID-19 graphs fit for their locations.
PAIN POINTS SOLVED:
Instead of collecting COVID-19 related information from multiple apps, users can browse a comprehensive platform that offers the essential bite-size coronavirus coverage.
DASHBOARD FEATURE:
Find Testing Sites
TraceHub eliminates the hassle of searching for testing sites manually. By utilizing color sparingly throughout the map interface, I emphasized the testing site signifiers as the focal point of the user experience.
News
The News feature is quick and simple. With recognized iconography and intuitive display, the users can easily track the spread of COVID-19 through excerpts and articles from trustworthy sources.
PAIN POINTS SOLVED:
Dividing news into sections, the “What to watch” feature is designed as a condensed update for users on-the-go. TraceHub facilitates a familiar reading experience by curating a collection of coronavirus coverage from leading publications.
Checkups
Users can track their symptoms via the COVID-19 Screening Tool and share their results with healthcare providers and family. TraceHub keeps the users informed with specific recommendations based on governmental guidelines in addition to storing previous screening results.
PAIN POINTS SOLVED:
Every pop-up overlay is designed to reduce the time users need to access accurate guidance on recommended steps they should take. The screening tool incorporates intuitive gestures and micro-interactions, encouraging users to double-check their responses.
CHECKUPS FEATURE
Screening Tool
Micro-interactions are added to enhance the app experience, alerting users with instant feedback. The outline motion encourages users to focus on the accuracy of their responses before submission.
Trace
The opt-in contact tracing technology utilizes Bluetooth and encrypted data to track potential exposures. Users are in full control of their data with deleting and sharing capabilities. TraceHub creates automated alerts when people encounter someone who is tested positive for COVID-19.
PAIN POINTS SOLVED:
TraceHub creates a reference code for each device and stores contact information locally. Maximizing the efficiency of the app, users who are COVID-19 positive can register their test results anonymously to help protect the community.
TRACE FEATURE
QR Code
By sharing personal QR codes with healthcare providers, friends, and family, users can check in at community events and contribute to the contact database.
Style Guide
Mashing vivid blues and a three-toned black and white color scheme, I wanted to create a playful yet intuitive visual for TraceHub. Utilizing bright colors sparingly, I wanted users to focus on the important texts and the interactive charts. I also opted for the Publico Headline Web and Circular fonts, which contribute to the formal aspects of the interface.
Retrospective
As an enthusiast for impactful social causes, designing TraceHub was incredibly rewarding. I experimented with some Figma micro-interactions and crafted a more intuitive user experience. Throughout the process, I learned not to be attached with assumptions. While I was fixated on creating a clean UI without reminders initially, the findings showed that users preferred functionality over aesthetics.
Iterate, and then iterate again
Due to time constraints, I wasn’t able to test my final prototype. Moving forward, I will definitely conduct more usability testings and iterations.
Bringing in new technologies
Quite a few users proposed a feature for nearby stores that sell COVID-19 supplies (i.e., masks, disinfectant wipes, and latex gloves). Perhaps, TraceHub could build a relevant “Store Near You” feature, which keeps track of inventory numbers, utilizing machine-learning algorithms and location-based services.
Listen to the users
I want to reach out to more users and seek to understand their frustrations and validate my hypothesis with more A/B testing.