Outbreak

Tracking outbreaks at your fingertips

OUTBREAK is an interactive web app for tracking outbreaks at your fingertips. Within the app, users are able to simulate an outbreak based on past, current and future forecasts as well as exploring the history and information of epidemics and vaccines.

ROLE

UI/UX Design, Branding

TOOLS

Sketch, Illustrator, Invision

DURATION

3 months

MENTOR

Marie Gosal (Metalab Design)

Patrick Cotter (copywriting)

Challenge

For my mentorship project, I chose Metalab Design as my mentor because they’ve worked on projects with a diverse body of clients, from startups such as Coinbase and Slack, to larger corporations such as Google and Amazon.

With the recent bombardment of news headlines of disease outbreaks and vaccination hesitancy within the Lower Mainland, I proposed the idea of creating a product that brings awareness of diseases and vaccines.

Research

Initially, the project’s client would be the World Health Organization (WHO). However with further research into vaccination rates per country, I was shocked to find that out of the G7 and OECD developed countries, Canada was ranked last within the G7 members and 26th out of 34 countries.

This was surprising because as Canadians we have a decent universal healthcare system and as such, have a perceived positive bias over the United States. (it was surprising the US ranked slightly higher than Canada in both rankings) At the same time, with the recent news of outbreaks and anti-vaxxers on the rise, it was also a wake-up call.

I shared this research with my mentor and we agreed to shift gears and change the client to Health Canada, with a focus on local vaccine and disease awareness.

My initial research contributed to creating my user persona, Kathy. Since my user persona is a vaccine-hesitant parent, it was both amusing and mind-numbing researching and reading the statements and commentary anti-vaxxers have written online. (one that particularly stood out was someone claiming Bill Gates created the Ebola virus as a side-effect of the malaria vaccine)

Ideation

User persona profile

Ideation & Sketches

The ideation phase was interesting and challenging due to the subject matter as well as figuring out how to distill words into an intuitive/painless design. Initially, I thought the best platform for this project would be a native app. However, as the average user is wary of downloading another app that would take up space on their phone.

After discussing with my mentor, we thought the project would work best as a web app as it would offset the phone’s storage usage by having it native to the web browser, as well as have the ability to have the app be view on various devices.

Initial site map

There were many pages/features I wanted to include within the app, however, my mentor challenged me to narrow down and group similar features within similar families. The finalized sitemap looked a lot neater/organized compare to previous iterations.

Revised site map

Next, I worked on the lo-fi sketches of the app UI and components. Although I’ve worked on both mobile and web-based projects, it was different ideating for both mobile and desktop simultaneously. Later in the workflow timeline, I came up with rough ideas and sketches for the branding.

Lo-fi screen layout sketches

Branding ideation

Distillation

Throughout the project’s duration, I’ve kept in touch with my mentor through weekly zoom conference calls and e-mail check-ins. We’ve also discussed certain aspects of app design such as design patterns, typography best practices as well as accessibility. It made me realize and better appreciate interactive design as more than just transferring principles of design to the digital screen.

At the same time, I felt a bit disoriented when working on this project because I kept going back and forth between designing for a web application and a native mobile app. After talking with my mentor, I think I was able to resolve some of the confusion I had. (Though to be fair, technology evolves quite quickly so what may be the norm today will be obsolete tomorrow)

Referring back to the user persona, the overall experience should have a low learning curve. With this in mind, I kept to familiar usage patterns and UI such as the implementation of google maps’ interface within the outbreak simulator. While it may not be the most innovative interface, keeping it intuitive and consistent is the most important factor for this project.

Wireframe design process

While working on the wireframes, I realized the scope of this project was larger than what I had expected: although wireframing both desktop and mobile versions of the app has been very rewarding, the process was taking a long time. Due to time constraints, I had to make the decision to focus solely on the mobile version.

Around this phase, I narrowed down and naming the web app, Outbreak. I thought it would be fitting to use ‘outbreak’ as it’s considered the early stages of a disease spreading before it escalates to a pandemic and then finally, an epidemic.

Select mobile wireframes

Refinement

Since I spent a large portion of my time refining the wireframes, it made the hifi prototyping phase a lot faster since it was closer to how I envisioned the final product to be.

Prior to the refinement stage, my mentor provided feedback and suggested on taking into consideration of the tone of voice used for the copywriting.

Copywriting is a continuous work-in-progress for me. At the time of this project, I hadn't consider how big of a role the copy would have, leading me to going back to the wireframes and revise the layout and element arrangements. I ended up setting a time with our copywriting instructor, Patrick, and we went through some of my wireframes and worked out the overall tone of voice the app would take on.

Notes during copywriting tutorial

The main takeaway was figuring out what information was important and what to leave out while giving enough context. It was an eye-opening experience and gave this project a different light as initially, I was trying to immerse myself and decipher endless disease names and stuffing as much information as I possibly could within certain screens (especially the quiz and timeline)

Before and After copywriting

With this in mind, it made the hifi prototyping stage a lot more bearable now that I have a clear idea on how copy is balanced and contrasted with the visuals and interface components I have in the app.

Finalization and Prototype

Hifi prototype screens

For the logo design, I wanted to keep it simple but relevant to the vaccine/disease topic.

In the end, I went with the thicker radial ‘O’ with the “+” sign in the middle and using it within the app’s name.

Brand Style Guide

I presented my final prototype to my mentor at Metalab on April 23, 2019. Overall I was happy with how the project turned out and received feedback on further explorations in parts of the app's component such as the map feature.

Final Prototype Mockup

Reflection

While I came to this project with the intention of creating a more focused interactive product, the main takeaways I have are:

Copywriting: To be frank, I did not expect to work on copywriting for this project at all.
As the main goal of this app was to distill and make scientific medical jargon easier to digest for the general public, it was inevitable that copy would play a substantial role. It was an eye-opening experience and made me realize that despite interactive design’s main focus is on the user experience and how they interact with the things they use, copywriting can also make or break the experience
Multi–platform: Although there were past school projects where we start designing for mobile before desktop and vice versa, simultaneously designing for both platforms at the same time was an interesting process. While it was overwhelming at times, it forced me to look at the app and its components with a broader view instead of focusing on pixel pushing each individual screen

I admit that the scope of this project was larger than what I had expected and realistically, a project such as Outbreak would have been assembled by a team rather than a single, individual designer. Despite being unable to fully realize the desktop version of the app, I enjoyed the design process throughout this mentorship and hope to further refine this project in the near future.

Note: As this project was realized prior to COVID-19, I think this would be something I would like to revisit and include components that would be beneficial in a future pandemic outbreak.

← BACK TO INDEX