Project
01
Project
01
Project
01
Sharing out statistics during COVID-19 pandemic.
Sharing out statistics during COVID-19 pandemic.
Sharing out statistics during COVID-19 pandemic.
Our product is a web-based map dashboard that will show the statistics of COVID-19 infections, vaccination, and death rates at a county level in the United States. Our software should show a map that will allow the user to choose a particular county that will show COVID-19 relevant data based on their choice of date and data type. Additionally, the dashboard will also show various other statistical data graphs.
Our product is a web-based map dashboard that will show the statistics of COVID-19 infections, vaccination, and death rates at a county level in the United States. Our software should show a map that will allow the user to choose a particular county that will show COVID-19 relevant data based on their choice of date and data type. Additionally, the dashboard will also show various other statistical data graphs.
Our product is a web-based map dashboard that will show the statistics of COVID-19 infections, vaccination, and death rates at a county level in the United States. Our software should show a map that will allow the user to choose a particular county that will show COVID-19 relevant data based on their choice of date and data type. Additionally, the dashboard will also show various other statistical data graphs.
Info
02
Info
02
Info
02
Role
Role
Role
Web Developer, Web Designer, & Project Manager
Web Developer, Web Designer, & Project Manager
Web Developer, Web Designer, & Project Manager
Project duration
Project duration
Project duration
3 months (2021)
3 months (2021)
3 months (2021)
Tools
Tools
Tools
draw.io (diagrams), Visual Studio Code, HTML/CSS/JS, Bootstrap
draw.io (diagrams), Visual Studio Code, HTML/CSS/JS, Bootstrap
draw.io (diagrams), Visual Studio Code, HTML/CSS/JS, Bootstrap
Skills
Skills
Skills
Project Management, Front-end development, Web design, Documentation, UI/UX
Project Management, Front-end development, Web design, Documentation, UI/UX
Project Management, Front-end development, Web design, Documentation, UI/UX
Problem
Many medical dashboards in 2020 were too complex to understand, inefficient, and/or unreliable due to not being up-to-date with the country's pandemic state.
Educational resources and responsive design are essential for enhancing usability and supporting informed decision-making by healthcare professionals and the public alike.
Many medical dashboards in 2020 were too complex to understand, inefficient, and/or unreliable due to not being up-to-date with the country's pandemic state.
Educational resources and responsive design are essential for enhancing usability and supporting informed decision-making by healthcare professionals and the public alike.
Goal
Provide up-to-date data metrics related to COVID-19 with user-friendly accessibility to accurately analyze the country's health status.
Provide up-to-date data metrics related to COVID-19 with user-friendly accessibility to accurately analyze the country's health status.
Provide up-to-date data metrics related to COVID-19 with user-friendly accessibility to accurately analyze the country's health status.
Research
03
Defining requirements and objectives
For 2 weeks, my team and I began to formulate a rough framework for the project. We wrote down a list of rough requirements that we wanted to include in our web application: (some were slightly changed in the later development, but we kept most of these ideas in mind)
Research
03
Defining requirements and objectives
For 2 weeks, my team and I began to formulate a rough framework for the project. We wrote down a list of rough requirements that we wanted to include in our web application: (some were slightly changed in the later development, but we kept most of these ideas in mind)
Research
03
Defining requirements and objectives
For 2 weeks, my team and I began to formulate a rough framework for the project. We wrote down a list of rough requirements that we wanted to include in our web application: (some were slightly changed in the later development, but we kept most of these ideas in mind)
Defining users and key touchpoints
04
To ensure that we meet user needs, we first identified the users and the key touchpoints they will use for this dashboard.
While we identified several users, we prioritized a regular user who wanted to view the statistics about COVID-19.
To ensure that we meet user needs, we first identified the users and the key touchpoints they will use for this dashboard.
While we identified several users, we prioritized a regular user who wanted to view the statistics about COVID-19.
User flow
05
User flow
05
User flow
05
Wireframe
06
Wireframe
06
Wireframe
06
Back-end architecture
07
As a team, we all contributed to deciding what we needed to use from the datasets we found online. We then refined the diagram and the attribute/entities and their relations.
As a team, we all contributed to deciding what we needed to use from the datasets we found online. We then refined the diagram and the attribute/entities and their relations.
Main credits to Pierce Jackson & Johnathan Brown
Research #2
08
Defining the data sources and tech stack
A webpage interface, python flask server back end, utilizing a SQLite database. The server must be hosted somewhere, either on the administrator’s computer or a server hosting service. All the specific details about the installation are written down in our README.md file within our project folder.
Research #2
08
Defining the data sources and tech stack
A webpage interface, python flask server back end, utilizing a SQLite database. The server must be hosted somewhere, either on the administrator’s computer or a server hosting service. All the specific details about the installation are written down in our README.md file within our project folder.
Research #2
08
Defining the data sources and tech stack
A webpage interface, python flask server back end, utilizing a SQLite database. The server must be hosted somewhere, either on the administrator’s computer or a server hosting service. All the specific details about the installation are written down in our README.md file within our project folder.
On the left/on top is the general architect of our web application which shows the tools/languages/extensions we used for our web development project:
On the left/on top is the general architect of our web application which shows the tools/languages/extensions we used for our web development project:
Data sources
Data sources
CDC API of COVID-19 Vaccinations in the United States, County
API that contains the vaccination data of all counties.
New York Times Coronavirus (Covid-19) Data in the United States on GitHub
GitHub repo containing bot information as well as .csv files by state, by county for use as a dataset; Live data versions are updated several times each day.
State geoJSON
Code that adds custom overlays for states using D3 to render the GeoJSON shapes in conjunction with Leaflet.
Counties geoJSON and population (source 2)
A dataset containing the GeoJSON shapes for US counties, as well as population data. This dataset is very large, our application uses a reduced precision version of the geoJSON, created using Mapshaper.
CDC API of COVID-19 Vaccinations in the United States, County
API that contains the vaccination data of all counties.
New York Times Coronavirus (Covid-19) Data in the United States on GitHub
GitHub repo containing bot information as well as .csv files by state, by county for use as a dataset; Live data versions are updated several times each day.
State geoJSON
Code that adds custom overlays for states using D3 to render the GeoJSON shapes in conjunction with Leaflet.
Counties geoJSON and population (source 2)
A dataset containing the GeoJSON shapes for US counties, as well as population data. This dataset is very large, our application uses a reduced precision version of the geoJSON, created using Mapshaper.
Development
09
Defining the data sources and tech stack
For 1-2 months, we went through various sprints of developing, refining, and testing the web application. For the 2nd and 3rd sprints, I was in charge of keeping track of the team's tasks, project organization & management, documentation, and front-end development.
Development
09
Defining the data sources and tech stack
For 1-2 months, we went through various sprints of developing, refining, and testing the web application. For the 2nd and 3rd sprints, I was in charge of keeping track of the team's tasks, project organization & management, documentation, and front-end development.
Development
09
Defining the data sources and tech stack
For 1-2 months, we went through various sprints of developing, refining, and testing the web application. For the 2nd and 3rd sprints, I was in charge of keeping track of the team's tasks, project organization & management, documentation, and front-end development.
Summary
Summary
The front end was developed utilizing HTML/CSS, Bootstrap, and JavaScript with the addition of Leaflet. We also added in a Google Datacharts API to support the main data visualization. While not initially intended to, we also implemented color-blind-friendly colors to improve accessibility with our app. We also ensured that the text and colors were all readable and responsive in all screen sizes.
The front end was developed utilizing HTML/CSS, Bootstrap, and JavaScript with the addition of Leaflet. We also added in a Google Datacharts API to support the main data visualization. While not initially intended to, we also implemented color-blind-friendly colors to improve accessibility with our app. We also ensured that the text and colors were all readable and responsive in all screen sizes.
Development Challenges
Development Challenges
Click on the state, which will zoom in and show the counties within the state. Right-click to zoom out.
Hover over the counties to view the statistical data.
Change ata type (Vac. , infection, and death rates)
Search state or county in the search bar by name.
Change the date range of the data
Open the sidebar, and view the text information and data graphs' data based on the state selected.
Development
10
Conducting user testing throughout design iterations
Throughout the project, my team conducted rounds of testing (black and white box testing) to ensure that the web app's functionalities were accurate and operative. Each team member was tasked to test out a specific web app functionality. I was assigned to test out the search bar functionality. I also checked the general UI visuals layout of the site as I was the one who developed it.
Development
10
Conducting user testing throughout design iterations
Throughout the project, my team conducted rounds of testing (black and white box testing) to ensure that the web app's functionalities were accurate and operative. Each team member was tasked to test out a specific web app functionality. I was assigned to test out the search bar functionality. I also checked the general UI visuals layout of the site as I was the one who developed it.
Development
10
Conducting user testing throughout design iterations
Throughout the project, my team conducted rounds of testing (black and white box testing) to ensure that the web app's functionalities were accurate and operative. Each team member was tasked to test out a specific web app functionality. I was assigned to test out the search bar functionality. I also checked the general UI visuals layout of the site as I was the one who developed it.
Search bar functionality
Search bar functionality
Connected to map dashboard (when we search a county/state, the map will correspond with it)
The search bar lists all the U.S. counties, even if they're not within a state or are too small to be considered a county, which is also known as a rural one.
There are no duplicates.
All the counties/states are listed.
The dashboard map doesn't correspond to invalid input data.
Connected to map dashboard (when we search a county/state, the map will correspond with it)
The search bar lists all the U.S. counties, even if they're not within a state or are too small to be considered a county, which is also known as a rural one.
There are no duplicates.
All the counties/states are listed.
The dashboard map doesn't correspond to invalid input data.
Other UI/responsiveness with layout
Other UI/responsiveness with layout
Check if the dashboard can be viewed in all sizes.
Check if font/text correspond with screen size.
Sidebar properly displays the google charts that also corresponds with the county/state choice.
Check if the dashboard can be viewed in all sizes.
Check if font/text correspond with screen size.
Sidebar properly displays the google charts that also corresponds with the county/state choice.
Results
11
Due to our time constraints, we didn't have enough resources or time to properly refine all of the bugs. For example, we encountered an issue with displaying the correct data when changing the date range; it would behave unexpectedly in terms of database requests. However, for the most part, the functionality is able to display data properly unless the date range feature is intentionally tested to its limits.
Additionally, we had to consider that our data could sometimes be unreliable. Specifically, we had to keep in mind that not all COVID-19 data were properly recorded. Since we sourced all COVID-19-related data from APIs and online sources, we had no control over what was displayed to the user if values were missing from the source. If we had obtained more reliable data from official sources, we would have been able to address the data inconsistencies visible on the front end more effectively.
Despite our limited expertise in certain aspects of web development, we all managed to create something that is functional and reasonably efficient for the user. With more time, we would undoubtedly have been able to refine all of our bugs and create a fully functional map dashboard.
Due to our time constraints, we didn't have enough resources or time to properly refine all of the bugs. For example, we encountered an issue with displaying the correct data when changing the date range; it would behave unexpectedly in terms of database requests. However, for the most part, the functionality is able to display data properly unless the date range feature is intentionally tested to its limits.
Additionally, we had to consider that our data could sometimes be unreliable. Specifically, we had to keep in mind that not all COVID-19 data were properly recorded. Since we sourced all COVID-19-related data from APIs and online sources, we had no control over what was displayed to the user if values were missing from the source. If we had obtained more reliable data from official sources, we would have been able to address the data inconsistencies visible on the front end more effectively.
Despite our limited expertise in certain aspects of web development, we all managed to create something that is functional and reasonably efficient for the user. With more time, we would undoubtedly have been able to refine all of our bugs and create a fully functional map dashboard.
Reflection
12
Reflecting on what I made and what I should do next.
Due to time, I was not able to gather proper user data to fully optimize the design to enhance user interactions. So if I had the opportunity to make improvements to the landing pages and templates, I would conduct a proper redesign utilizing the KPI and direct user data (interviews, surveys, etc)
Reflection
12
Reflecting on what I made and what I should do next.
Due to time, I was not able to gather proper user data to fully optimize the design to enhance user interactions. So if I had the opportunity to make improvements to the landing pages and templates, I would conduct a proper redesign utilizing the KPI and direct user data (interviews, surveys, etc)
Reflection
12
Reflecting on what I made and what I should do next.
Due to time, I was not able to gather proper user data to fully optimize the design to enhance user interactions. So if I had the opportunity to make improvements to the landing pages and templates, I would conduct a proper redesign utilizing the KPI and direct user data (interviews, surveys, etc)
Taking ownership and refining UI/UX consistency.
I played a crucial role in designing and developing the front end to be visually consistent and user-friendly. One example is that we intentionally implemented color-blind-friendly colors to make the web app more accessible to all users. The web app also meets most of the WGAC and section 508a compliance requirements in terms of colors and font sizes.
Ensuring proper documentation and deliverables to meet requirements.
One of my roles involved being the project manager to write up the project documentation - which included writing proper instructions on how to run the web app on both Windows and Mac, identifying all the users involved and needs/touchpoints, and the tasks assigned to each team member.
Reflection
13
Next steps…
With more time and resources, I would've liked to refine the Google Graph API features to be more user-friendly and responsive with the web app (text more readable, color alignment, etc). I also would like to extend the API functionality to let the user compare data from different date ranges to better utilize the data.
With more time and resources, I would've liked to refine the Google Graph API features to be more user-friendly and responsive with the web app (text more readable, color alignment, etc). I also would like to extend the API functionality to let the user compare data from different date ranges to better utilize the data.
Next steps…
With more time and resources, I would've liked to refine the Google Graph API features to be more user-friendly and responsive with the web app (text more readable, color alignment, etc). I also would like to extend the API functionality to let the user compare data from different date ranges to better utilize the data.
With more time and resources, I would've liked to refine the Google Graph API features to be more user-friendly and responsive with the web app (text more readable, color alignment, etc). I also would like to extend the API functionality to let the user compare data from different date ranges to better utilize the data.
With more time and resources, I would've liked to refine the Google Graph API features to be more user-friendly and responsive with the web app (text more readable, color alignment, etc). I also would like to extend the API functionality to let the user compare data from different date ranges to better utilize the data.
Improvement & Fixes
Make sure it follows all of 508/18F compliance checklist.
Check missing dates, then adjust the query to fill them in
Expanding the statistic scope (Including other countries)
Refine more of the UI elements
Refining and customizing graphics
Improving coding skills (JS)
Want to collaborate?
My work is vibrant, hand-crafted, and professional in everyday whimsy. I’m currently scheduling clients for illustration, branding, and other design projects! Give me a holler if you think we can make something beautiful together.
Work with me
Work with me
Want to collaborate?
My work is vibrant, hand-crafted, and professional in everyday whimsy. I’m currently scheduling clients for illustration, branding, and other design projects! Give me a holler if you think we can make something beautiful together.
Work with me
Work with me
Want to collaborate?
My work is vibrant, hand-crafted, and professional in everyday whimsy. I’m currently scheduling clients for illustration, branding, and other design projects! Give me a holler if you think we can make something beautiful together.
Work with me
Work with me
©2024 Amy Phan. All Rights Reserved.
©2024 Amy Phan. All Rights Reserved.
©2024 Amy Phan. All Rights Reserved.