Echotags App — UX Case Study

Mac Kozal
17 min readJan 9, 2017

--

Amsterdam offline audio guide, perfect for short term visitors and solo travelers

Introduction

This article shows the UX case study of the Echotags project, from the very beginning to the current state.

Stakeholder interview

Echotags was made by two people, me and my brother. We didn’t have large resources for the project. We self-founded it, so we needed to make it well, fast and efficient. The idea came up during a one week trip to Rome in Italy. We weren’t prepared to the travel at all. We downloaded offline maps on our phones, checked the most famous landmarks that I knew from my architectural school and hit the city. That wasn’t efficient. We were walking from one place to another without the plan. We spend a lot of time looking at our phones instead of enjoying the city. We thought it would be nice to have something that could help people experience new locations in a better way. Something that allows getting information about new places without any preparations.

What is the product?
Echotags is an offline audioguide for Amsterdam in the Netherlands. It uses geolocation to play recorded messages via earbuds when users are close to an interesting object, spot or location.

Who will use it?
The product is for short term travelers who stay in a city just for a couple of days.

Which customers and users are most important to the business?
People who like active traveling, who like to learn something new about the place they visit.

What design challenge did we have?
The biggest challenge was to make an app with the simplest interface as possible. The concept is to turn the app on, hide the phone in a pocket and start exploring.

What can I define as a success?
People explore the city using our app without keeping attention on their phones.

What worried me about the project?
The need of using headphones. We were not sure if people like to use headphones on their walking trips.

How can I differentiate the product from the others on the market?There are a couple of audio travel guides, but all of them ask a user to follow the given path. In our app, you can go wherever you want to and information will be delivered on the spot when you close to an interesting thing.

Market research

Before we started designing an app we made a market research to get some info about the market size, demographics, competitors, and pricing.

Market size
We decided to make an app about Amsterdam because it’s a very touristic city where I currently live, so it’s easy to validate the project there. In 2015, 17 000 000 foreign people visited the city, that’s 15% more than in 2011. ( www.iamsterdam.com/boma)

Demographics and Market Trends
City trippers are international tourists who stay an average 3.8 nights in Amsterdam, half a night longer than in 2011. The average age is 35. They enjoy cultural activities, 82% of them visit at least one museum.

International conference attendees are on average 41 years old, 3/4 are men. They generally travel alone (51%) and stay in hotels (86%). They primary reason for visiting the City is a conference but they tend to stay extra two days in the city once the conference is over. They are interested in cultural activities, 40% of them visit a museum during their stay.

Demographics charts

The major group of travelers to Amsterdam are people between 21–30 years old, 25% of visitors use English as their mother tongue. Almost 40% of them look for information about musea and attractions. Around 86% of first-time visitors research their destination before traveling, compared to just 57% of repeat visitors. The share for travel guide app is around 7.5% of the market.

Price calculation
We started talking about the pricing with making a comparison to the competitors. We didn’t want to make an app too cheap. People think that too cheap apps don’t have a big value and quality. We wanted to make something with a great content that people would love to use so we asked for a little bit bigger price for it. That was our initial idea. We compared prices of the thirty most popular apps for keyword “Amsterdam guide” in the US App Store.

Top 30 Apps for keyword “Amsterdam Guides” price distribution

We checked the different possibilities, fixed price, a free app with ads and in-app purchases. The common practice is to set app for free and add in-app purchases to unlock the content. We wanted to test them all in the future and see which one will work for us the best. Our initial goal was to earn $1000 per month. To make that we have to sell Echotags to either 1300 users for $1, 434 users for $3 or 260 users for $5.

Design hypothesis

The next step was to clarify our statement about the app. We simplified and refined our ideas and goals. We summarized the data and finally we knew what we would like to create.

Here is the pitch:

“We build a mobile application for solo travelers and short time visitors called Echotags. It allows you to dive in the new city and discover places hands-free. You can get lost and rely on our content made by locals who know the city the best. Put headphones on, hide your iPhone in a pocket — that’s all.

We operate in Amsterdam.

The market of solo travels is growing super fast. A number of bookings increased nearly 60% in last 3 years and 1/3 of all trips in the UK are solitary. We are looking for customers in solo traveling communities like specialized blogs and travel groups on Reddit. The second source is search engines, we optimize our position in AppStore and Google.

Our business model is freemium. You pay for the access to full version of the app.”

Proto-Personas

I made a few proto-personas to understand our potential clients better. I started with three typologies: a short stayed businessmen, a young professional on a weekend trip, a conference member. We made only three typologies because we wanted to speed our process and understand only the most important behaviors and goals of potential users who comply with the city visits statistics.

Proto-personas studies

Matthew Goat — a young proffetional
A 30 years old young professional with a college education. He lives in London and feels very free with Internet technologies. He is kind of an early adopter user. He uses Facebook, Instagram, and LinkedIn for social media. He has no problem with adopting to new technologies. In his free time, he loves to taste wine and go to the cinema. He likes alternative movies. Apart from holiday, he travels a few times per year for a weekend trip to different European cities for fun. He likes urban life and wants to experience it in different locations. His activities are musea, cultural events, and local pubs and bars. He likes to meet new people and he is open-minded. He looks mostly for the cultural experiences. He sleeps in hostels and cheap accommodations because he wants to save money for other activities. He downloaded Echotags because he wanted to experience the city of Amsterdam. He wants to walk without a guide and get the information on a spot only when he will be close to it. Then he could decide to go inside or to make a photo. In a background, he likes to listen to the music. He is not interested only in main touristic location, but also in groovy places that are recommended by locals.

Lilian Parent — a conference member
Lilian is a 40 years old expat in Paris who works in the international shoe selling company as a local market manager. She has a boyfriend Pierre — a teacher in secondary school in Paris. She uses Facebook and LinkedIn on regular basis. She loves to explore fancy restaurants and do shopping. She quite easy adapts to the contemporary technologies, especially when somebody recommends it to her. She came for two days to Amsterdam for a conference for local market managers from all around Europe. She stays in a three-star hotel on the outskirt of the city center. After the conference, she socializes with other members but she decided to extend her stay for two days to meet her friend from college and see the city. Her plans are to go for a dinner to a good restaurant serving seafood and buy something nice for her wardrobe. Echotags was recommended to her by a colleague who was in Amsterdam a month ago and he found it really useful. She wants to use Echotags during her walks around the city center to find a small and nice boutiques and shops.

Matt Burrel — CTO on business trip
Matt is a CTO at Drilling Equipment Company. He lives in Boston with his wife and two children, twelve and fourteen years old. In his professional work, he mainly uses Skype for online meetings. He uses Netflix to watch movies with his wife. In his free time, he likes to mountain biking and seeing old churches. He is a huge fan of medieval architecture he cannot see in the US. He came to Amsterdam for three days to finalize a contract with a Dutch partner. He landed on a Schiphol airport and went to the four-star hotel in the city center by taxi. He is going to spend most of his time on business meetings and events but in his free time he wants to walk around the ring of canals and get some knowledge on interesting old buildings. He doesn’t know when he will have a free time so he decided not to take a guide, he prefers to use Echotags for it. He can use it in his commuting time between the meetings. That’s the advantage for him. He wants to see at least one of the most spectacular musea and buy some local gifts for his wife and kids.

Context scenarios

We have checked a couple of the context scenarios to help us understand the users goals. How could we help them enjoy the city? In the end, the conclusion was super optimistic. The answers to all the questions about the usage were very simple. Every problem in all possible situations is limited to three steps at the beginning and two steps later.

At the beginning (first use)
1. Download the app
2. Download the offline version of the map
3. Start using the app

Later
1. Turn the app on
2. Start using the app

One of our very first context scenario scheme

Guiding Principles and Anti-Principles

The guiding principles and anti-principles describe the product fundamentals and things you do not want to hear about it. We decided to write them down because they allow to focus on the core features. In our case these are:

Guiding Principles
1. Easy to use — The user can listen to the audio guides without any effort — we can measure that by usability studies.
2. Hands-free — The user can hide his phone inside the pocket and discover the city. There is no need to look at the phone screen for all the time — we can measure that by usability studies and count the amount of played audio files.
3. Listen to your favorite music — The user can listen to any music app and Echotags will work in the background and mute the music when the Echotags audio file needs to be played — we can measure that by usability studies, forms etc.

Anti-Principles
1. Hard to use — The user cannot find the main functions of the product. It’s not clear for him how to start — we can measure that by usability studies
2. Stupid idea, I am not interested — The user doesn’t find our concept interesting. It’s something that he/she has never used and doesn’t want to give Echotags a try — we can measure that by usability studies and opinions on social media.
3. I don’t want to use the headphones — The user doesn’t want to use headphones on the trip — we can measure that by usability studies or forms.

Design

Because our team was small we had to divide our resources. We knew that we need to design and make three things:

- App itself
- Landing page
- Content that user consider interesting

Moreover, we had to discuss our time schedule. We decided to have brainstorms first and get the very rough vision of the project. After that we could make everything more precise. Meanwhile, we planned to talk about the app to various people so we could find out their opinions. I think getting feedback was the most important thing at the every stage of the process.

App

I started making the very first mockups and schemes of the interface. They were just a simple handmade sketches that showed the main design decisions and connections between the screens. I really like working by hand because that gives a lot of freedom and it’s really fast. Process is efficient and clear when you keep in your head what do you want to communicate. It allows making a lot of iterations fast and in an entertaining way. If you want to see how does it look on the screen you can just cut the outline of the phone from a piece of paper and put it in front of the screen.

First sketches
Option that we decided to develop further

I wanted the app to be as simple as possible. Main screen should have a map showing a current user position and points of interest. Markers should be categorized so the user can turn off the items that he/she finds not interesting. This should be done from the settings screen. This setup was my starting point for the designing process. The next step was making wireframes in Balsamiq Mockups.

Mockup in Balsamiq

We took part in a competition made by Justin Jackson and his MegaMaker podcast. The reward was one hour talk with Peldi, the owner, and creator of Balsamiq Mockups. We managed to win this competition. It was a fantastic talk and we learned a lot during this one hour. Peldi gave us suggestions what is important and what is not. He liked our idea that it’s good to start small and treat Amsterdam as a playground to check if there is potential in the market.

Early design
Echotags final design

I continue with design work in Sketch. There were a couple of interesting design challenges. We used a map service provided by Mapbox. It works online with a possibility to download the offline region of Amsterdam. At the start, if the user was outside Amsterdam and turned the discovery mode on, the map showed his current location. We didn’t want do that. We wanted to have Amsterdam always in the center so we designed a screen that is shown only if you are outside the city.

Out of the city…

To make the interface more intuitive and to increase the satisfaction of using the app we used micro animations. They give better feedback to the user and they look quite sleek.

Micro animations

Landing page

Our idea about landing page changed a lot since we have started. Initially, we wanted to make everything in a comic book style fashion. I made some quite precise illustrations using SketchUp and Procreate. The process was similar to designing the app. I started with hand sketches and then I moved into digital tools. I made a quick 3D model of the space, I exported the bitmap and traced it by hand using Procreate app.

Images that were not used in the final version
Timelapse of the drawing process

We even started sending a newsletter in a comic book fashion.

Sketch of the newsletter and the final product

You can still see the whole comic here.

We have used them in one of the very first stages of the landing page but finally, we decided to exclude them and make everything much simpler. We focused only on the key features of Echotags.

From sketch to Sketch

The whole history of the landing page is shown on the gif below. And the current version is here.

Landing page history

Content

In Echotags content is the king. It’s an app built around content. We wanted to deliver the best quality information that we could. We decided to make around 200 points of interest in the first iteration of the product. That would provide enough density of the points, so the travel time between them on foot won’t take too long. The experience from using an app will be continuous. I introduced point categories. Making them had two main benefits. First of all, it allowed me to concentrate better during the research phase — I worked on one set of points per working session. The other benefit is that users can select categories that they find interesting to them. Not everybody is curious about contemporary architecture, vegan food or family friendly activities.

I decided to divide the content into thirteen categories: Authentic Experience, Hidden Gems, Art, Musea, Contemporary Architecture, Historical Architecture, Food & Drink, Veggie Food, Shopping, Nightlife, Parks & Nature, Budget Travel and Family Friendly.

How to organize the data
I started with putting everything into excel spreadsheet, but that wasn’t a very ergonomic way of dealing with the problem. There were a lot of points, so with every new point, I had to manually check the geographical coordinates from Google Maps and copy & paste them into a spreadsheet. Some points needed to have more than one pair of coordinates and I had to copy all of them manually.

Left: Single marker, Right: Marker with triggers

This affected points of interests with a bigger area like parks, shopping streets, districts. In that situation we placed the main marker on the map and made a couple of triggers that are invisible to the user. With the trigger, we marked all entrances to the area. They turn the audio file on when the user passes next by.

One point of interest can be associated with more than one category. For example, a house in the city center can be in historical architecture, authentic experience and nightlife categories. That gives another level of complication to the data collecting method.

We decided to make a service to manage the database of Echotags points. It should allow us to add, view, modify and delete points. We wanted to have a search option, preview of all triggers and possibility to keep the text for audio recording. We called it Echotags Marker.

Echotags Marker main screen

On the topbar, we have a quick access to all options. We can preview the map where we can add or edit new points. We can check all the categories, see errors reports and review all texts.

Marker screens

Adding a new point and placing it on a map is super easy and intuitive.

Adding new points in Echotags Marker

The decision of making Echotags Marker was one of the best during the whole process. It saved us a lot of time. I could concentrate on research and made the content for the app, not struggling with keeping geographical coordinates in a proper way. When we recorded and cut the audio files the filenames were automatically converted to the point names saved in Echotags Maker.

Usability testing

The main parameter that we needed to test was the distance between the trigger where the audio message is activated and traveler’s position. It shouldn’t be too low. If the user is on the other side of the street than the point of interest and activation radius is lower than the width of the street the point could be omitted. Too big radius is also a problem because the user will hear the message before he/she spots the point of interest. Amsterdam is a very dense city. If the radius is too big, two points of interests can overlap each other. We checked and test different values of activation radius from 5 to 40 meters. I walked with a beta version of the app and checked the experience difference with multiple values of the parameter. With some tunings you could spot the object at the moment when information is played. We also had to add more geotagging triggers to some objects like big musea and buildings because you would like to hear about them as you see them on the street without approaching them too close. We also had to make power consumption optimizations to not drain the user’s phone battery.

Release

We published Echotags in the App Store as a universal app for iPhone and iPad and made it available in every country. We sat the price for 3€ in the beginning. There were a couple of downloads, some people gave us a good and valuable feedback but a number of users were much lower than in our predictions. Changing the price to free with ads didn’t help a lot. There were not enough downloads.

What went wrong?

We didn’t have enough downloads. There are a couple of reasons for that:

1. Low position in a search engine in App Store. It’s really difficult for new apps to go higher in the Apple search results.
2. Lack of advertisement. We didn’t make any advertising of Echotags. App Store and our Landing page were the only places where you could learn about it. That is definitely not enough. We have to invest in some kind of advertising in social media or Google Ads to increase the downloads.
3. Target of our market is very small and difficult to reach. People don’t want to pay for valuable content in advance in the App Store.

Plans for the future

We plan to invest in marketing. We will try to reach official promotion channels like a list of apps recommended by the tourism department of the city. Otherwise, we will try to pivot to other idea based on the audio guide app.

Last thoughts

I would definitely did that again. It was and still is the fantastic journey for me. I have learned a lot of things during the process and I know much more than I knew before I started. I would change the process a little bit and concentrate much more about social media aspect of the process. It takes a lot of time but benefits later.

If you want to test Echotags and get a lot of interesting information about Amsterdam it’s available in the AppStore.

If you find this article interesting I made another one, similar to this: UX Case Study —Coypu App. It’s about an offline audio travel guide to Amsterdam that we made in 2016. Would you also like to click on a heart at the bottom of that page? The article will be recommended to more people then.

If you find this article interesting would you like to click on a heart at the bottom of that page? The article will be recommended to more people then.

--

--

Mac Kozal

I am a UX/Product Designer. I graduated as an architect and I combine the processes of those two specialties in my daily routine. https://mackozal.com