Designing Urban Walks
A story behind design process of a walking tour app
Personal projects are not easy. They might look easy, but if you are trying to make something real and tangible it is quite hard; considering you have full time job and on top of that absolutely no budget.
I am a designer who is obsessed with traveling, maps and photography. What a cliché! I was dreaming of writing my own New York City guide the moment I moved to NYC 7 years ago. Over the years I was making multiple design attempts on this topic: once .NET Magazine asked me to design a concept for city guide that I created for one of their issues in 2010, I also created small magazine highlighting interesting photography spots in New York City where I described equipment I used to take a photo, exact conditions as well as location on a map. But none of that was really tangible.
Knowing my previous attemps, a friend of mine Danil Krivoruchko came to me with the initial idea of what became Urban Walks last March, and all I could hear was “maps”, “photos”, “app” and more “maps”. Sign me up!
There’s no other city in the world like New York. We wanted Urban Walks to be the kind of app that would allow visitors and curious locals to see New York the way we do — a city of larger-than-life characters, historical dramas, breathtaking architecture, and rich cultures. With a very small group of people we teamed up to create an interactive walking tour guide for New York and build it completely from scratch. The key thing here is that everyone were commited on working on this app during their free time in the evenings and weekends, since all of us had full time jobs.
Now you can download Urban Walk App in the App Store. As well as visit the urban-walks.com for more information.
But I wanted to write a short post about design process I was going through with the team while working on the app. Here we go.
Map
One of the key component that was determining look at feel of the entire app was the map. From the very beginning of the project I worked closely with Danil and he put together a moodboard where he grouped different treatments of maps that he found online as a reference. This is where we had to decide on the style that would drive the look of the app. Should it be simple and minimalist with clean lines, cartoony and a little bit goofy or should it be one large illustration? Should it be bright or dark?
This is where we debated between using code to skin one of the open source maps, or going a much longer route and drawing illustration of a map from scratch and then overlaying it as one big image on top of Open Street Maps. Technically map had to be “real”, meaning when on tour, app should show you exactly where you are.
In the end we settled on drawing map from scratch to get an exact look and feel we wanted. We looked into skinning possibilities of different open source maps and we just could not get what we wanted purely with skinning functionality. We wanted to create map that is very unique and personal. Something that users would want to spend time exploring and looking at details, something that has texture and character.
I open Photoshop and start building map step by step:
Screenshots from openstreetmap.com of selected area brought into photoshop.
I outlined land and was working on getting colors right between water and Manhattan.
This was the most time consuming part. Since our map is actually functional in the app and shows you exact location where you are; every single street had to be at exact spot. I overlaid map from Step 1 with some opacity and spent hours drawing streets on top of it with Freeform Pen Tool in Photoshop using Wacom pen. Does not sound very smart, I know, but in a way that was necessary to get the style right. When we got the right look of the outline, we templatized process and created other maps much much quicker knowing how exactly it should look.
I wanted to keep all streets in vector just in case. Screens become retina, files get larger in size.
After streets were done I started working on all the little details that make map unique and special. I added a lot of “water color like” textures to make it look like it was painted on paper. “Planted” trees in the park, added people walking around and of course those orange smoking street chimneys that are inseparable from New York. Ok, I did one completely unnecessary thing — I drew Brooklyn Bridge. It’s also not New York without it.
Below you can see the final map for one tour. I overlaid actual route that we want users to follow and all the must see spots from our guide. The tricky part here was to position a lot of dots next to each other, but not too close, so users can tap on them easily.
I quite like the final result. Map is not dark and feels very light despite of all the textures and noise. It’s colorful, but not too much. It was achieved by using pretty much only blue but making sure water does not bleed with land. Saturated colors also help: green works nice with blue here and black is only used for important parts such as illustrations and street names.
Illustrations
Now, this is something I did not consider would be a pain in the ass. Every tour consist of around 20–30 points. Some of them are highlights. Say “NY Stock Exchange” — people know it, it’s a highlight and a “must see” if you’re a tourist. So we decided to highlight about 10 points on the map by making a little illustration to make the map look more alive and interesting.
The style is quite simple — just an outline of the building. You have to select the right style, keeping in mind how many you have to draw. Technically each illustration can be more complex, but you can end up endless amount of hours making each. I used 2 different stroke widths to add a little bit of dimension to the illustration: thicker for an outline and thinner for lines inside and smaller details. In theory it takes about 5 to 8 minutes to make one. You find a photo online, place it in Photoshop with a little bit of transparency and then draw around it using Wacom. So everything above sounds easy and straight forward.
The part that took the most amount of time is the research. Something I did not account for at all. In order to draw an illustration like that you need a straight angle of the building to be somehow accurate in what you are drawing. Well, I thought I would just google “Woolworth Building” and get what I need. I wish! Instead I was getting million of tourist photos taken from the ground up in the shittiest perspective ever. With photos like that you have no idea about proportions of the building and where all the levels are in relation to the ground.
On average it took about 20–30 minutes to find photograph that was shot with a straight angle or a technical drawing of the facade (like image above). Some buildings took me an hour to find something remotely I could use. And for some it was simply impossible, for example MoMA museum that appears in one of our tours as a highlight. After spending couple of hours online trying to find a reference I ended up using a screenshot off Google Street View and faking everything above the first floor using multiple angled references.
In the end I ended up with 36 illustrations that we created for the first 4 tours we launched our app with. If you put them together all in one place you get a kick ass New York poster.
App Design
Now map and illustrations are done and here we get a lot of hints on look and feel of the app.
I started with Home Screen where the goal was to position all the tours available. There are couple of ways to do that: list, grid, carousel or map. List was our first option as we are working in a portrait mode. There’s not enough width to go with grid mode as we would not be able to position all the tour information. Carousel mode is not the simplest as well as it usually shows one piece of information at a time before you swipe. Map, though a great idea, might be too complicated for users to deal with at the very start.
The very first list I designed was not the nicest one. Then I thought of an idea to treat each tour like a post stamp (but without getting too much into realistic treatment) to have a little bit of textile effect and have some connection to when people used to collect stamps.
This stamp idea pretty much solved everything for me. I had nice container to position an image that represents our tour. Text treatment also looks natural and works better centered. Even positioning price of the tour on the top right corner kept the theme going. The last touch — I was able to reuse one illustration from each tour and position it above the title to carry over that look from the map all the way to the Home Screen.
Here’s a quick video how the Home Screen works.
Next screen is Tour Details. This is where look and feel actually kicks in. Home Screen does not have a lot of UI elements as well as color as all colors are driven by images on the background. I started selecting colors that would work together nicely as well as fit with the map created earlier.
Tour Details screen has a lot of information that needs to sell our tour to the user: photos of location, description of the tour (but not too long), highlights of the tour, instructions on how to get there by cab, train or car as well as useful information about where to get free wi-fi and use a restroom (and no, it’s not always McDonalds).
When designing interactive experiences it’s quite important to think about animations and transitions. Transitions are essential to guide users where they are going to and where they came from. We figured out a very nice transition from Home Screen tapping on the stamp and getting to the Tour Details view without feeling it’s a whole new page.
Lastly — the Tour Page. We decided to have two modes: Map Mode where map takes the majority of the screen and all the points are positioned below in a shape of small cards and Card Mode, where each point opens up like a card overlaying the map.
As of now all the content was written and researched by the awesome Jonathan Earle, a New York freelance journalist and history buff who in a previous life worked as a newspaper reporter in Moscow. No Joke. For every single tour he spent one month doing research at libraries (no Wikipedia content thank you very much!) and he managed to find an insane amount of interesting stuff that we, as locals, would love to explore as well and peppered that in with the standard, important things that tourists should see.
His content was so good, that we could not just put it as plain text. I created multiple modules for different types of content such as: quotes, image gallery, interesting facts, stats etc. We even built CMS that allows us to select and mix modules to create visually interesting and alive stories about each point on the map.
From a design and user experience perspective, we spent quite a lot of time getting all the interactions right, so we could make sure it’s optimized for using while viewing and walking. There are couple of things we have done to achieve that. Larger typography and right line spacing helps a lot. Using different modules I mentioned above breaks copy in a nice way. So if you look away from your phone and then look back it’s very easy to find visually where you left off, as story is broken into smaller visually different chunks. It was also important to keep stories quite short, we wanted people to enjoy their walks and look around, our app just makes it a little more interesting. Each card can be consumed in just under 2 minutes.
Photography
Another thing that might sound fun, but in reality turned out quite hard to do was photography. For each “card” we needed photograph of the place, so user can easily recognize if the location is right visually, without relying on address (which sometimes is just impossible to find on the building).
There were 2 main challenges. Ideally I wanted to have absolutely no people in the shot. New York without people ? Good luck! Unless you’re Will Smith in “I am a Legend” movie. And the second challenge was taking photos of skyscrapers (or any tall buildings). You just can not do that from street level, otherwise you end up with the same tourist photo looking up.
To solve the first challenge I had to wake up at 4AM and bike to Manhattan to catch sunrise (good lighting) and a moment before people start getting to work. During the weekend is even better. You only have an hour after sunrise before you start getting people and cars in the frame.
You know that saying about New York never sleeps. It’s quite true. And sometimes you just get people having coffee at 5AM in-front of New York Stock Exchange in their sweatpants, as they always do. Taking photo like that makes me cringe, because all I see in the viewfinder is a 20 minutes Photoshop clone stamp tool to make this girl disappear.
Unfortunately the second challenge, taking photos of tall building, is quite impossible to solve with Photoshop. Over the course of summer I was trying to get to different rooftops asking friends and friends of friends if they have access to a certain view. Sometimes is worked out and with telephoto lens (in my case Canon 70–200mm f/2.8 and sometimes with 2X converter to get 400mm) I was able to take some good shots.
So, instead of what you see on the left I could get something decent what you see here on the right:
To process all the photos I used Adobe Lightroom. I usually go through all shots and give 5 stars to the ones that are the best, 4 that are maybe and 1 star — delete. Then quickly color correct to get the similar clean look. I am also a big fan of VSCO Lightroom presents, highly recommend to all the photographers!
As you can see we all put a lot of effort into this app. Thanks a lot to Danil Krivoruchko in brining everyone together and believing that this app can be completed despite of all the road bumps we had. To Hyperboloid team who made this technically possible and delivered a fantastic app! And to Irene from our studio Anton & Irene who I worked with closely on this.
So, for less than the price of a dirty water dog, a toasted everything bagel with scallion cream cheese or a cup of coffee from a street cart you’ll get a 2.5 hour tour that not only guides you through the awesome sights, stories and landmarks of New York City, but also helps you find hidden gems of the city and learn something new even if you lived here a long time.
Download app on the App Store
Read more about it on urban-walks.com
If you write about this kind of stuff, we have prepared very pretty press kit with a lot of high res images to use in your publication.
If you’re an author or a tour guide who wants to collaborate and write some tours for us reach out over e-mail. We pay our contributors percentage of the sales.
Thanks for reading!
