The GoodBarber Blog

Step by Step to Create City and Tourism Apps

Written by on Thursday, March 24th 2016 17:30

So long cumbersome paper maps! These days, to explore cities and to go sightseeing, everything fits inside an app. On top of their pocket-format, tourism mobile apps provide valuable information so that the user can plan his travel arrangements, places to visit, what to do in a particular place or situation, etc.

With our guide, you are just one step away from creating an app for the travel enthusiast, using GoodBarber.

Just one information before we get started, being a free spirit, my City Muse for the day will be Portland. But of course, you are free to apply all the tips you'll find here to any city, region or location.

1 - Choose a Theme

This is the first step to create your Beautiful App. In the back office you will find more than 50 different themes created by our designers that can be used as a starting point for your application. If you want, you can also enable a classic theme and make all the adjustments you have in mind.

For this app I decided to start with the theme "Asian Touch ", but as I said earlier, you can choose the theme that best fits your design guidelines.
Step by Step to Create City and Tourism Apps

2 - Choose the Navigation Mode

Just as themes, menus already have pre-defined templates, but you can create a new one from scratch. For my Portland App I chose the template "Little Swipe", since it's more minimalist and allows the user to focus on the content of the app.

*The content that initially appears inside the app is just set as an example, you can change and adjust as you fill your sections with your own.

Once you have chosen the menu you want, it's time to start customizing your app. The colors, by default, are the ones tied to the theme you've picked, but to create a very unique app you can change them. To do so, simply click on the "Edit" button below the selected menu.

To choose the colors for this app I used the free tool Color Wheel  from Adobe. Thus, you can define a set of colors that have a great harmony, without wasting time testing infinite combinations.

3.1 - Header

As with the menu, you can adjust the design settings. But beyond that, you need to decide on your logo (text or image), the effects you want to apply to the header and toolbar buttons.

3.2 - Body

During this step you will change the background, separators and margins settings of your app. Just as with design settings, when you select a theme the background is preset, but you can customize this part as well.

To create a new background for the app I used Canva (free), creating a new image with the dimensions shown in the back office. The image is very similar to the original theme, I just changed the colors and illustrations.

4 - Add Content

This is actually the most important part of our app, so let's put a lot of thought into it, shall we? 

To begin with, I created a sub-menu inside the app, to better organize each type of content, and activities (E.g.: Leisure, Culture, Events ...) that will be presented in this submenu, and other information relevant to the app (E.g.: Blog, favorites, send tips ...), which are in the original menu.

Once the app structure is set, it's time to start adding the actual content inside the sections you've created. Here, for the Portland App example, I've worked on the "Culture" section, entering locations within the city, relevant to this type of activity.

Before you start adding POIs (Points of Interest), it is interesting to create categories within this section, making it easier for the users to navigate inside the app and also to avoid creating an excessive amount of sections. This is a very important step because it will make a big difference in terms of user experience. The more intuitive and organized, the better.

Once the categories are defined, you can start adding points on the map, in the "Content" tab of the section.

It's possible to add specific details about each location (E.g.: information, opening hours, history...), add images, action buttons (telephone and e-mail), website, etc. Also, you must choose to which category each point belongs to, in the case of the sample image, The Hat Museum will appear in the general category and "Museum", and make the design adjustments.

There is no limit to the numbers of POIs inside a given map section, so you can create and detail as many sites as needed for your project.

The creation of categories may be performed in different sections (articles, videos...) and is a very effective tool to make the app lighter. In the "Eating Out" section, for example, we could target the categories by cuisine (Italian, Japanese, Natural, Pizzaria...) to keep all information within a single section, while filtering the results.

To create other sections the process is very similar. If the content is created inside a CMS section, everything can be done from the GoodBarber back office, from writing articles to creating events. If you choose to import content from external sources (Wordpress, Facebook, Flickr...), you simply need to configure the settings of the section when creating it - and if you need a helping hand you can check the detailed Online Helps or contact support.

5 - Launching Screen and App Icon

After mastering the design and entering your content, it's time for some final adjustments. 

On the "App" menu the items 6 and 7 are related to the launching screen (first image that appears when the user opens the application and loads the information) and App Icon (will be displayed in stores, push notifications and home screens).

Here, it is important to remember that you need to upload specific images for different device types and operating systems. This is a setting to ensure an excellent resolution and image quality in the app.

I also created the launching screen image on Canva, making something attractive so that the user can get the feeling of what's inside the app. However, it is also possible to design the Splash Screen and App Icon image directly from the back office, using the Wizard Tool.

For the App Icon it is also necessary to create images with different dimensions, as in this case, these images are used in different locations inside the user's device (App Store/Home screen). Besides, dimensions will also vary according to the operating system.

The field that appears below the icon preview is the name of the app as it will appear on the Home Screen of the user's smartphone, for today's example: "Portland".

There you go! Following these steps to create your application for your city or tourism guide should help make your app a success. But don't forget that your efforts should go well beyond the creation of your app. If you need more advice, check out our Ultimate Guide to Promoting your App!

Feeling inspired? Get started on your own app. Let's explore the world through Beautiful Apps!


Check out some Beautiful Apps created especially to delight travelers:

In the same section
< >

Wednesday, March 29th 2017 - 17:53 PWAs - Technology Fundamentals and Powerful Use Cases

Monday, March 20th 2017 - 08:00 PWAs - Progressive Web Apps explained

Define your App Concept Ebook

Sign up for our newsletter

Be the first to know about our new features, discount coupons, DIY tips and more!

Scan the QRcode to download the GoodBarber News App!

Available for iOS & Android