Create an app

How to create city and tourism apps ?


Cities & tourism

Cities & tourism

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.

You may have already wondered about how to make an app, and thought it would be a hard process. However, with this guide you are just one step away from creating an app for the travel enthusiast, accessible across devices, 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 25 different themes (and counting) created by our designers that can be used as a starting point for your application.

If you want, you can also enable a classic "White" theme and make all the adjustments you have in mind. 

For this app I decided to start with the theme "Budapest”, but as I said earlier, you can choose the theme that best fits your design guidelines.
Theme library GoodBarber

2. Build your Home

The Home is the first screen users will see when opening your app. It is therefore an important feature of your app, both visually and practically.

With GoodBarber, the Home lets you choose which content to highlight upon opening the app.

With a destination app for instance you can decide to feature useful advice to visit your city within the first widget. 

The modular Home introduced by GoodBarber 4.0 is made up of two different kinds of widgets, content widgets and navigation widgets (links)—a total of 66 widgets has been developed so far.

Templates associated with widgets have a mobile, tablet and desktop declination. 

Here you can see that we’ve added our first widget, a Content widget, to feature an mCMS articles section (a Before you go article) :
*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.

After selecting a template (Banner > Minimal), we added another Content widget with a different display (Banner > Visual) to feature another mCMS articles section called Shopping:
We then added 3 more similar Content widgets to feature more key mCMS articles section of our app, Eating out, Culture and Leisure recommendations:
Now, let’s add another Content widget to feature our Events, and select a template for it, List > Classic:
Our Home now features a total of 6 widgets.

3. Build your Menu

With GoodBarber 4.0, the Menu is used for secondary navigation within your app.

Your Home already provides points of entry towards the sections of your choice, which is why you can even choose the option to not display a Menu at all.

f you do choose to enable a Menu (or Browsing mode in your back office), you can choose between 7 different types of "menus" or browsing modes, to further distribute traffic within your app.  

Building the Menu can be achieved independently of the number of sections in the app for complete control over the navigation of your app. 

Here we’ve selected the Swipe template and added our logo within the header of the Menu, and a Copyright in the Footer area: 
Your Menu can also feature links and shortcuts, to point towards destinations (internal or external), as well as titles and separators, to prioritize information within the menu (these two serve design purposes). 

You can further customize your app by featuring your logo inside the Header, on the Home as well as within sections, where each section Header can be customized independently:

4. Add your 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 (a Menu section), to better organize each type of content, and activities (E.g.: Leisure, Culture, Events ...) that will be presented in this sub-menu, and other information relevant to the app (E.g.: Local tips, 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 "Leisure" 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 (such as Historical Sites, Parks, …), 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 Victoria Building Museum will appear in the All category and "Leisure".

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, Mexican, American...) 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.

We're almost there ! Two more elements to add before your app is ready !

5 - Launch Screen and App Icon

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

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.

The launch screen is the first thing users will see when opening your app (before the Home).

It will be displayed for a few seconds while your app’s content is loading (in a browser as well).

Here, our graphic designer created the splash screen, but it is also possible to design it directly from the back office, using the Wizard Tool.
For the app icon, which will be shown on the home screen of users, you also need to comply with different dimensions, for the different operating systems and for web app specifics (such as the favicon).

Creating the right app icon can be tricky as you have very little room for creativity, plus it needs to be self explanatory.

For instance, you might need to tweak your logo somewhat, so that it adapts to a square format.

Last but not least, don't forget to enter the name of your app

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:
Fesch Museum in Ajaccio

Fesch Museum in Ajaccio

The Tourist in Paris

The Tourist in Paris