Overview

Due to Covid 19 rapid spreading, Nova Scotia commissioned IBM to design a mobile Digital Health Pass to monitor people travelling in and out of the province. Any person travelling could just access his related vaccin info from the mobile and present it to the local authorities to get a safe pass and access to the city entertainment and services.

1M

My design reached an estimated audience of 1 Million Nova Scotia citizens and travellers.

My Role

Senior UI/UX Design Lead

Team: IBM Agile Team

Software: Figma

About the project

The request was to design a sleek and responsive website that would translate very well on desktop and mobile platforms. The project was schedule for a full 8 months and a team of talented developers was assembled within IBM to work on the project. I was the only UI/UX designer joining the team and had to use my UI/UX best practices skills to bring the project to completion. The task was tough but having acquired a lot of experience over the years, I managed to work with the team to deliver initial wireframes and working prototypes which was then approved for final version. The mobile app is available for download on Apple Store and Google Play.

Wireframing and Prototyping Process

Research and Iteration Process

Being the lead UI/UX designer, I started compiling data through a lot of research on Digital Passes and Nova Scotia itself, then proceeded to have several meetings with the Dev team to understand the limitations of the software they would use to create the final product. Grasping the skills and limitation of the dev team, finding creative solutions to problems altogether is a good start to build trust with the team and to what direction the design should be taking before any wireframe or prototype is done. I did several iterations using Figma for the wireframes and final high-fidelity prototypes.

Welcome and Login screen

Stylized Logo

The digitalized logo was conceived and design within Figma and the Pre-Loaders were animated using lottie, a great animation tool for Mobile platforms.

Company Branded Preloader

The results of combining Branding with actual digital components enhances the users experience and fidelity with the product and provides for a delightful experience at all stages.

I designed the Digital Pass to look like a Mastercard which would flip open and provide the QR code needed for scanning by local authorities. This provides some kind of trust from the user as they've become accustomed to cards use.

Digital Covid 19 Vaccination Pass, flips open to reveal QR code

Design Highlights

I created a stylised and digital logo that could also be used as a preloader with Nova Scotia branding colors. Used an 8 Grid pixels to align all elements on the layout so that it could easily transcend to web, tablet or mobile seamlessly. I designed and animated another preloader that would spin while the pages were loading and sent all components and visual assets to the development team for integration. I also work very closely with the developers to input a QR code. After several trial and errors the QR code was successfully integrated and provided the user with a way to scan the code and retrieve all his vaccin info very quickly.

Digital Covid 19 Vaccination Pass activation

Vaccination Location, Pass Expiry and Family Pass scan

Responsive layout for Desktop & Tablet

Below is the desktop format of the mobile app. Totally responsive on multiple devices. Translated in 2 languages , English and French.

Final Results

The app was translated for French and English users and provided a simple and sleek interface where users can quickly retrieve their all of their personal information or their complete family information to the local authorities, thus gaining access to the province without any hassle. The province also was delighted to have their workers quickly scan the barcode and immediately retrieve all info pertaining to the travellers, this reduced considerably the bottleneck and line up when they had to manually check for the thousands of people on the move, entering the province.