Shuang Raido UX Design Portfolio

Download Shuang Raido UX Design Portfolio

Post on 14-Jan-2017

96 views

Category:

Design

2 download

TRANSCRIPT

  • RaidoAlerts Designed for the Traveler

    1

  • Introducing Raido, the map app with live filters showcasing areas with disease outbreaks, terrorist threats, and natural disaster warnings.

    Invis

    ion

    Link

    : http

    s://in

    vis.io

    /DH

    9KIG

    DKW

    RaidoAlerts Designed for the Traveler

    2

  • 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

    RaidoAlerts Designed for the Traveler

  • Alerts Designed for the Traveler Raido Shu4n62gmail.com

    Im a Creative Professional with a Passion for Flow Arts, Virtual Reality and Travel.

    About the Creator

    4

    Hi, Im Shuang Chen

  • Alerts Designed for the Traveler Raido Shu4n62gmail.com

    Work Experience

    5

    GE Digital2015 - 2016

    Societe Generale2014

    Deutsche Bank2012-2014

    Deutsche Bank2011-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.

  • Alerts Designed for the Traveler Raido Shu4n62gmail.com

    Raido Inspiration

    6

    Youre going off to Europe? Isnt 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.

  • 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 couldnt find anything with detailed information on travel warnings in a visually appealing manner. Thus, I decided to create my own version which Ive named Raido.

    Statistically I would have a higher chance of getting shot in Oakland than in Europe

  • 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. Theres random times in my portfolio that Ive

    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.

  • 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.

  • 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 IssuesConsistent 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 doesnt 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 its information overload

  • 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.

  • 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 its information overload

  • 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

    Its where you catch up with all your

    friends

    Gives live update as to friends in danger

    areas

    Safety Check only works after natural

    disasters

  • 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:

  • 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.

  • 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

  • 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 theres a good diversity in frequency of travelers as well as experience in traveling.

    Survey Results

  • Alerts Designed for the Traveler Raido Shu4n62gmail.com 1870% 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

    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

  • 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

  • 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. Its 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

  • 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

  • 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

  • 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

  • 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 ExecutiveGilles the Vacationer

  • Alerts Designed for the Traveler Raido Shu4n62gmail.com

    Personas

    26

  • Alerts Designed for the Traveler Raido Shu4n62gmail.com

    Personas

    27

  • Alerts Designed for the Traveler Raido Shu4n62gmail.com

    Personas

    28

  • 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

  • User Scenarios

    30

    As Chief Digital Officer, Angelina is the face of Orientm. 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

  • 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

  • StoryBoard

    32

    Out of all the personas, Lunas 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.

  • 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.

  • 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.

  • Alerts Designed for the Traveler Raido Shu4n62gmail.com

    Information Architecture

    35

  • 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

    User Taps on C

    olored Filter Use

    r Tap

    s on

    Map

  • 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

    U

    s

    e

    r

    T

    a

    p

    s

    o

    n

    M

    a

    p

  • 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

    U

    s

    e

    r

    T

    a

    p

    s

    o

    n

    M

    a

    p

  • 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 AppHome page with Map

    Map GPS coordinates locates userUser taps on the country and filter for information

    User Task Flow to Check on Region

  • 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 AppHome page with Map whereabouts (GPS)

    Taps on menu button on topMenu reveals Send GPS Location User taps on Send GPS Location

    On the text field, user adds MOMClicks on the + on the right side

    Verification of add gets sent

    User Task Flow to Add Contact for Alerts

  • 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 topMenu 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

  • 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.

  • 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 AppHome page with Map

    Map GPS coordinates locates userUser taps on the country and filter for information

    Wireframe to Check on Region

  • Wireframes & Exploration

    44

    Sending alert notifications to loved ones when they reach a new destination/region:

    User Opens AppHome page with Map whereabouts (GPS)

    Taps on menu button on topMenu reveals Send GPS Location User taps on Send GPS Location

    On the text field, user adds MOMClicks on the + on the right side

    Verification of add gets sent

    Wireframe to Add Contact for Alerts

  • 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 AppHome page with Map whereabouts (GPS)

    Taps on menu button on topMenu reveals Send GPS Location User taps on Send GPS Location

    On the text field, user adds MOMClicks on the + on the right side

    Verification of add gets sent

    Wireframe to Add Contact for Alerts 2

  • 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 topMenu 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

  • 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 doesnt 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.

  • 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 filtersUser taps on menu

    User deselects filtersUser goes back to the map

  • Alerts Designed for the Traveler Raido Shu4n62gmail.com

    Invision Prototype

    49

    V

    i

    d

    e

    o

    L

    i

    n

    k

    :

    h

    t

    t

    p

    s

    :

    /

    /

    y

    o

    u

    t

    u

    .

    b

    e

    /

    e

    N

    _

    H

    s

    1

    r

    d

    6

    R

    8

    To follow along in the user task, play with our invision link:

    https://invis.io/DH9KIGDKW

    http://www.youtube.com/watch?v=eN_Hs1rd6R8

  • 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 LocationUser selects the ( + ) button to add new contact

    User confirms access to ContactsUser writes in Mom

    User hits return to pull up Moms contactUser taps on ( + ) button to add Mom

    User selects Mom User taps on the paper airplane to send

    User taps send after previewing the messageUser taps OK upon message sent confirmation

  • Alerts Designed for the Traveler Raido Shu4n62gmail.com

    Invision Prototype

    51

    Vide

    o Li

    nk: h

    ttps:/

    /you

    tu.b

    e/G

    4mpY

    V5bZ

    Js

    To follow along in the user task, play with our invision link:

    https://invis.io/DH9KIGDKW

    http://www.youtube.com/watch?v=G4mpYV5bZJs

  • 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

  • Tools Used & Resources

    53

    @@@@@

    @@@

    @@@

    @@

    @

    @ = 10 Working Hours

    Resources:

    Google MapsiOS GUI Kit

    Behance MocksSmart Traveler US

    Smart Traveller AU

    @@