at a glance:

the challenge
the solution
the approach
paper prototyping
wireframing
visual design
reflections

vaccine
passport

app cover photo

duration
january 2019 (6 weeks)

type
class project for mobile app design

deliverables
ideation, UX/UI, visual design, wireframes, prototyping

tools
adobe xd, illustrator, pen & paper

the challenge

the problem

Based on the reoccurence of measles outbreaks on the west coast, I wanted to look for a way to educate the general public on why vaccines are important for the health of individuals as well as communities.

In my conversations with colleagues, I inquired about their immunization records and a majority of them struggled to recall what they've already been vaccinated against. This trend remained true when I surveyed a larger number of people.


the solution

Vaccine passport is a fun, colourful way to learn about current vaccine preventable diseases and track whether or not you've been immunized against them.





Your passport shows your immunization record and any bugs you've bookmarked.

You can also switch between family members to view their records.

Clicking on any bug icon reveals their info card! Learn more about how risky they are and where you might encounter them.

Simply swipe left or right to view different bugs.

Explore bugs recommended for vaccination in your age group, in your area or see them all!

Record vaccinations, bookmark or add notes on each bug's card.

Easily check to see if you're protected against bugs in different countries.

Bookmark the ones you need for your next trip.

the approach

ideation: affinity diagram #1

Prior to creating Vaccine Passport and landing on the problem of anti-vaccination, I began my project by brainstorming from the word “microbiology”. This was the prompt given to me by my instructor. To begin, I broke up my personal associations with the word and grouped them into categories.

affinity diagram starting from the word microbology

Initially, I was drawn to the academia section. After graduating, I grew distant from microbiology because I didn’t feel like lab-based research was a good fit for me as a career. I enjoyed everything I learned as part of my degree and I am still extremely fascinated with how microbes work. There were many times throughout my education that I wished the general public knew more about science aside from the headlining breakthroughs. Consequently, my guiding research statement became:

"How might we bridge communication between academia and the public?"

affinity diagram focusing on academia

In my affinity diagramming exercise, I thought more broadly about this idea and began to wonder what value experts (researchers) could give to the curious commoner. I envisioned myself reading a scientific article and reflected, “What information would I want to have as a layperson?” It would be awesome to have an opportunity to have things explained by the author. But why would the researcher want to do this for me? Perhaps for the greater good, but probably more for things like funding, exposure, and usage in citations.

Then, I started thinking that maybe I could make some kind of extension or plugin that makes plain english summaries available to those who access scientific articles. Readers could then return the favour by supporting researchers directly and donating to their projects.

I wondered, “Is there a kickstarter for science experiments out there?” After some researching, I found experiment.com as a platform for funding experiments. This confirmed the validity of my idea, but I wanted to explore the relationship between the researcher and the ‘curious commoner’ a bit more. In the context of experiment.com, the curious commoner could also be a student or a potential patron/backer. I added these personas to my affinity diagram to see where they fit into the picture.

affinity diagram with added personas

After staring at this map for a while, I realized that I needed to figure out if my idea would actually benefit the people in these parties. So I started a Value Proposition diagram to map out the pains and gains of each potential user.

value proposition design

After doing a value proposition analysis to see the overlaps in pains and gains between a researcher and layperson, I felt like interest for the general public to directly be accessing scientific articles may not be realistic. A layperson would probably just go to a news outlet to get their latest in technology/science.

When I started sketching out what screens might look like, I realized that my idea would be too complex for the time allotted for this project.

Having two users greatly complicated the functions of the app and designing for one user didn't solve my initial research question.



affinity diagram #2

As a result, I went back to my affinity diagram and looked at the other branches. I went through the brainstorming process again to see if I could find another problem to solve.

I reflected on what aspects of microbiology I really enjoyed and realized that there were topics I wished the general public knew about when I was completing my undergrad. As an “expert” of microbiology & sustainability, I wished that the public could be more aware of:

  1. global climate change and the amount of data supporting it
  2. antibiotic resistance, how threatening it is to our healthcare system and, how it affects our healthcare system's ability to provide drugs that are effective and affordable
  3. vaccines and how they affect the health of our communities

I realized that I loved learning about viruses and bacteria and how these little units of DNA and protein have such a large impact on our everyday lives (whether we’re aware of it or not).

As mentioned earlier, based on the reoccurrence of measles outbreaks, I felt most strongly about creating an app around vaccination and focused my brainstorming exercise in this area. I wanted to build something that would be enticing, fun and approachable while offering consumable bits of scientific information. In addition to education, the app would also track vaccinations and remind users to get immunized.



determining features

In order to ensure that I’d thought about all the problems that need to be addressed by the app, I went through the value proposition design cycle again for this idea.


The app features determined from the Value Proposition Design process are as follows:

  1. Explain diseases and how vaccines neutralize them
  2. Understand risks and responsibilities of vaccinating and not vaccinating
  3. Keep track of past immunizations (different # people - family/dependents)
  4. Vaccines needed based on location (outbreaks, travel)



After determining these features, I migrated the ideas generated from affinity diagramming that related to each area under it. This helped me determine the elements I needed for each screen. Afterwards, I translated these sections onto paper screens and put them in front of users for testing.


paper prototypes

user testing

After user testing with 8 people and updating the prototype several times, I solidified the information users are looking for while using the app and found some problems with task flow to correct.









user feedback:

  1. Sort bugs by prevalence/risk/status
  2. List out vaccine side effects, nearby clinics, time needed between receiving vaccinations and travelling to affected areas
  3. Indicate when vaccines expire (colour code)
  4. Section to list vaccines needed based on user's age group
  5. Be able to easily bookmark vaccines needed or bulk bookmark for travel vaccines
  6. Be able to swipe left and right to view the next bug instead of having to close the page and click on another bug

wireframing

increasing fidelity

I decided to take the prototype digital in order to more easily duplicate screens and figure out user flow between screens.

visual design

illustrations

After making quick wireframes, I needed to start on the illustrations of bugs to see how they would be worked into the visual design.

Although there are 26 vaccine preventable diseases and 28+ vaccines in development (WHO, 2018), I was only able to illustrate a selection of 15 bugs in the time allotted for this project.

I have received positive feedback from users regarding the illustrations. They've expressed that the bug icons prevent the app from looking too medical or formal and therefore more approachable.

Referencing scientific papers, I converted scientific illustrations into artistic representations of each virus/bacterium. The colours chosen are highly saturated in order to keep the mood bright.



interface elements

The design of Vaccine Passport interface focuses on the bug icon. Each icon has a coloured corner to give the user an at a glance look at their immunization status for that bug.

The red, yellow, green and blue colours correspond to other areas on the map where a bug's immunization status can be edited or viewed. The default status is red (no record) until an immunization has been recorded. When a vaccination is due for a booster shot, its status will turn yellow (expires soon). If the user is fully protected against a bug, its status will be green (immunized). For vaccines under development, the status colour is dark blue (in development).

I decided to use a coloured corner instead of a coloured circle on the top right corner (as seen in my paper prototypes) because coloured circles are traditionally associated with notifications in apps. However, I decided to keep the same location as notifications since users are familiar with looking for statuses in that area already.


colour

Because of all the colour brought into the app through the bug illustrations, I kept the brand colour palette really simple. The brand colours are black and shades of a deep navy blue. The deep navy blue represents the colour of the Canadian passport and evokes feelings of trust and stability. The shades of red, yellow and green emanate the colours of a traffic light and are commonly understood indication colours. The hues should be similar to what users with red-green colour blindness are used to seeing.


typography

I chose to use Google's Quicksand font for a friendly and modern feel.


logo

The logo depicts a microbe and was created using a radial pattern - similar to how I illustrated many of the bugs.

reflections

During the ideation process, I went all the way to sketching out screens for my first idea before discovering that it wouldn't work out. Being able to go back to my initial brainstorming and explore a different branch of thought was really helpful. However, I should have fully explored all branches before moving forward with an idea to save myself the headache of doing everything over again. I am extremely glad to be where I landed though!

After doing some illustrations of bugs, I realized that I had accidentally drawn Ebola and Hepatitis C since they are currently not vaccine preventable diseases. I initially kept them as placeholder illustrations for the app mock-ups, but this mistake made me think about whether or not pipeline vaccines would be informative to include in the app. For this project, I decided to add a category of 'vaccines in development', but more testing and research would be needed in order to determine which diseases should be included in the app.

thanks for taking the time to read
through my case study! 💖