Mobile App Design
Pandemic Support App
Target: Visitors and Tourists.
Sector: Travel, Entertainment, and Social.
My Role: Research, entire product design, UI Style, and prototyping.
Location: Vancouver, Canada.
Tools: Figma, Adobe Photoshop, Illustrator and After Effects.
​
Problem:
Since the COVID-19 pandemic started, the situation has become unpredictable with lockdowns, restrictions, capacity limitations, closures, and the opening of new businesses every now and then. In most cases, this data is hard to verify online because some platforms such as Google Maps cannot keep up with the rapid changes. Hence, tourists who are not familiar with the city are misled by online platforms making their experience unpleasant.
Solution:
VanOpen is a concept app developed by myself during my online training at The California Institute of Arts. This app is specifically designed to support Vancouver’s tourism industry during and after the COVID-19 pandemic. The application will guide and assist tourists during their visit to Vancouver by providing them with up-to-date information that is going to be aligned with local recommendations and restrictions.
​
Goals:
-
Help the City of Vancouver to recover from the COVID-19 pandemic
-
Guide tourists based on Provincial and Federal restrictions
-
Increase traffic to local or small businesses.
Research:
Since Canada started major lockdowns, I realized how frustrating it is to find updated information about local businesses, public parks, and local health mandates. Specifically, hours of operation, business capacity, infrastructure modifications, closure of facilities, etc.
Therefore, I have conducted exhaustive online research and interviewed a few neighbours, and visitors who live and stay in Vancouver and I found out everyone’s experience is very similar, we all have the same question:
“ What is open? ”
Tourists want to enjoy their time while in the city but the data in Google Maps or Apple Maps is inaccurate or slowly updated. Google search engine is also a compilation of both updated and outdated information, so looking for something simple as mask requirements can be tricky.
Key insights from the research:
INSIGHT No. 1
​
Visitors can’t find accurate information they need to go to outdoor or indoor places.
Local or International tourists face difficulty finding information about places they want to visit because that data is unavailable or inaccurate due to the unpredictability of the pandemic.
​
INSIGHT No. 2
​
Visitors don’t have the time to do the research.
Most visitors have limited time and are also usually exhausted from traveling and going through the covid-19 protocols. The best way to find up-to-date information is to research on the official provincial website, but it is time-consuming, and the language of those sites is very technical.
​
INSIGHT No. 3
​
Locals are also confused.
The provisional government acts fast whenever there is an outbreak or rise in COVID-19 cases. Restrictions can be in place from one week to another. Making it even harder for some locals to actually give advice to any visitor.
INSIGHT No. 4
​
No ultimate platform to check out information.
​
Almost everyone I interviewed said the best way to obtain official information was from the Google search engine and Google Maps; however, everyone agreed that the data is not regularly updated by both Google and local businesses.
​
Criteria filter:
Target audience:
Local tourists: Canadians or permanent residents from other provinces who are still uncomfortable about traveling abroad. They might have visited Vancouver before, but they want to experience new adventures and enjoy the natural wonders of British Columbia.
Foreign tourists: People from a variety of countries. They usually speak other languages, and English might not be their first language. Most of them come for less than two weeks. However, they are not too concerned about COVID-19 but want to follow the protocols.
​
​
​
PERSONA No 1
​
Foreign tourist:
Maria Hernandez is visiting Vancouver from Costa Rica, her mother language is Spanish but she is able to speak basic English. She is 30 years old and is visiting with her boyfriend for one week.
Objectives:
-
Visit the most popular landmarks in vancouver.
-
Go to a museum and learn about Canadian folklore and culture.
-
Visit scenic places.
Frustrations:
-
Language is a barrier and it is taking a lot of time to research and make reservations.
-
She is not aware of all health mandates in indoor places.
-
She realizes that business hours in Google maps are not updated and capacity is limited in some national parks.
PERSONA No 2
​
Domestic tourist
Thomas Langlois is a domestic tourist who is visiting from Montreal, he decided to travel inside of Canada to avoid travel difficulties. He is 25 years old and English is his second language.
Objectives:
-
Go for outdoor adventures and get the most of his vacation.
-
Quickly have a taste of the local cuisine and culture.
Frustrations:
-
Some outdoor activities have capacity limitations due to covid-19 restrictions.
-
He doesn't know if he needs a provincial vaccine card to visit restaurants
-
He doesn't know if certain events have been cancelled.
Current user Journey:
Taking the personas as a reference, I analyzed how they think and behave when planning for a visit to Vancouver. Below is a user journey focused on domestic visitors.
User flow:
Inspired by the two personas, I learned how they behave and react whenever they are looking for a location to visit.
In the following chart, I focused on the process of travelers who are looking for the most popular places in Vancouver.
Wireframes:​
For visualization the wireframes are separated in three segments. Firstly, we have the splash screen which introduces the user to the app. Then, in order to save preferences an account will be needed. It can be done by using Google, Apple or Facebook otherwise the data can be manually added. After that it is essential to obtain basic information regarding the user's vulnerability. (A consent form might also be needed). Which will be done by asking a few key questions. For the suggestion algorithm, we will be also asking the users about their interests.
Secondly, the app ​will​ let the user know about the current COVID-19 restrictions, ​then ​guide them, and recommend places to visit depending on their intentions​, They can do that by tapping on the icons. With all this information the user is going to make a decision and commit to visit a place. Once the place is reached, a notification will pop up and notify the user that ​they have earned credits just by having reached this location.
A​nd finally, the user can go and check the coupons available, These coupons will be shown as cards that keep being swiped so the user can visualize them one by one and redeem them if they wish to. This is an incentive that has been integrated into the app in a fun manner with the purpose of boosting local businesses.
Ui style guide
Design concepts are built to create an engaging and unique user experience through the application.
Color palette:
A well-thought-out color palette that creates analogous harmony keeps into consideration the ADA compliance tones for color blind people and keeps great contrast for readability through every component of the app.
PRIMARY COLOURS
SECONDARY COLOURS
HIGHLIGHTS
Font style:
Proxima Nova family font has been selected for the project due to its readability, legibility, and accessibility. The app is meant for visitors whose priority is to get information as fast as possible. This family font makes it easier for the user to navigate the app with the right hierarchy.
​
Iconography:
The icons are designed to be easily recognizable and aesthetically appealing. They are structurally designed in the same grid with the same stroke line and proportions in order to keep consistency across the app The main function of having icons in the VanOpen app is to make the navigation faster and aid users in obtaining the correct information in a single tap
Spacing:
White space has been taken into consideration horizontally and vertically between components and the overall layout. All spaces are set to increment by 8 across the app so visual unity is kept. The spacing is also flexible and responsive due to not all components work in the same way.
Buttons and UI components:
Branded colors have been used for the design of the buttons, so consistency can be kept across the app. Additionally, each component respects spacing and basic structure layout which have been analyzed and tested for functionality and future modifications of the system.
Key features
After having defined UI guidelines you can now find below the key features of VanOpen and the final Figma prototype.
Smart COVID-19 screen
​
The most important data needed to filter information for users is how vulnerable they are to COVID-19. This is defined by age range, size of the group, and any medical condition that can put the life of one member at risk. This criterion was defined by using facts from the research made by the government of the UK, see information here
​
The smart filter is intuitive and the user is able to swipe to the right in order to see more options. It's a very quick process that retrieves key information in an interactive and fun manner.
Intuitive questionary
​
Another critical value for the app's proper function is the user's interests or intentions. This information will suggest where to go depending on the restrictions and the health vulnerability of the user and whoever is travelling with them.
Smart recommendations
​
After users add their preferences and COVID-19 vulnerability data, the app will suggest and provide helpful information, such as operation time, capacity, and whether or not masks are required. With this, the user can make a better decision without wasting time.
Rewards & business boost
What makes VanOpen different from Google Maps is its reward program. The goal is to generate traffic to participant businesses and specific neighborhoods.
The program is simple; users can collect credits by visiting places and exchange those credits for discounts, coupons, or more. These incentives are meant to boost Vancouver's economy, which has been hit by COVID-19 and every time, there is a new variant.
GPS points collection
Users can collect credits by visiting places such as parks, landmarks, etc. This is going to be possible with GPS. However, there are concerns about people cheating the system and faking locations. This is not a problem because the purpose is to increase traffic regardless of how discounts are obtained. This feature is going to make the experience of visiting the city more rewarding and certainly more fun.
