top of page
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:
-
Allow users to use vaccination proofs as their identities to create Health Portal accounts.
-
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?
Current Version: Unauthenticated State
SOLUTION
1
1
1
2
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?
Authenticated State:
SOLUTION 1
2
2
2
2
SOLUTION 2 (Chosen Solution)
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.
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.
Design Handoff to dev
SPECS
USER FLOW
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
bottom of page