Published on | Prototyping: From UX to Front End — Medium Danielle Borisoff

Native Mobile App Design / RED Academy UX Essentials

Introduction

The following case study will take you through my first UX design project at RED Academy’s UX Essentials course. It can be best described as a journey as I fumbled my way through user flows, surveys, interviews, user data, comparative analyses, endless wire framing, user testing and prototyping, sometimes veering off course. The good news is I got there …but it’s just the tip of the iceberg.

The mobile app Explore Canada is a travel app focused on highlighting exciting, unique and memorable experiences around the country — not just the typical travel spots which can be found across other apps and competitive sites. Its primary purpose is as a promotional tool to help entice travelers to visit Canada vs other out-of-country destinations and businesses. Canada has so many comparable destinations and activities that match or rival other cities, beaches, landscapes and more. Secondly it’s a platform to plan and share a Canadian trip and find a new place or activity to explore.

Mockup copy for my app design was gathered from the Canada Keep Exploring website.

Target market

Potential users of this app are Canadians and Global travelers who are looking for verified, unique and interesting things to in Canada. Typical users will be looking for suggestions and don’t have a lot of time to spend on research — information should be easily accessible from mobile devices. Being able to save and share trips and itinerary with their travel partners is important. They are young or young at heart and looking for tried and tested experiences that are sometimes off the beaten track, cultural and quirky.

Use Cases

A teaching assistant from Saskatchewan wants to visit either the west or east coast of Canada during an upcoming Spring break. He buses to and from university daily and browses the Themes and suggested Itineraries. He shares his preferred plans with his friend who is able to start his booking process from the itinerary details page using the off-site urls noted.
A Vancouverite is expecting a visit from a friend traveling from Australia. She wants to show her friend around town but it would help to get a sense of her friend’s travel ideas and interests. The Vancouver host asks their friend to use Explore Canada to look up some ideas by Searching the app or browsing the Themes and Itineraries pages, then create a trip and share their preferred activities. The host then can get started on booking and planning the itinerary.

User Research

Survey: 59 Responses

Typeform Survey Responses

Starting my research with a Typeform survey, I gathered some useful information such as the age of travelers, what they like to do when traveling, how they prefer to use their mobile phone for travel, and what their travel pain points often were. The two pain points that lead to Explore Canada’s Most Viable Product (MVP) features were ‘experiences are not inline with reviews’ and ‘managing itinerary’.

I thought this question “How likely are you to plan your next trip within Canada” was interesting as it indicated to me that Canada is under-traveled and often not a first choice when choosing a travel destination.

The question “What kind of experiences and activities do you like to do when traveling” was useful as it helped me understand that most respondents are interested in exciting, memorable and culture-rich experiences.

Survey Questions Asked:

What is your age range?
What is your current employment status?
What type of mobile apps do you use on a regular basis?
How do you use your mobile phone for travel?
What kind of experiences and activities do you like to do when traveling?
How do you prefer to share your travel experiences and memories?
What are your biggest pain points related to travel research?
How likely are you to plan your next trip within Canada?
If you had only one travel app, what should it be able to do for you?

Overall the survey gave me some useful answers but it should be redone with more pointed questions that support the app’s current MVP features. Although the customization potential is huge, I found Typeform was restricting as it only allowed 10 questions max with its free version. It would be useful to spend some time and money crafting and sending a great survey.

Interviews: 5 Interviewees

5/5 interviewees will not be planning their next trip within Canada.

Interviews followed my survey with four recorded in person and one over the phone — all had different travel styles and goals. I found all my interviewees to be very forthcoming and happy to talk about their experiences.

Although I know my interviewees think Canada is a beautiful country and would love to visit more of its cities, none mentioned it as a next spot to visit. Their answer to the question “Where are you most interested in traveling to next?” indicated to me they didn’t consider Canada a top choice to be included into future plans.

Interview Questions Asked:

How old are you?
Where have you lived most of your life?
What does your typical day look like?
What are some of the apps you use on a regular basis?
Tell me about your role at your company.
Where have you travelled in the past?
Where are you most interested in traveling to next?
Tell me about the kinds of experiences and activities you like to do when traveling.
How do you use your phone for travel?
While planning travel, or traveling, what do you want and need your travel apps to do for you?
What is your biggest pain point related to travel research?
What are you currently doing to make your travel research easier?
Where and how do you like to share your travel memories?
What apps or sites do you usually go to for travel info/research?
What do you like or dislike about these other apps?
What locations do you tend to do most of your research? Ex at home on couch, on the bus/train, at work
How much time do you usually spend planning a vacation or trip?
Final questions, comments?

All my interviews lasted from 25–30 minutes. I found them enjoyable and I was able to gather so much more useful information than from my survey. Being able to read a person’s body language and expressions really helped me to recognize when I could continue down a line of questioning or know when I hit a dead end.

Personas

Using my survey and interviews I combined my findings to create two personas that would be typical users of Explore Canada.

Erin: mid-twenties, highly social and enthusiastic. She prefers to travel to historical European cities and visit bustling popular cities like L.A., New York, Chicago, Montreal and Toronto where she can immerse herself in the local scenes with focus on fashion, music and cuisine. She’s interested in traveling to MTL and TO.

Primary Persona: Erin Robbins

Charles: a family man in his early 30s. He loves nice things and values highly-rated activities, good food and family-friendly warm destinations.

Secondary Persona: Charles Zhang

Must Haves

Offline access to itinerary and maps
Suggested itineraries with access to local info, maps and external links
Push notifications for nearby place of interest

Pain Points

Accessing directions without wifi
Managing itinerary
Experiences are not inline with reviews
Star ratings are too general
Info is out-of-date
Reviews can be misleading
Price conversions are confusing

MVP Features

There are travel behemoths such as Google and Google Trips, Trip Advisor and Airbnb, that already do many travel tasks incredibly well such as navigation, and user submitted content. Explore Canada needs to show travelers unique, memorable and trusted trips ideas and allow them to create their own itinerary that can be saved, shared and downloaded. All the people I surveyed or interviewed currently use the giants mentioned above and are happy to continue doing so — that is until something can beat what they offer. I’ve identified that Explore Canada must include the following features before all else to be functional and useful:

Save Places and Activities
Create and Share Itinerary
Itineraries are Accessible Offline
Reviews (not yet included in current app design)

User flow & wireframes

My surveys and interviews revealed that users of this travel app were looking for ideas of what to do, where to go and what to eat — plus they highly value what others think so reviews are extremely important in deciding on an activity or restaurant. Another must-have feature is offline downloading of places and itineraries for when an internet connection is not reliable or available.

User flows

Since I now had an idea of what users needed and wanted I could begin creating their flow through the app. Working through the user flows helped me to map out the paths a user would take but I soon found it to become messy and didn’t seem exactly right. My first user flow was bloated and not very good. I started to recognize many faults when I began the wire framing.

Trimming down to focus on my MVP was now vital to the completion of this project.

User Flow #1

Flow 1 shows my scope bloat!

User Flow #2

Flow 2 reduced to one key task: Plan a Trip

Wireframes

The wire framing process was where things began to fall into place and become more tangible. Initial paper sketches were a nice start, but really not ideal given my short timeline. I quickly transitioned into Sketch and got busy framing.

After linking up the Craft/Invision plugin I discovered I could link up art boards within Sketch — which I thought was a useful exercise for me to move through some more realistic flows. This helped me identify gaps and issues like missing steps, useless steps and unclear call-to-action buttons. I later learned this wasn’t a good move as it further complicated the prototyping process. Next time I will leave the linking to the prototype software like Invision or Principle.

Initial paper wireframe sketchesDigital wireframesDigital wireframes when I discovered you could link your boards in Sketch

Usability testing

I designed and performed three navigation tests with Usability Hub.

Test 1: View and Include a British Columbia activity in your custom travel itinerary saw good success rate for the first four steps and then the failure rate was approx 50% thereafter. Two testers got lost clicking the hamburger menu and even the home page’s description — I believe it was due to unclear instructions or testers’ failure to comprehend the instructions before taking the test. Five testers made it through to step 5/7, the others got lost in the segmented navigation and hamburger menu again. These problems could also be due to testers being asked to complete too many tasks.

A total 17% of participants completed all steps in an average of 52.1 seconds. Drop off started at Step 4.

Test 1, Step 4/7 — Users are asked to further drill down into BC to find something to add to their itinerary.

“I was done selecting BC as a province, and I was now looking for my custom trip to include it in. I don’t know at this point which city/area I wanted to add. I guess the whole province can’t be added :/”

Take the Test:

Fast User Testing: Five Second Test, Click Test and Navigation * UsabilityHub

Test 2: Create and Share a custom itinerary had immediate failure on the first screen, I believe due to an unclear wireframe and call-to-action ‘Add Trip’ button. No participants completed all steps. Only one participant had a chance to take it before I ended it and started over. My wireframes and instructions may have not been clear enough.

Test 2, Step 1/12 — Users are asked to Create and Share a custom Itinerary. The call-to-action is not visible enough.

Take the Test:

Fast User Testing: Five Second Test, Click Test and Navigation * UsabilityHub

Test 3: Create and Share a custom itinerary — Take 2

This navigation test was based on Test 2

A total 11% of participants completed all steps in an average of 1 minute 10.2 seconds. Drop off began steadily after Step 5, then again at Step 9.

Test 3, Step 5/12 — Users are asked to add something to their empty Trip Itinerary

“I wanted to see again the way the dates were selected.”

Test 3, Step 9/12 — To add this activity to their Trip, users need to choose ‘Add a Trip’

“Actually wanted to add to activity but there didn’t seem to be an option. So I pressed share”

Take the Test:

Fast User Testing: Five Second Test, Click Test and Navigation * UsabilityHub

All three of these tests were performed using my first set of wireframes. The results revealed to me that my layouts weren’t all that clear, but using bland wireframes probably didn’t help the matter either especially coupled with more than one task to complete. After these tests I started a redo of my wireframes based on my MVPs.

High fidelity digital wireframes based on User Flow 2

The wireframes above are based on my second version of the user flow. I reduced the scope to just my MVP tasks identified from my user interviews and survey. The top tasks users wished to perform were 1.) place and activity ideas, 2.) create, save and share itinerary with friends and family and 3.) have access to offline data. User testing has not yet been performed on these new screens.

Prototype

Evolution of the Home screenFour themes and curated lists reduce clutterSample flow from Vibrant Cities, Sign in, Add Trip, View Itinerary and Details

Conclusion

I found this project to be a spring board for learning the basics of UX design. My biggest take away is to take care and time with user research and user flow mapping as it’s vital to the integrity of useful app or site. Also, really understanding users’ needs, tendencies, human behaviour, universal UI graphics and layouts along with current technologies and practices all play significant roles in the success of a great UX/UI design.

I expect to apply everything I learned in this RED UX Essentials course to my current career and onward. Although this was just a glimpse into UX, the skills I will take away will be very useful to my future projects.

Explore Canada: UX Design Case Study was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Explore Canada: UX Design Case Study

Cool stuff, every week

More Articles