myaccount_Unthenticated.png
5cb0633d80f2cf201a4c3253.png
RefreshedFailed.png
5cb0633d80f2cf201a4c3253.png
Unauthenticated.png
5cb0633d80f2cf201a4c3253.png

VaxiCode is the official application from the government du Québec to allow citizens to securely record their proof of vaccination. 

Timeline

8 months

My role

Lead UX&UI Designer

Deliverables

Shipped MVP

IA

User Flow

Wireframes

Prototyping 

Annotated Mockups 

Design Documentation 

APP link

The challenge

CURRENT SITUATION

Reimagine the future of Vaxicode

 In order to plan ahead for the post-pandemic life, we're imagining a unique web platform called Health Portal that would centralise medical appointment booking, a user's medical information history.

Meanwhile, In Quebec, the vaccination passport is no longer required to access a place or to do an activity. So we are imagining the future of Vaxicode and decided to integrate the Health Portal into Vaxicode( the mobile version of Health Portal).

GOAL

The MVP of Vaxicode aims at:

  1. Allow users to use vaccination proofs as their identities to create Health Portal accounts.

  2. Add Covid Rapid-test self-declaration feature

Define Success

DESIGN PRINCIPLE 1

PRODUCT REQUIREMENT

Match user existing habits in Vaxicode

The user has already used this app for a year. We need to take their existing behaviour and mental models into consideration before making any changes to avoid any extra learning effort.

Avoid changing current interactions, user flow and UI patterns

DESIGN PRINCIPLE 2

PRODUCT REQUIREMENT

Match between Health Portal and Vaxicode

We will make sure the mobile version and web version match with each other to avoid any confusion. 

Use as much same IA, user flow, UI patterns with Health Portal as possible

Restructure IA
(Keep design principles in mind always!)

1. Navigation System

PROBLEM CONTEXT

Unauthenticated State:

  • The current version has two tabs on the bottom main navigation: < My proofs > and < Settings>

  • Now the user can create an account. Once they got an account, there will be one more feature in the authenticated state- rapid test declaration 

GOAL

  • We need to reorganize the IA and hierarchy for both unauthenticated state and authenticated state

  • Because we only have maximum 5 tabs on the bottom navigation and we will have more and more features - we need to be careful and intentional to add any new tabs 

CRITERIA

  • What is important enough that should be put on main navigation?

  • What are users looking for?

navigation system_oldVersion.png

Current Version: Unauthenticated State

SOLUTION

navigation system_oldVersion.png

1

1

myaccount_Unthenticated.png

1

2

authentcated_MyAccount.png

1

2

Current Version: Unauthenticated State

New Version: Unauthenticated State

New Version: Authenticated State

DECISION 1

Move <Settings> from main navigation to subcategory under < My account >

  • <My Account> is the place people usually want to click if they are looking for <Settings>

  • <Settings> is not that important for this app and also for the user

DECISION 2

Add <Autodeclaration> to the bottom navigation

  • It's the most important feature for our MVP and the reason why we encourage users to create an account

  • It also matches the global navigation of the web version

  • So I pushed back a stakeholder's feedback to put it on the subcategory 

2. Organization System

PROBLEM CONTEXT

Unauthenticated State:

  • The user can save their own proofs and also other people's proofs under < proofs > tab.

  • Now the user can create an account and once they got an account, their own proofs will link to their account. 

  • Now they can also add other people's proofs as associated profiles - Imagine a father is an account holder and he has to manage his two children’s proofs under his account)

DESIGN CHALLENGE

HMW find a way to reorganize their own proofs and other people's proofs for the authenticated state to better help them understand what's happening here?

Unauthenticated.png

Authenticated State:

SOLUTION 1

solution1.png
solution11.png

2

2

2

2

SOLUTION 2 (Chosen Solution)

Authenticated.png
SOlution2.png

1

1

1

1

2

DECISION 1

Labelling 

  • Use < Account proofs> and <local proofs> to categorize them.

  • We also have a text hint to tell the user that these local proofs are only saved on this application and are not linked to their Vaxicode account, and also encourage them to associate the local proofs and manage their information within one account.

  • Use < Account holder> and < Associated Profile> to avoid any confusion.

DECISION 2

Match with existing habits

  • All the proofs are still under < proofs > tab.

  • We didn't change this hierarchy as the user is already familiar with this pattern.

  • It also matches the web version.

Design

DESIGN DECISION:
DIFFERENT PATTERNS FOR WEB AND MOBILE

Web Version: Split View

  • We use the Split View pattern for the web version: two side-by-side panels on the interface.

  • It reduces physical effort, visual cognitive load and the user's memory burden to navigate between windows.

AccountSetting.png

Mobile Version: One-Window Drilldown

  • We cannot use Split View for mobile screens as they have small and constrained spaces.

  • So we have to use a different pattern here: One-Window Drilldown.

  • The hierarchy of this pattern is deeper than the web, which means the user will take extra taps to navigate between screens and cannot flick between them quickly.

authentcated_MyAccount.png
ChooseProfile.png
AccountHolder.png

Design Handoff to dev

SPECS

Designhandoff1.png
handoff3.png
handoff2.png
screen.png

USER FLOW

Update QR Code.png
Rapid test.png
RapidTest_MultiplePeople.png

Reflection 

Invisible UX work? Unmature UX environment? Here's how I make UX happen
There is always a rush and lots of changes when working on government projects. They didn't even have mockups in the first place - they implemented it directly. So I've been working so hard to bring the best practice of UX, get a seat in the client's presentation, proactively present my work, get into the dev team&daily standup meeting, etc to build trust and influence others.

It's a long story... let's chat about it!

Explore other work

design system_cover.png

#DESIGN SYSTEM

Design System for Health Portal

Created color theme, typography, reusable components, UI Patterns, and design documentation for our Quebec government projects.

#USER EXPERIENCE 

Coquo

Shipped the design of becoming a member, creating a new user flow and solution.

property_info___3.jpg
5cb0633d80f2cf201a4c3253.png
search_result.jpg
5cb0633d80f2cf201a4c3253.png

#MOTION DESIGN

Propamap

Shipped a contract project to help renters easily find the best places to rent and help landlords post ads effortlessly.