Raido - Alerts Design for the Traveler
UX Design Portfolio of an iOS map app that visually displays disease outbreaks, terrorist threats, and natural disaster alerts through colored overlay filters. Portfolio created using Sketch, Photoshop, Indesign, Illustrator, and Invision.
2. Introducing Raido, the map app with live filters
showcasing areas with disease outbreaks, terrorist
threats, and natural disaster warnings.
InvisionLink:https://invis.io/DH9KIGDKW
Raido
Alerts Designed for the Traveler
2
3. Raido also features safe arrival messages with GPS coordinates
to send concerned to loved ones.
To demo Raido, check out our invision link:
https://invis.io/DH9KIGDKW
3
Raido
Alerts Designed for the Traveler
4. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Iâm a Creative Professional with
a Passion for Flow Arts, Virtual
Reality and Travel.
About the Creator
4
Hi, Iâm Shuang Chen
5. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Work Experience
5
GE Digital
2015 - 2016
Societe Generale
2014
Deutsche Bank
2012-2014
Deutsche Bank
2011-2012
Five Years Experience working for Fortune 500 companies in New York City, London, and Silicon Valley.
Extensive background in communication design, website development, and social media marketing.
I love creating prototype mocks, conducting user research, and playing around with Sketch.
6. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Raido Inspiration
6
âYouâre going off to Europe? Isnât it dangerous now?!â -
Co-worker at GE Digital
The inspiration for Raido arose from my love of traveling. This past summer, I wanted to go on an European backpacking
trip. I was full of anticipation while my coworkers and friends were overly concerned about me. At the time, France and
Germany just experienced a series of shootings and bombings. My outlook was if I can survive living in Oakland, I
can survive backpacking Europe by myself. Afterall, statistically I would have a higher chance of getting shot in
Oakland than in Europe.
7. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Raido Inspiration
7
In an attempt to help abate concerns of me flying off, I tried to download an app that will have the most recent travel
alerts. The only ones I could find were official government apps that were horrible designed. I couldnât find anything with
detailed information on travel warnings in a visually appealing manner. Thus, I decided to create my own version which
Iâve named Raido.
Statistically I would have a higher chance of getting shot
in Oakland than in Europe
8. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Raido Inspiration
8
The inspiration for the name came from my trip to Iceland
back in 2012. Raido is an Icelandic Bind Rune meaning
âSafe Travelâ. It conveyed the purpose of my travel alert app
really well. Thereâs random times in my portfolio that Iâve
called Raido as Reizen which is the Dutch word for âTravelâ.
Reizen was the name initially but as I dove further into the
branding of my app, I realized Raido is more fitting.
âRaido represents travel, both
in physical terms and those of
lifestyle direction. The rune
predicts a journey, vacation,
relocation, evolution, change of
place or setting. It allows seeing
a larger perspective. Seeing
the right move for you to
make and deciding upon it.â
9. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Competitors
9
Smart Traveler App by the US Government is the only app
from my research similar to my aspirations for the Raido App.
Smart Traveler offers the same
features of travel alerts and warnings
but the information is not visually
appealing. Upon opening the app, it
shows a list of countries. Target
demographic on both apps are
travelers who are mindful about their
safety abroad.
10. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Heuristic Evaluation
10
Appearance/Aesthetics Issues
-None
Content Issues
Easy to scan
Minimal text/information presented
Important content is above the fold
Search box is easy to identify and easy to use
Navigation Issues
Consistent Navigation Easy to identify your
location on the site
Consistent way to return Home
Organization of information makes sense
Efficiency/Functionality Issues
-None
[H4 Feedback] [Severity 3]
There is a search section under countries but not
warnings or alerts.
[H4 Feedback] [Severity 1]
Upon hitting the STEP button, instead of another list
section, it brings up a random pop-up
[H4 Feedback] [Severity 3]
Countries button doesnât always bring it to the
âhomeâ screen
[H4 Feedback] [Severity 3]
No breadcrumbs, lost of site location when going
into countries section
[H7 Feedback] [Severity 3]
User has to scroll for so long to go through
countries and travel warnings to find relevant
information
[H8 Feedback] [Severity 3]
Too much text in each section where itâs
information overload
11. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Competitors
11
On the Australian App Store, there is the Smart Traveller AU
App that has more features than the US Smart Traveler such
as registering your travels, International Scams, and LGBTI
travellers information.
Similar to the US Smart Traveler, it
has countries listed instead of
presented in a map format. Listing
countries does not make it intuitive or
user friendly. This is the main
drawback of both of these apps that I
hope to resolve with the Raido app.
12. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Heuristic Evaluation
12
Appearance/Aesthetics Issues
-None
Content Issues
Easy to scan
Minimal text/information presented
Important content is above the fold
Navigation Issues
Organization of information makes sense
Efficiency/Functionality Issues
-None
[H7 Feedback] [Severity 3]
User has to scroll for so long to go through
countries and travel warnings to find relevant
information
[H8 Feedback] [Severity 1]
List in Travel Tips does not seem to follow a
logistical format
[H8 Feedback] [Severity 3]
Too much text in each section where itâs
information overload
13. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Competitive Analysis
13
Name Products /
Services
Size /
Following
Unique Selling
Proposition
Strengths Weaknesses
SmartTraveler Alerts US travellers
about threats abroad
@TravelGov
+500,000 Twitter
Followers
Official government
from the US State
Dept
Has the official US
warnings and alerts
Not organized well,
hard to navigate, no
visuals
Foreign
Government
Travel Apps
Alerts AU travellers
about threats abroad
AU: 100,000+ likes
on Facebook
Official AU travel app
with legal information
to AU citizens
Offers LGBTI tips,
Power of attorney
info, travel
registration
Information not
presented in an easy
to digest visual
manner
TripAdvisor Gives travel advice 350 million average
monthly unique
visitors
Contains the most
travel advice on 1
site
Already the trust site
to go to for travel
information
Information overload,
hard to find answers
News
Channels
(CNN)
Informs on current
events
~ 5 million viewers Known to be a
respectable source of
information
Most up to date
information
Not easy to search
for quick updates
Facebook Connects friends in a
social network
1.71 billion monthly
active users
Itâs where you catch
up with all your
friends
Gives live update as
to friends in danger
areas
Safety Check only
works after natural
disasters
14. Survey Goals
14
Demographic Profile
Gender
Age
Travel Habits
Frequency of Travel
Pleasure
Business
Number of countries visited
Most Concerned Threat
Disease Outbreak
Natural Disasters
Terrorist Threat
High Crime Areas
Perceived Safety Abroad
Which continents perceived most dangerous
Cancelling a trip due to threat
Emergency while abroad
Sources to check on travel destinations for safety
In order gain insights into the traveler demographic and their needs,
I created a survey to better understand:
15. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Survey Results
15
During the short duration of my survey, I had a total of 27 respondents. The demographic is mostly
split between 12 male and 14 female travelers with 1 respondent as non-cisgender. Due to
mostly reaching out to my facebook friends, the common age is 25 to 34 in the sample.
16. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
16
The majority of my respondents traveled for Pleasure. The average
frequency is A Few Times a Year for Pleasure and Not Often for
Business Travel with some traveling Monthly for work and
pleasure. This is a good sample for both business and pleasure due to
moderate frequency expected of travelers using the app.
Survey Results
17. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
17
In my user sample, majority of my respondents have gone to less than 30 different countries. Four respondents traveled to
over 31 different countries. So thereâs a good diversity in frequency of travelers as well as experience in traveling.
Survey Results
18. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
18
70% of respondents research the safety of a country before traveling.
So there is a need for an informative travel app about safety alerts.
Survey Results
19. 19
Upon placing the responses into a word cloud, the most common
sources for travel research are: Google, government ratings/sites,
news sites, asking friends, and blogs. So far, information seems to
be scattered when it comes to travel safety. No unified
response aside from âGoogling the countryâ.
Survey Results
20. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
20
The most concerned threat is Disease Outbreak and Crime when
traveling. Followed by Terrorism and then Natural Disasters. This
might be due to previous experiences by travellers surveyed as
demonstrated by the next question.
Survey Results
21. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
21
Six Respondents had to cancel a trip due to perceived safety. Four of the
cancellations was due to violence in the form of bombings and civil unrest.
Two of the cancellations was due to Zika. Itâs interesting that it correlates
pretty well with the previous results on levels of perceived threat.
Why was the trip cancelled?
There was a military koo and I was unsure of how it would effect the trip
Honduras, post removal of Peace Corps due to civil unrest
Egypt and Indonesia due to bombings
Not the issues above, but I did cancel a trip to Guatemala over violence expected
during an election.
I was going to go to a bachelorette party in Puerto Rico earlier this year, but the
bride-to-be cancelled bc of Zika and the average age of those attending (looking
to have children in the next few years)
We were going to go to mexico, but I was pregnant and Zika was present, so we
did not buy plane tickets.
Survey Results
22. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
22
Africa is seen as the most dangerous out of all the countries listed
with Australia deem as the safest. Even with the most recent European
bombings, respondents still find Europe safer than North America.
South America is ranked second in terms tourism danger. This question
was to gain a better perspective of what countries respondents perceived
to be safe vs dangerous.
Survey Results
23. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
23
What was the emergency?
Bad flu in Costa Rica (was sick when I left NYC) I was dehydrated and
badly needed an IV
Only one respondent had an emergency abroad, it was disease
related. Majority of travelers usually have a great trip even with the
frequency of the travel with the sample respondents.
Survey Results
24. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
24
Most respondents listed search engines as their source to
get the most recent travel information. Social media came in
second. Due to the young age group of respondents, news outlets
came last. Six respondents elaborated to include TripAdvisor and
other Travel sites such as Airbnb. Reddit as a live forum to gain
insights into recent events was also mentioned.
Where to go for travel information?
TripAdvisor, Reddit, Youtube, Travel Blogs / Guides
When travel within the US, I tend to check TripAdvisor and I read
recommendations from locals on Airbnb
I try to talk to people who have been there and get their advice. Where to
avoid, what to do, how to stay safe, how to have the most fun possible. Also
with question 9- Continents and countries are very different, and preparedness
for those places- I cannot go to Antarctica tomorrow because I am not
prepared, but if I knew what to do and what to expect I would feel much safer. :)
Survey Results
25. Personas
25
After doing conducting the survey, came the question of
Who Will Use My App?
After some research it seems that the most common users will be
Backpackers, Business Travelers, and Vacationers.
I gave them life as:
Luna the Backpacker
Angelina the Executive
Gilles the Vacationer
29. User Scenarios
29
Luna is ready to embark on her gap year after finishing her
design degree. She's excited to venture out to Southeast
Asia. Her first stop is the Philippines. However, in certain
regions there's a terrorist threat alert. Her parents are
extremely concerned for her safety, they would like
regular updates on her arrival. Luna finds this to be
frustrating since she rather just enjoy the new country
she's in without having to message mom and day every
day. She would rather have an app do that automatically
whenever she travels to a new region.
Luna the Backpacker
30. User Scenarios
30
As Chief Digital Officer, Angelina is the face of OrientĂŒm.
She is expected to talk at numerous international
conferences. A focus area for her company is South
America. Due to the Zika outbreak, she is cautious about
accepting speaking engagements there. The CEO is aware
and is willing to work with her on alternative options such
as telecommuting or having him step-in. However, he
wants her to give at least a week notice in order to
change flights. Angelina is now scrambling to obtain the
most current map on Zika affected areas.
Angelina the Executive
31. User Scenarios
31
Gilles is a Frenchman who not only knows how to have a
good time but also knows how to host spectacular parties.
His name is tied with legendary underground raves, so his
wedding is no exception. After a long search of the perfect
wedding destination, he has settled on a beautiful private
island in the Thailand. However, the decided date falls right
in the middle of the Typhoon Season. Gilles would need to
check on the app to not only ensure the safe arrival of his
guests but to access to current Typhoon notifications. If all
goes well, he wouldn't need to move his party inland.
Gilles the Vacationer
32. StoryBoard
32
Out of all the personas, Lunaâs story really connected
with me. I am a huge backpacker who loves a sense of
adventure. Her story with her parents reminded me
of my own ordeals whenever I booked a one-way
ticket somewhere.
33. Sketches to the Wireframes
33
Upon figuring out my target users, came the fun part
of Sketching, Laying out, and Wireframing
my app to life.
34. Sketches & Exploration
34
First sketches of Raido in order to create the
Information Architecture. I went about creating the
first initial sketches for how each of my user personas
will be interacting with the app as well as the layout of
the features.
35. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Information Architecture
35
36. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Page Flows
36
Page Flow to check on the hazard of Philippines in terms of travel safety and being able
to tapping on the country/filter to get more information about the color filter.
Page Flow to Check on Region
Map
Home
Pop-Up Informing
User of Travel
Alert
UserTapsonColoredFilter
UserTapsonMap
37. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Page Flows
37
Sending alert notifications to loved
ones whenever they reach a new
destination/region.
Page Flow for
Safe Arrival Alerts
Map
Home
Menu
User Taps
on Menu
Send GPS
Location Upon
Safe Arrival
User Taps on
Send GPS
Deselect/
Select
Contact
Add
Contact
Send
Message
Edit
Message
UserTapsonMap
38. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Page Flows
38
Page flow to focus on one filter to see regions currently affected with Zika.
Page Flow to Focus on one Filter
Map
Home
Menu
User Taps on
Menu
User Selects /
Deselects Filter
New Map
UserTapsonMap
39. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Lo-Fi Paper Prototype
39
Checking on the hazard of Philippines in terms of travel
safety and being able to tapping on the country/filter to
get more information about the color filter:
User Opens App
Home page with Map
Map GPS coordinates locates user
User taps on the country and filter for information
User Task Flow to Check on Region
40. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Lo-Fi Paper Prototype
40
Sending alert notifications to loved ones
whenever they reach a new
destination/region:
User Opens App
Home page with Map whereabouts (GPS)
Taps on menu button on top
Menu reveals âSend GPS Locationâ
User taps on âSend GPS Locationâ
On the text field, user adds âMOMâ
Clicks on the â+â on the right side
Verification of add gets sent
User Task Flow to
Add Contact for Alerts
41. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Lo-Fi Paper Prototype
41
User only wants to focus on one filter
to see regions currently affected with Zika:
User Opens App
Home page with Map whereabouts (GPS)
Taps on menu button next to colored regions on top
Menu reveals selection/deselection of colored filters
User taps deselects all other filters to focus on one alert
Scrolls over to new region from GPS location
User Task Flow to
Focus on one Filter
42. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Wireframes & Exploration
42
Due to the difficulty of creating wireframes with a map app, I used
contour maps of countries to start with. I chose Philippines and
South America as the two countries of focus due to my User
scenarios. With these maps, I used it to play around with filter
colors.
43. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Wireframes & Exploration
43
Checking on the hazard of Philippines in terms
of travel safety and being able to tapping on
the country/filter to get more information
about the color filter:
User Opens App
Home page with Map
Map GPS coordinates locates user
User taps on the country and filter for information
Wireframe to Check on Region
44. Wireframes & Exploration
44
Sending alert notifications to loved ones
when they reach a new destination/region:
User Opens App
Home page with Map whereabouts (GPS)
Taps on menu button on top
Menu reveals âSend GPS Locationâ
User taps on âSend GPS Locationâ
On the text field, user adds âMOMâ
Clicks on the â+â on the right side
Verification of add gets sent
Wireframe to Add Contact for Alerts
45. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Wireframes & Exploration
45
Sending alert notifications to loved ones
when they reach a new destination/region:
User Opens App
Home page with Map whereabouts (GPS)
Taps on menu button on top
Menu reveals âSend GPS Locationâ
User taps on âSend GPS Locationâ
On the text field, user adds âMOMâ
Clicks on the â+â on the right side
Verification of add gets sent
Wireframe to Add Contact for Alerts 2
46. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Wireframes & Exploration
46
User only wants to focus on one filter
to see regions currently affected with Zika:
User Opens App
Home page with Map whereabouts (GPS)
Taps on menu button next to colored regions on top
Menu reveals selection/deselection of colored filters
User taps deselects all other filters to focus on one alert
Scrolls over to new region from GPS location
Wireframe to Focus on one Filter
47. Raido Final Prototype
47
To pay homage to the Bind Rune, the Raido logo is of an R Rune.
After working countless hours on creating the Raido prototype, there
were various changes upon the progression of the app seen in my work
in progress. One of the changes was the color green to purple for
Disease Outbreak Alerts because Green doesnât show up as well on
real maps taken from Google Maps. Another change was the label for
weather to Disaster Precautions to include earthquake prone regions.
Another change was the formal acceptance of the name of Raido for
the app instead of Reizen. Thus you will hear me mentioning it as the
Reizen app in the upcoming prototype video, it was the previous app
name before going with the creative direction of Raido.
48. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Raido Final Prototype
48
Raido Prototype I of the user flow for a user
in the Philippines only interested in seeing the
regions affected by Terrorist Threat alert by
the US Department.
User Actions:
User taps on colored filters
User taps on menu
User deselects filters
User goes back to the map
49. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Invision Prototype
49
VideoLink:https://youtu.be/eN_Hs1rd6R8
To follow along in the user task,
play with our invision link:
https://invis.io/DH9KIGDKW
50. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Raido Final Prototype
50
Raido Prototype II of the user flow for
Luna, the Backpacker Persona, on adding
her mom to receive a safe arrival
notification with her GPS coordinates.
User Actions:
User taps on menu to select âSend GPS Locationâ
User selects the ( + ) button to add new contact
User confirms access to Contacts
User writes in âMomâ
User hits return to pull up Momâs contact
User taps on ( + ) button to add Mom
User selects âMomâ
User taps on the paper airplane to send
User taps send after previewing the message
User taps âOKâ upon message sent confirmation
51. Alerts Designed for the Traveler
Raido
Shu4n62gmail.com
Invision Prototype
51
VideoLink:https://youtu.be/G4mpYV5bZJs
To follow along in the user task,
play with our invision link:
https://invis.io/DH9KIGDKW
52. Future Aspirations
52
After conducting some user testing
in San Francisco, my future aspiration
for Raido is to eventually add the
LGBTI filter. San Francisco is very
diverse with a queer-friendly
outlook. It would benefit my user
teters to display countries to avoid
for queer travelers looking to go
abroad without getting persecuted.
To see future updates,
check out my Behance:
www.behance.net/shu4n657f7
53. Tools Used & Resources
53
@@@@@
@@@
@@@
@@
@
@ = 10 Working Hours
Resources:
Google Maps
iOS GUI Kit
Behance Mocks
Smart Traveler US
Smart Traveller AU
@@