Mobile App “VanPlan”

nodyegova
RED Academy
Published in
8 min readJul 7, 2016

Case study / Project 3 / @ Red Academy

1. Overview

Large cities, like Vancouver, are filled with a wide variety of things to do, places to see, food to eat and events to attend. Vancouver is already filled with many staple attractions that gain a great deal of attention, but there are many less known options that aren’t given the same exposure. When planning a day in the city, most people end up doing the same things over again or exploring same areas. My team was tasked to create an itinerary app which would give the best Vancouver-specific trip planning experience.

This case study will provide the summary of project objectives, research, design, and prototype development of a concept itinerary app “VanPlan”.

2. Project goals

· Make the process of trip planning simple and engaging

· Create a community around the local itineraries that enables users to share experiences with each other

· Provide itineraries for tourists and locals alike

· Promote the newest and greatest things to do in Vancouver

· Support local businesses, attractions and events that can’t normally afford advertising

· Educate users on Vancouver neighbourhoods history and context

3. Tools

· Adobe Photoshop

· Illustrator

· Sketch

· InVision

4. Research

We started our research by checking applications already available on the market. The most popular trip planning applications include: Trip it Pro, Trip Case, Lonely Planet, We are local, Time Out, Tourism Vancouver and Hello BC.

Most of these applications are focused on traveling to different countries around the globe and on associated travel services, such as booking plane tickets or hotels. They provide general information about the area and describe common activities. Only Tourism Vancouver app is focused purely on Vancouver and attractions around the city. It provides information about different attractions, but it doesn’t have the functionality to create user-specific itinerary or review travel recommendations from locals.

Our direct competitors are Trip it Pro and Trip Case. Below is a comparative/competitive table of their functionality and main features.

Figure 1 Comparative/Competitive Analysis

Both of these apps allow their users to store travel documents in one place, automatically transform these documents into itineraries, share them with friends and family, get notifications, add or change plans on the go and allow the use of 3rd party services such as booking a cab or receiving real time flight notifications. Both apps assume that the user has a predefined itinerary and knows what he or she wants to do already. This limitation has resulted in a lot of questions within our group, like:

· What to do if the user plans a trip to a new place and doesn’t know the area?

· What to do if the user is an adventurer who doesn’t want to stick to a beaten path or doesn’t have time to research local blogs and e-communities to discover interesting and unusual travel suggestions?

· What to do if the user has limited budget and doesn’t know what type of activity he or she can afford?

· What to do if the user plans to travel with children and doesn’t know which activity would engage different age groups?

These questions helped to identify the market gaps which could be filled by our product. Our application is meant to make discovering, building and sharing itineraries quick, relevant and easy on the go. It also allows the user to review and use recommended itineraries created by locals. These itineraries would be suggested by the app based on customized filters.

5. User Personas

We created a SurveyMonkey quiz with interview questions to identify target users.

Our question categories related to:

· How users plan their trips?

· What kind of information do they look for before travel?

· Which resources do they use to find this information?

After interviewing the people from different target audiences, we summarized the survey results and created our primary and secondary personas.

Our primary user, Tom, will create an itinerary which will include attractions in Vancouver and surrounding area based on his local experience. The secondary user, Katie, will browse for local itineraries and use or customize them according to her needs.

We chose to focus on these two personas as they presented a realistic group of consumers which would be likely to use this app.

The identification and analysis of our users’ goals and frustrations helped us to confirm the required functionality and features of our app.

Figure 2 Primary User Persona
Figure 3 Secondary User Persona

6. Planning

6.1 Scenarios

We developed the primary and secondary user flows to improve the understanding of our users’ needs and to create the user-centered application.

· Primary user scenario:

It’s Monday afternoon and Tom considers how he will entertain his friend, Brad, who is coming from Portland for a weekend. Tom has an idea of where he wants to take Brad, even though he has never visited some of the places himself. He wants to create an itinerary to plan their time and to remember which places they are going to visit. Tom will share the itinerary with Brad, to let him know where they are going and how he should prepare for the trip.

· Secondary user scenario:

Katie has just dropped her two children off at school in Victoria, BC and now is trying to make plans for the weekend. She will travel to Vancouver this weekend with her husband and kids. Katie wants to do something outdoors, but her children are difficult to motivate. She is budget conscious and, therefore, tries to find the fun activities for the whole family that are either free or inexpensive.

By brainstorming the results of our interviews and survey, we came up with a list of functions important to our user. The functions were prioritized and organized in the site map. Below is a working draft of a site map. The wording of labels and layout is continuously tested with our end-users.

Figure 4 Site Map
Figure 5 User Flow Diagrams

7. Design

7.1 Design strategy:

· Simple and fast navigation

· Clean UI

· Straightforward visuals and recognizable icons

· The process of inputting the necessary data as simple and user-friendly as possible

7.2 Moodboard:

Below are the first pictures which appear when you type “Vancouver” in a search engine. The predominant colours are white, blue, green, and grey. They reflect the union of the city and nature, and will be applied in our design.

Figure 6 Moodboard

7.3 Sketching

Below are the quick sketches of our first concept development. The screens show the process of creating an itinerary.

7.4 User testing

During initial user testing, we organized our paper sketches in “Pop” prototype app and ran several user tests. The first results have indicated that the process of creating an itinerary was too complicated and required too many clicking steps.

As our team had only 2 weeks to produce a concept application, we decided to move on and create a new version of the design implementing all key findings from the user tests. We have revised the design by moving all itinerary creation options in a progressive disclosure menu. Now the user was able to see all filters at the same time and could adjust them as needed.

7.5 Wireframing

The general stylistic concept is moved around the light background. The interface navigation and notification elements are filled with bright accents. As shown on pictures above, this approach has filled the screens with air, and the light background promoted good readability which is important for the fast use.

Figure 7 Landing page

Landing page.

On this page a user can see the list of popular itineraries around Vancouver. Every route is represented with picture, name, short description, and featured icons which visually display what activities are involved there.

Our secondary user, Katie is looking for an itinerary which would keep the whole family involved and entertained. In order to adjust the offered itineraries, she has to go to the menu and set up filters.

Figure 8 Slide out menu
Figure 9 Itinerary review
Figure 10 Itinerary creating process

7.6 Invision Prototype

Some sections of the below prototype remain in mid-fidelity stage due to the limited project schedule.

8. What I have learned

· Balancing creative visuals vs. user-friendly UI experience

· Everything should be tested prior to implementation

9. Next steps

· Add a “fun” explorer functionality which will allow creation of fun-filled itineraries throughout the city. This feature is intended to engage all user groups in completing various tasks and allow them sharing the achievements over social networks.

· Add a group “scavenger hunt” feature which will allow creation of group adventure itineraries throughout the city. This feature will engage the users with local neighbourhoods and will educate on the city history and context.

· Add a functionality which will allow the group itinerary participants to split up and reconvene at another location. As not all group participants will be available to attend all activities within an itinerary, the “Reconvene” feature would allow the users to coordinate their location and progress and assist in getting the group together.

· Conduct more user testing!

· And more user testing….

· Annnnnd more user testing….

10. Acknowledgements

Special thanks go out to my team members: Chloe Hunt and Jax Peng.

--

--