white usable.tools logo with smile lockup


UI Designer and Frontend Developer


2 months (initial launch)


Figma & Tailwind CSS

Crafting the COVID-19 App Tracker For Discovery and Impact

dark usable.tools logo with smile lockup

Spring 2020 to 2021 COVID-19 App Tracker – UI Designer & Frontend Developer

On this project, I worked as the UI designer and front-end developer focusing on how users discovered COVID-19 applications and determining what information was displayed and how it was displayed.

Given the prevalent fear surrounding the pandemic, users were readily granting permissions without sufficient scrutiny. I played a pivotal role in designing user interfaces that emphasized transparency and educated users about data usage. Moreover, I worked closely with interdisciplinary teams to create a comprehensive overview of the various applications available and their permissions.


πŸ“‹ Overview

The COVID-19 pandemic and the absence of a standardized framework led to a chaotic app development landscape, making it challenging to effectively track and trace the pandemic. Users, driven by fear, readily granted permissions and access to sensitive data without questioning the purpose, raising concerns in the academic and journalistic fields about data privacy. Existing self-made tracking groups focused on COVID-19 cases but lacked a comprehensive overview of applications and their permissions.

πŸ‘€ Stakeholders

Working hand-in-hand with the product manager, I ensured alignment with the overarching vision and goals, guaranteeing that our design decisions resonated with the project’s strategic direction. With the software engineer, I fostered a collaborative environment to translate design concepts into functional and user-friendly interfaces, optimizing the technical implementation. Alongside the co-UX designer, I engaged in rigorous design discussions and critiques, pooling our creative insights to craft intuitive and aesthetically pleasing solutions.


⚑The Challenge: How do we best create an automated platform that enables journalists and researchers to effortlessly discover, sort, and access details about the COVID-19 application development landscape promptly?

πŸ”’ Constraints

1: Automatic scraping of the Google Play store for new and existing COVID-19 applications.

2: Collection and update of specific data in a hosted database and visualization on the website.

3: Implementation of self-contained automatic updates with indications of data changes.


πŸ” Approach

Our primary focus was engaging with academic researchers and journalists who interacted with COVID-19 applications. Our aim was to immerse ourselves in their experiences, gaining a profound understanding of their app usage, tracking methods, and research practices. Additionally, we delved into their toolkits and methodologies, dissecting their approach to unearthing new applications in this domain. This meticulous exploration guided our design process, ensuring that our solutions resonated intimately with the real-world needs of these pivotal stakeholders.

πŸ”‘ Key Insights

1: Researchers and journalists lacked a streamlined process and were reacting to stories and news media outlets as they came up.

2: They required an easier way to discover and investigate developers’ backgrounds.

3: Quick discovery of new applications and access to developers’ information was vital but currently challenging due to limited time and resources.

4: Understanding where applications were developed and launched, including government sponsorship, was critical.

Design Process

πŸ—ΊοΈ Mapping Out User Insights

Creating personas was the initial step in our user-centered design approach, aimed at establishing a profound connection with our users, primarily academic researchers and journalists. Insights garnered from interviews and surveys unveiled valuable perspectives and pain points, enriching our understanding of their unique needs. These personas became our guiding light, steering our design choices toward solutions deeply aligned with their challenges.

Subsequently, creating user flows further honed our user experience strategy. By meticulously mapping out the journey of academic researchers and journalists through the web app, we ensured an effortlessly intuitive interaction. Additionally, this step afforded us the opportunity to refine the logic governing app sourcing from the Google Play store database, enhancing efficiency and precision.

User Flow For Journalists

User Flow For Academic Researchers

πŸ—οΈ Structure in Pixels

With a deep understanding of user personas and established user flows, we designed wireframes that strategically positioned key elements of the Covid App Tracker. These wireframes served as a reference point for ensuring a coherent and user-friendly interface, connecting the dots between design vision and functional implementation.

Homepage Wireframes

Application Details Page Wireframes

πŸ•ΉοΈ Simulating Experiences

These prototypes became testing grounds for iterative usability evaluations and garnered valuable user feedback. This iterative approach was pivotal, allowing us to fine-tune the app’s interaction design and overall usability based on real user interactions, thereby refining the final product to cater precisely to the needs of academic researchers and journalists.


πŸš€ Launch

The initial launch of the Covid App Tracker marked a significant achievement: it included a fully functional database and a dashboard displaying all scraped applications. The application details screen provided crucial information, such as the number of downloads, last update on the Google Play store, country of origin, developer information and privacy policy, app permissions, and app description.


πŸ“ƒ Search Functionality

Users found it difficult to find where applications were originating from as the database would display all the applications that were scraped from the Google Play Store. A simple fix to this issue was to add the ability to search the database by country of origin, allowing users to filter and view applications from specific countries. Since the database only contained about 150 or so applications, the parameters for a search were limited to specific countries ordered by the number of downloads each application received (from most to least). We found that if users were looking for a specific application (and they knew the name of it) they would go straight to the Google Play Store, but if they needed to search more broadly, our database was able to help them quickly find a list of applications they could look in to.

🌎 Global Apps Heatmap

Even though we displayed all the applications and gave users a way to filter by country, feedback around not being able to understand the distribution of the tracking apps globally was given to us by users. To supply users with an at-a-glance understanding, we added a heatmap that would darken or lighten based on the number of applications originating from a country. To enhance understanding of the map colors, we added a hover interaction that would display the name of the country and the total number of COVID-19 tracking applications that made it to our database. This allowed users to quickly understand global hotspots and isolate their searches based on the country they were interested in.

⚠️ Dangerous Permissions

Despite adding links to the Google Play store to the specific applications details page, user awareness and comprehension of “dangerous” permissions remained suboptimal amongst the list of permissions gather by our database. To better differentiate these permissions, we added a new field on the back end that indicated if the permission was deemed “dangerous” by the Google Play store’s definition and updated the styling on the front end to highlight if a particular permission was dangerous. In addition to the style treatment, we wanted to provide transparency into what a quote “dangerous” permission was by adding a link to the Google Play store’s webpage that outlined what they considered to be dangerous permissions.


🧭 Navigating User Insights

By adopting a user-centric approach, we successfully addressed the pressing needs of academic researchers, journalists, and concerned citizens seeking reliable COVID-19 application information. Remote usability testing allowed us to gather valuable feedback from users across various locations, leading to iterative improvements in the web app. A phased approach to releases and updates ensured a seamless user experience and responsiveness to evolving user needs.

As a product designer and front-end developer, I am proud of the Covid App Tracker’s impact, which is a testament to the value of understanding user perspectives and iteratively refining the product to meet their needs. Our design decisions were driven by empathy and user insights, leading to a powerful tool for responsibly tracking COVID-19 applications and their permissions. The success of this project reaffirms the importance of a user-centric mindset in creating meaningful and impactful solutions.