Tag Archives: DIY

Tips & Tricks: How to Create Apps with a Custom Feel

1 Apr

If you don’t have the budget right now to create a unique custom design for your app, don’t fret. Our builder was designed to be flexible and lets you tap your creative spirit! You can easily give your app more punch by taking advantage of the app builder’s capabilities and enlisting your resident image maven.

Creating Unique Apps

A site list graphic is created as one image, but is designed to give the appearance of multiple buttons.

1. Make a unique site list by using images with touchable hotspots.

Create an original image graphic for your site list that breaks down your app content into specific categories. In the builder, add the Image Map widget to the desired page and upload the graphic. You’ll then be able to draw touchable “hotspots” over each category and turn each section into an interactive “button”. Since you are creating this image specifically for your app, you can choose to graphically represent the categories as circles, squares, rectangles, even icons–it’s up to you!

Check out a great example created by the Cranbrook House and Gardens. The Home page of their app features an image map with touchable hotspots.

2. Make those site lists feel even more custom by using images with a transparent background.

Consider creating a site list graphic with a transparent background. In the example below, the image on the left was created with a textured blue background and saved as a JPG. The image on the right was created with a transparent background and saved as a PNG file in order to preserve the transparency. Note how using a transparent background gives the impression the category “buttons” are floating on the background of the app–as opposed to obscuring the background–and leaves more of a custom feel. Again, the client is utilizing our Image Map widget to turn each category into a touchable hotspot to drive the user to the appropriate page in the app.

Mobile Tour Example Home Page

A client uses special graphics and the image map widget to make their Home page pop.

3. Add text or logos to your images.

Strategically adding your logo or app name to strategic images in your app can make a huge impact on its overall look and feel. In the image above, the client added text to their home page image using image editing software. Because the client was able to implement fonts from their organization’s style guide, the end user is instantly presented with the client’s branding. On this particular sample, the client turned off the page padding in the builder to allow the image to span the full width of the page, which presents a different feel as well. This setting can be changed on a page-by-page basis by clicking on the page header in the builder.

4. Create transparent banners in your app.

Using image editing software, you can easily mount graphics you’ve created for other purposes as a way to bring in your branding. In the examples below on the left, the Canadian Museum of Nature has reused an existing image designed for a printed map and centered it onto a transparent banner. On the right, a client’s logo is used instead. In both scenarios the banner is created at 1024 pixels wide, with the image centered, and saved as a transparent PNG. The transparency of the file, and the fact that the image is centered–rather than running the full width of the page–presents a more refined feel to your app. If you create a banner for your logo, you can play with the height of the file and reuse it throughout your app–taller banners at the top of a key pages like a Home or About Us, or shorter ones subtly placed at the bottom of each page in your app. For more info and examples about sizing banners, visit our Learning Center.

Images mounted and centered onto transparent image banners lend a custom feel to your app.

Images mounted and centered onto transparent image banners lend a custom feel to your app.


Incorporating some of these ideas can transform your app and turn one of our stock themes into one that reflects your organization’s identity. If your organization does not have image editing software, you can always use free ones like Pixlr or Photoshop CS2.

Did you learn any tricks while building your app? Tell us about them!

App Spotlight: The McCormick Foundation’s Cantigny Park

25 Mar

Q&A with Diane Gutenkauf, Director of the Robert R. McCormick Museum

Cantigny Park is the former estate of Colonel Robert R. McCormick, longtime editor and publisher of the Chicago Tribune. Covering an expansive 500-acres in Wheaton, Illinois, the Colonel left his estate as a gift to the public upon his death in 1955. The park is home to 30 acres of spectacular gardens, the Robert R. McCormick Museum, the First Division Museum, and a 27-hole championship golf course–all of which are part of the Chicago-based McCormick Foundation. Cantigny Park created their first audio tour with OnCell in the spring of 2010 and have recently relaunched it as a multilingual tour app built with our new app builder.

Q. How many visitors do you see a year?

A. Cantigny Park welcomed more than 363,000 visitors in 2014.

Q. What was the main goal for creating your app?

A. Our grounds are vast, so we wanted to give our visitors a self-guided tool to answer a variety of questions about things they encounter here. Our stops include background information on the gardens, historic site information, historic images, seasonal images, and audio.

Q. How does the app enhance the visitor experience?

A. Visitors can learn more about specific points of interest on our property right on the spot. For example, visitors to the rose garden can see an image of the Chicago Peace Rose, a flower discovered in our gardens, even if the plant is not blooming. While walking through the Idea Garden they can listen to tips on how to attract butterflies to their own gardens.

Q. Can you tell us a little about how you created the audio content?

A. Our initial project in 2010 was a simple cell phone tour. We assembled a staff team to decide on initial stops and provide background information to the person chosen to write initial content. Members of each department edited stops related to their areas. We recorded audio in house. Our goal was to keep each stop to under 125 words, although some go as long as 150. This tended to keep the audio to under 1 minute.

With the migration to the new builder, we’ve taken the opportunity to edit some tour stops we thought weren’t working well. Our Client Account Manager at OnCell let us know what percent of a stop most visitors listened to so we knew if most people listened all the way through or not. Longer stops were shortened and we re-recorded the audio. We added a few photos to the OnCell tour and made plans to translate the audio to Spanish. We just finished uploading new Spanish audio and text and are still translating photo captions.

Q. What advice would you give to other organizations who are looking to create a tour?

A. Start by making a logic map of your tour stops. Our stops don’t follow a linear map of our site because we’re an outdoor site where visitors may choose many different paths. Instead we created links between stops of similar content hoping this encourages visitors to seek out other spots on our grounds. While the stops may be located in different areas, we hope this encourages visitors to explore other spaces.

Q. What benefits do you see from migrating your tour to the TourSphere platform?

A. The new platform is very easy to use and allows us to add photo captions, create easy links to other stops, and it was pretty straightforward to offer a Spanish version of our tour.


Cantingy Park Mobile Tour

The Cantingy Park mobile tour app can be accessed on any web-enabled device at http://cantignypark.toursphere.com or scan the QR code

New Feature: Photo Gallery

15 Aug

You may have noticed some of our tour apps have photo galleries that rotate automatically and can also be swiped. These were beta users of our Photo Gallery widget and we’re happy to announce that it is now available in the App Builder for TourSphere Pro accounts.

What is the Photo Gallery widget?
The Photo Gallery widget allows you to add multiple photos to a single page in one image carrier. Think of it as a responsive slideshow that gives users access to multiple photos on a single page without scrolling. You can set the gallery to auto rotate, adjust the timing of the rotation, or let users swipe to the next image. You can even use the gallery to add sponsor logos to specific stops on your tour.

How do you add a Photo Gallery to your tour?
Use our web-based mobile App Builder to create a Photo Gallery on a page-by-page basis. You must be in a project created with TourSphere Pro. You’ll find a new widget under the Add Widget menu. Once you click to add the widget to the page, the Photo Gallery editor will open up. Upload photos from your computer directly into the gallery, or drag images from the Library to the Image section on the right. Click the Show Options button to set the auto-rotatation and speed.

A few thoughts to remember about the Photo Gallery:
1) The gallery looks best when all the images have the same dimensions. 2) In the widget editor, drag and drop the thumbnails to re-order the images. 3) If you don’t have a Pro account, you can still take the widget for a test drive by creating a new project from your Dashboard and selecting Pro.

Would you like to learn more? Contact your Client Account Manager or email us to get the conversation started.


5 Tips for DIY Audio

12 Aug

You’ve written the script for your audio tour and found your narrators. Time to hit the recording studio! Wait, what studio? Many organizations do not have the magical budget to hire professional audio production services–you’re not alone! Here are a few tips to help drastically improve your audio quality when creating it in-house.

1) Choose your location. Find a quiet, smaller room and close the door to help minimize the ambient noise. Cubicles are designed to absorb noise, so one would be great to use during off peak office hours. Keep a consistent location for your recordings and remember your setup to help ensure the same quality when recording over multiple days. If the microphone is in a different position or if the room size is different, it is very likely the audio will sound different.

2) Minimize noise. The microphone picks up all sorts of ambient noise, including fans, air conditioners, and office equipment–shut it all off. You’ll see a remarkable difference in sound quality.

3) Find a decent microphone. Acceptable low-quality audio will sound significantly better with a basic external microphone (vs your computer’s mic or a headset). Your best bet is to go with a unidirectional mic as it picks up sound from one direction–like the voice of a narrator!

4) Use a pop filter. Block the sounds of those popping p’s and b’s by placing a pop filter in front of your mic. You’ll find they can be very affordable but you can also DIY one for virtually nothing with a coat hanger and pantyhose.

5) Use an audio editor. Look for simple software that can help you add sound effects and allows for minor editing. Something like Audacity is easy (and free!) to use and makes recording a straightforward process. It also allows you to monitor the recording levels so you can adjust your mic distance or voice accordingly.

Recording content does not have to be a roadblock for creating your tour. If you find you just don’t have the time or the staff to pull it off, contact us to request a quote for our affordable editing and production services.

Add a Google Map to Your App

23 Jul

Map IconIf you’re building a walking or city tour with the TourSphere builder, allowing the user to track their position in relation to all the sites in your app is essential. Here’s a quick intro and tutorial on how to use our Google Map widget.

What is the Google Map widget?

This widget allows you to add a map to any page in your app, create site markers, and define links that connect the user to various sites in your app. In your final app, when the user taps a marker, they are taken to the desired point of interest.

Before you dive into maps, you’ll want to make sure you have a few point of interest pages built in your app.

How to Add a Map

When you are in your project, click the green add Add button to open the widget drop-down menu. Select the Google Map widget. This will drop the widget onto your page and open the map editor. You will be prompted to enter a city name or address—this can either be the general area of your tour or the starting location of the first stop. Once you enter the address, you will be zoomed into that area, setting the stage for building your map.

How to Add and Set a Marker

There are two ways to add markers. With the map editor open, click the green Add Marker button on the top left. You can then enter a specific address location—you’ll see the marker fall onto the page. The other method is to zoom in on the map to the desired location and click on the map itself to drop the marker.

Once you’ve added a marker, you’ll see a new drop-down menu appear at the bottom of the page. This is where you will select a page in your app to link to the marker.

The second option, under the Link menu, is to title the marker. This title appears in the pop up bubble the user sees when they tap the marker and the optional site list. The widget automatically pulls the title of the page you have linked, but you can choose to enter an alternative title in this field. Don’t forget to save!

The Marker List

In the map editor, on the right you will see a list of all the markers added to your map. If you want to edit a specific point of interest, use the Search feature to quickly find a specific marker. Click on the marker title and you will see the editing options reappear at the bottom.

If you hover over one of the marker titles, you will see the marker jump on the map to locate it visually on the map.

How to Edit Markers

You can edit your markers by clicking on the marker directly or by clicking on the title in the marker list. Either method will open the link and title editor.

Edit your marker location at anytime by dragging and dropping the marker itself to a new location on the map.

Map Options

There are features you can enable on a map-by-map basis. They can be accessed by clicking the green button labeled Map Options in the top right of the map editor window. Check off an option to enable it.

The three optional features that can appear as icons in the left corner of any map are:

    GPS—Allows users to pinpoint their location on the map.
    Home—The user ultimately will zoom and pan around the map. This feature allows the user to re-center the map to its original position.
    List—Displays a list of all the points of interest defined in the map. The text in this list is determined by the individual page titles.

If you are building your app for optimal viewing on tablet devices, you may want to consider displaying your map as an inset view. This adds additional padding to the bottom of the map so it does not take up the full screen.

Positioning the Home View of the Map

As you add markers, you’ll pan and zoom around the map. When you leave the map editor, the last position the map was in is the “Home” position—the area that user sees when they access the map for the first time in the final app. After all of your markers have been added, zoom out a bit so all of the markers are clustered towards the middle of the map. Exit the editor and use the app preview function to view how the map and markers look. If necessary, re-open the editor and make a series of small tweaks to the position.

We find best practice is to zoom out to reveal all of the markers and the entire area the tour covers. However, you can also zoom in to show the detail of the starting position of the tour. Either way, keep in mind the Home position will change a bit from device to device depending on the screen ratio.

Marker Numbers

If you have a sequential tour, you can label each marker with a site number. The site number is set in the individual page settings. Access the page settings by closing the map editor and going back to your pages. Select any tour site page and click on the header—the gray bar at the top where the page title appears. In the editor that appears on the left, enter the Site Number and click Save. The Google Map will automatically pull each site number and tie it to the corresponding marker.

5 Tips and Tricks From an App Builder

27 Jun

Building an app does not have to be a long or frustrating experience. Knowing best practices and familiarizing yourself with our CMS to know basic features will go a long way. Here are a few tips to keep in mind so you can maximize your time and meet your launch date:

1. Organize Your Content
Keep your app build moving by organizing your final assets. Sounds obvious, right? But you wouldn’t believe how frequently we come across assets in the Project Library that are poorly labeled or redundant. Not paying attention to naming conventions can make the library cluttered and confusing.

The easiest way to organize is to create a folder on your computer for each asset type, e.g., video, audio, images. Keep your file names simple, Site 1, Site 2, etc. or 01-Introduction, 02-Site Name.

Think about other contributors on the project. If they were to look at the files in your library, would they be able to easily determine which files should be placed on each page?

2. Bulk Upload Assets
Now that all of your assets are organized, save a substantial amount of time by bulk uploading your files in the Project Library. You may upload as many assets as you like simply by selecting multiple files from your computer. After the upload begins, you can navigate away from the library and work on other parts of your app.

3. Drag and Drop
Once you have added widgets to a page, you can move them around the page by clicking on one and dragging it above or below another. This trick also works within the List widget. If links are set in a list and you want to reorder them, simply click on the list widget to open the editor and drag and drop to move them around.

4. Copy Pages
Take advantage of the Copy Page feature in the builder. Chances are you have created a typical page layout—such as a site page—copy this page and you’ll save precious time. You’ll need to replace page titles, files, and text, but you will not have to rebuild the base structure every time. The Copy Page feature is located above the Page List in our CMS.

5. Set Links Last
We have found best practice is to use an “assembly line” approach when building your app. Once you have all of your pages built, the next step is to set the links that determine the flow of your app—these are primarily links for buttons and site lists. If all the pages have been built, there is no need to toggle back and forth between newly created pages and pages that contain links to them. Creating links as a final step allows you to easily flow from page to page. It’s also a great way to identify any pages that still need to be created.

Five Easy Ways to Create Content for Your Mobile App

16 Jan

For many museums, hotels and tourism sites looking to create an app, one of the more daunting aspects of the process is creating the content that will go into the tour itself. As we hear so often with social media, it’s essential to have great, engaging content to draw your visitor in and ensure the app enhances their experience with you, whether they are accessing it on-site or remotely. One of the benefits of TourSphere is that we make it extremely easy to create an app by providing you with an easy way to organize your content into a virtual tour. Of course, that means you must have content to organize. Whether it’s audio clips, videos, photos or text, there are easy ways to create engaging, interesting and professional content quickly and on a budget.

  1. Enlist the Interns: If your interns are sorting through spreadsheets and delivering mail, you’re not using them right. College students are extremely familiar with recording video and audio on their iPhones and editing it quickly and professionally. Give interns ownership of a piece of content–whether that’s an interview that needs to be recorded, voiceovers, or an existing piece of content that needs cleanup and editing. With inexpensive equipment and software, they can create fantastic and creative pieces of content. This method not only gets your app content done well, it also gives your interns a purpose and sense of accomplishment.
  2. Tap Into After-Hours Talent: Before you decide to hire a voiceover artist or team of historical re-enactment actors, check around the office to see what your colleagues are doing after hours. Do some of them have theater degrees collecting dust or recurring roles in community theater? Do they have the perfect voice for narration? Don’t assume you need to pay a lot of money for great work in these areas. It’s important the work is professional, but often this can be done by enlisting the help of the people who already work at your organization–and the project can be a lot of fun for them as well.
  3. Use What You’ve Got: Do you have a bank of professional photos of your museum artwork or the various areas of your hotel? Use these as a way to guide on-site visitors and a way to orient those using the app remotely. There’s no need to reinvent the wheel. Simply freshen your collection by adding anything new and including great write-ups about each site or, better yet, audio narration on each tour stop.
  4. Outsource It: When you don’t have the time or the expertise in-house to create excellent content, it’s time to turn to the experts. While we encourage building your own app with our TourSphere Builder, we also offer content development services that take the burden off you and allow you to feature professional, integrated photo, audio and video content in your mobile app.
  5. Invest in Inexpensive Hardware: If you’re planning to create a lot of content, it’s likely worthwhile to invest in some hardware like a camera or audio equipment that will make high-quality multimedia content. Thanks to technology, it’s not expensive to buy equipment that makes fantastic recordings–sometimes even a good iPhone app will do (for more on this check out our DIY content series). And this provides you with the ability to update your content quickly and easily if you need to change your app. If you’re recording video, plan to invest in a tripod–a steady shot is the difference between an amateur and a professional recording.

Tell us: What are some creative ways you’ve developed your app content?

Who Should Be Our Narrator?

13 Dec

When developing your mobile tour, there are many ways to make it particularly memorable for your visitors. One is choosing to incorporate audio into the tour in the form of a tour guide or narrator.

There are many options for narrating a tour, from a single, anonymous voice to a celebrity to a collection of different voices. At TourSphere, we’ve seen many tours come up with inventive takes on the narrator. Here are some things to consider as you decide who will be the voice of your app and, by extension, your museum, tourist destination or other site.

  • Who Might Be the Ideal Guide? For every location, there’s a potential protagonist, and that character–fictionalized or real–can act as your narrator. Developing a tour for a natural history museum? Dream up an archeologist and hand her the keys to the tour. In Miami: An Insider’s Walking Tour, South Beach native, bikini model and bartender Claudia guides the user through the city–the perfect authority for one of the country’s hottest destinations.
  • What Local Celebrities Can You Tap? Boston’s HarborWalk App features an introduction by the city’s mayor, Tom Menino. His distinctive voice and local celebrity status add gravitas and entertainment alike to the app, and his heavy Boston accent provides just the right amount of local flair.
  • Who’s an Insider? Who knows every corner of your tour? Who has insider information that visitors wouldn’t uncover by asking staff or reading signage? That’s the perfect person for narration (and you should be tapping them for content too!). The Mount Auburn Tour provides a specific “Dave Barnett’s Mount Auburn,” which features narration of the cemetery’s special features through the eyes of its president and CEO.
  • Can You Tap Your Board? You may have hidden talent right on your board–the perfect source for professional, insider’s, and pro bono narration. Consider the tour of the Boston Public Gardennarrated by Henry Lee, a longtime Bostonian and President of the Friends of the Public Garden–a perfect example of an insider who can add style and flair to your tour.
  • Are Multiple Narrators Better? Some tours are better told by a variety of voices. If you’ve got great stories to tell, consider weaving together a variety of voices to create a tour with more depth and dimension. Whether through reenactment or interviews with relevant people, this option can draw in your listener in a personal way.
  • Do You Have Hidden Talent? The most popular option for our museum and nonprofit clients involves finding employees, volunteers or other stakeholders at the organization who have acting or voiceover experience and tapping them as the “anonymous” narrator voice. This option provides a polished presence at a minimal cost.

Before you begin developing your app within TourSphere, decide whether you want your narrator to be a celebrity, organization insider, anonymous voice or combination of styles. Consider creating a presence for the narrator within the app and introducing them to the user with visuals and a bio, whether real or imagined. Use the narration to further draw users into your tour and make them feel like insiders.

Need inspiration? Here are some of the notable narrators that have appeared in TourSphere tours:

3 Mics to Turn Your Phone into a Recording Studio

31 May

This post is part of a series of “do it yourself” articles by Glenn Forsythe, Chief Soundscape Architect here at TourSphere. We hope you find it helpful when creating your own audio and video content!

As we have covered in previous installations of our DIY series, there are quite a few options for getting great production values without spending a fortune on equipment. For getting good audio, the basic elements will always be the same: clear sound source, microphone, cable and recording device.

In this post we’ll take a look at microphones that can transform your phone or tablet into that high-end field recorder without the high-end price tag.

  • Tascam iM2: If you are an iPhone-Pad-Pod user, this would be my top pick for doing any kind of recording. This stereo microphone and preamp combo uses the same mic and hardware as the DR handheld recorders, which are great portable recorders by Tascam. Full level control and adjustable stereo condenser microphones basically make this suitable for any kind of field recording. Plugs directly into the docking bay for a nice stable connection. ($65.00)

  • Tascam iXZ: This also says that it is for the iPhone, but the output is a standard eighth inch plug, which theoretically should be able to work anywhere. This is a microphone preamp, which is very useful if you already have a microphone you like to use. Other than providing an XLR input to connect a microphone, this gives you the ability to change the level of your signal, as well as providing “phantom power” for condenser microphones. ($39.00)

  • iRig Pre: Also formatted for the iPhone, this is basically the same device as the Tascam iXZ, which allows XLR microphone connections, phantom power and level control. This does have a headphone output which is quite helpful, seeing as how the headphone jack of your phone is being used by this device. Also comes with two apps for recording. ($39.00)

Do you have any secret tips for great recording on a budget? Please share! And let me know if you have any questions about recording your own audio and video!

Planning a DIY Mobile App for Visitors

5 Apr

So you’ve decided to create a mobile app to enhance the visitor experience – that’s great! Now what? Well, a little strategizing can go a looong way. Sure, you can always go with an on the fly, kitchen sink approach, but we often find that method to be a little frustrating – often accompanied by a lot of backpedaling. With a little forethought and communication the process can be quite smooth.

Get ideas for your app

One of the best ways to think about how to approach your smartphone app is to look at what other people are creating. Remember, all apps had a planning stage, and it’s a great to see the end result. Navigate various mobile apps and note things you like – and dislike – about them.

As you go through existing apps, you’ll begin to see they have elements in common:

  • a home or introductory page
  • a list of services or points of interest
  • a property map
  • an about us or contact page, or both!

You also have to remember that as an organization, you are connected to hundreds, if not thousands, of people – you are in a prime position to gather info. Ask your future users what they would like to see or hear in your app. Ask your front end and floor staff what questions your visitors are asking and what suggestions they are making – you’ll probably begin to see a pattern.

Think about your content

Now that you’ve done a little research, ask yourself some questions:

  • What type of content do I already have access too? (Are you converting an audio guide into a smartphone app? Do you have videos? Photos? Text for all of your pages?)
  • What additional content do I need to complete my app?
  • Is it important to give users quick access to visitor information such as hours and contact info? What about certain points of contact once your visitor has arrived?
  • How many tours/routes will I have? How many points of interest will there be?
  • Do I need a map to accompany my app? How many? (Do I want to use the geo-locate capabilities of a Google map because there are outdoor points of interest? Do I have access to a custom map for your property?)
  • Do I want my users to access an RSS feed or blog to stay up to date with ongoing events?
  • Would my organization benefit from responses from a survey?
  • Is there a need for a keypad? Are my points of interest numbered and easy to spot?
  • How can I use the app to further promote my organization?

Determine the flow of your app

You may find it helpful to visualize what your final app will look like. You don’t need any fancy tools to do this, the classic pen and paper approach will work just fine! If you’re not crazy about showing off your drawing skills, opt for something more sophisticated. You can always download a free trial version of a mockup program, like Balsamiq.

Try creating a mockup of the general flow of your app – begin with your “Home” page and the main navigation buttons – think about how visitors will use them to navigate your app and your museum or property. What features of your app should be highlighted and easy to find?

Your mockup will serve as a your blueprint while building your app.

Gather your content

Once you have a general idea of the direction your app will take, and have determined what content you need – pull it all together! When you get started with your app, one way to keep it moving smoothly is organization and making sure your assets are the proper quality, file types, and ready to be placed in your app.

It helps to organize your files in an orderly way. Simple, easy to identify, and consistent naming conventions are very helpful. Think about other contributors that are helping you create the app. If they were to look at all the files you’ve gathered, would they be able to determine which files go where?

Now that you’re a few step closer to creating your app, don’t forget, one of the many benefits of creating your own app is that you have the flexibility to change your mind!

%d bloggers like this: