Web Design and Development, UI/UX, Interactive Design

Progressive Web App

qr code and a link to Progressive Web App page

Skills

  • HTML
  • CSS
  • Javascript
  • Bootstrap
  • SASS
  • JQuery
  • GreenSock
  • Email.js

Description

I created progressive web app or PWA (which is an app created using, HTML, CSS and JavaScript than can run in a browser or any device) that addresses the problem of the reduction of parents vaccinating their children. The desired outcome for this app is to persuade vaccine hesitant parents that vaccines are not just for their children but are needed to protect other children who can’t get vaccinated. Within the app, I used different storytelling techniques and interactive experiences to build to build an empathic argument that vaccines are needed for herd immunity.

Process

Sketches

In the first stage of development, I created drawings to visualize how I wanted app to look and function.

a sketch of the app

Rough Illustrator Mockups

After, I made Illustrator mock-ups based on those drawings. This is where I considered color and took a more in-depth look at the layout of each screen.

Digital mockups of Have you Herd app screens made Illustrator

Final Illustrator Mockups

After some feedback from my colleagues, I made some more Illustrator mockups implementing their critiques. I also included some more screens that to be considered in the final version of the app.

More digital mockups of Have you Herd app screens made in Illustrator after feedback from collogues

Personas

Before I moved on to the next stages of development, I took a step back and made personas of a couple vaccine hesitant parents. I wanted to be sure to focus on the user when continuing through the developmental process.

A picture of a persona with a woman and her child

Adobe XD Mockups

After my persona considerations and additional feedback from my colleagues, I took my illustrations and created high-fidelity mockup in Adobe XD.

An interactive digital mockup of Have you Herd app screens made in Adobe XD

User Report

Once I finalized my design in Adobe XD, I did some user testing with the mockup and create a report with my findings. Click to view the report.

Click to download a word document listing my finding from my user test

Coding the PWA

I took all the data gathered and began coding. Throughout the is process, I made many changes based on feedback I received from my colleagues. The GitHub repository will demonstrate how these changes were made and the evolution of my code.

code for pwa

Project Documentation

click to view documentation