QR-mID
Share your immunity status
Personal Project, Design Process, Interaction Design, Graphic Design, User Research
About the Project
QR-mID wants to help people share their COVID-19 vaccination status or latest RT-PCR test results, for quick checks and other verification processes that can be requested in the transport, hospitality or entertainment industries.

QR-mID is a fictive use case I've explored during Google's UX Design Professional Certificate courses.
The theme of the course was focused on driving social good. The topic of the project was self-imposed.


Problem
In 2021, full vaccination status or recent negative test results are needed for admission at events or other crowded places, like institutions, transport vehicles, restaurants, concerts, etc. People usually lose, misplace the medical proof or carry an expired version.

Goal
Design a dedicated mobile app (& a complementary responsive website) where users can manage, share and allow verification of their vaccination status and related test results.

My ROLE
In order to prepare the deliverables for the course, I've acted as an Interaction Designer, Graphic Designer, and User Researcher and showcased a typical design process.

Timeline
Jun - Jul 2021
Define Phase
CONTEXT & SCENARIOS
One of the first decisions to make was to select the use cases and problems statements related to COVID vaccination proofs and the context in which the mobile application or the responsive website was going to be used. Depending on the usage, I needed to decide if I'm going to focus on a progressive enhancement or a graceful degradation approach.
Research and interview discussions led to the conclusion that mobile applications were needed more since they allowed rapid verification, mobility, and scanning of documents. Several problem statements resulted during the interviews, focused on mobile app usage of a single person, a related group of people, or the rapid verification of a big group of people.
Research Phase​​​​​​​
PERSONA
Larisa is a music lover who needs a fast way to provide her COVID-19 immunization status because this is a public safety requirement for public events, like concerts„
Design Phase
INSPIRATION
I'm usually using Dribbble to look for inspiration before tackling the sketch part. I have some ideas in my mind about what I would wanted the application to be, so I'm looking for trends and layouts in recent shots. 
Collection example gathering ideas about "QR scanning", "COVID" and "passport checker".
Design Phase
SKETCHES: App
Initial sketches iterating different layouts and thinking about usage flows.
Design Phase
WIREFRAMES v1: App

Initial wireframes
Design Phase
PROTOTYPE WIREFRAMES v1: App
I've iterated and tested multiple versions of wireframes prototypes. The first round of usability testing had clear issues (location, swipe interaction, naming) with the "Docs" / "Scan" mode switcher.
Research Phase
Usability Testing INSIGHTS: App
I've tested my wireframes with 4 users. Here is the Affinity Diagram and a summary resulted from the sessions.
Design Phase
WIREFRAMES v2: App
Wireframes resulted after the first session of feedback.
Test Phase
PROTOTYPE WIREFRAMES v2: App
Besides testing the copywriting and labels clarity, the main change for this version was the "Docs / Verify" switch design.
Design Phase
MOCKUPS v3: App
The mockups version of the app, including colors, icons and copywriting.
Test Phase
PROTOTYPE MOCKUPS v3: App
I've done a very quick feedback session on the mockups prototype. Some of the highlights of the feedback are that I would still need to iterate on the mode switch layout, there are some issues with missing functionality flows (how are the information about the user added, how to confirm the adding of a proof, how to manage the proofs and history), but also there are some usability issues remaining (scroll areas, confirmation button position, color and labels consistency usage).
Design Phase
ITERATIONS: App
Iterations process for the interface from wireframes to mockups.
Design Phase
WIREFRAMES & MOCKUPS: Responsive Website
I've opted to create a presentational website for the application, showcasing the features, usages and ways of getting the application.
Test Phase
PROTOTYPE MOCKUPS: Responsive Website - Desktop
The website prototypes are provided to have a feel of how the page scrolls for the desktop and mobile displays.
Test Phase
PROTOTYPE MOCKUPS: Responsive Website - Mobile
Design System
COLORS & TYPOGRAPHY

Deliver
SLIDE DECK
Takeaways
NEXT STEPS
Further iterations would be necessary for the account creation or proofs management feature flows. Also security and trust are topics that would need to be addressed.
ACCESSIBILITY
I've used colors that pass the Contrast Check, ensuring there is enough contract ratio to meet the WCAG guidelines. I've also replaced the swipe interaction for the modes switcher to a click interaction. The icons used have medical references that are recognizable across the globe.
Accessibility is treated scarcely for this project and it should be an important topic since its target can be generic and global. Further usability tests and iterations should be done considering more use cases and personas.

KEY LEARNINGS
I really value the feedback received each time I show the prototypes to a person. Designer bias is very prominent in each one of us. No matter how much time we invest in something, we always miss an angle, an use case, a bug. Showing your work, getting feedback and iterating is the only way of producing value for the end-user. 
Thank you
Let's work together!


TWITTER • INSTAGRAM • LINKEDIN • WEBSITE
Moraru Ecaterina @evalica
QR-mID App | 2021
5
45
0
Published:

QR-mID App | 2021

5
45
0
Published: