Problem pandemic
When the lock down began, my team just finished wrapping up a previous project and were alerted on a problem impacting Ontarians that needed to be immediately addressed. People couldn’t find what they were looking for when it came to the provincial government direction regarding COVID-19. As a government entity, the public look to us to provide authoritative information on new regulations and support programs available.
As a way to discover what people were actually asking the Government of Ontario, I looked at our social media channels to see what questions people had during these pandemic times.
After viewing our current COVID-19 website, it became clear to me why people still had the questions they did.
What we were doing wrong:
❌ Too long and too text heavy, making it hard for the users to scan for relevant information
❌ Loaded with technical terms and government jargon. The data especially was presented in its scientific format that’s not accessible to the layperson
What we needed to do:
✓ Create a page that’s easy to scan and read, separated by topics the public cares about
✓ Show the data in a digestible way, something people can interpret at a glance
With these points, our team put together a problem statement that would guide us through our redesign challenge. Our key performance indicators would rely on the increase in page visit, page duration and click through rates.
Information overload
Our first task was to break down the current site into its informational backbone. This would allow us to analyze the current structure and propose the new information architecture. We got to work on our miro board:
In addition to the questions from Ontarians on our socials, we looked at what other jurisdictions were doing when it came to presenting COVID-19 information. One thing that became quickly apparent to us was the fact that most jurisdictions had a separate micro-site for their COVID-19 related information. This allowed for a better organization of related material and a strategic way to direct traffic to a dedicated site.
It became apparent that for the long term sustainability of our COVID-19 communication and related digital services, Ontario should also have its own micro-site. With our product manager we devised a roadmap, contingent on approval from our stakeholder ministries, on how we can iterate the site design to meet our short and long term goals.
Rapidly changing prototypes
Our group took 5 minutes to quickly sketch redesigns of the initial information site and then dot voted on features we appreciated and would fit our user needs.
One feature I proposed was how to group our information. Since our target user group of Ontarians is vastly diverse, I wanted high level categories that would address our audiences and their general roles. I recognized that this was a divisive design choice and would ideally opt for more action based categorization, however it helped us organize the information quickly and was flagged as a feature to test and iterate.
From our sketches we moved over to figma to hone out our design. As soon as we finished creating our initial information site, we started to lay down the foundation of the COVID-19 micro-site design so we could pitch a tangible product and get the green light on our strategy. This method was successful in getting senior executive buy-in, they appreciated what they were seeing and we continued our work on developing the micro-site further.
Visualizing the virus
Trying to design effective data visualizations had me recalling and referencing material I learned during my data science courses. This helped me persuade our team for the use of bar and line charts compared to other graphs because of the mostly chronological dataset we were working with. I also proposed the idea of displaying COVID-19 cases by location through a map of the province as a way for users to quickly locate and understand the impact in their area.
We created a data mood board based on our competitive analysis. We sketched and dot voted our own ideas.
The visualizations again went through rounds of user testing and we produced different versions both prototyped in figma and coded using the ApexCharts.js open source library.
The main lessons from our users were:
📍 Communicate one message at a time. This helps with the mental load of understanding new information.
📍 Accessibility first. Don't rely solely on colours to communicate your data, use short descriptions that narrate the message.
Presenting the unprecedented
During this time it was imperative for us to keep our extended team informed on our user findings. We held weekly Show and Tells highlighting user insights for our production team, making sure that our users’ needs were acknowledged even after hand off.
Slides communicating design recommendations to our extended team
This project went through an incredible amount of iterations in a small time span, a testament to our labs ability to truly prototype rapidly.
It was also incredible to receive kudos from the teams we looked up to for inspiration.
.png)
.png)
.png)
.png)
.png)
.png)
-min.jpg)
.png)
.png)
