The Art of Creating “Journeys”
A behind-the-scenes look at creating the app.
We recently created Journeys: The Customer Experience Mapping Tool. It’s an iPad application that allows you to capture customer journeys as they happen. It is designed specifically for in-the-field data capture and includes the ability to capture photos, videos, audio, and locations and associate them with an experience.
Creating an app can be a daunting task and often times, people don’t get to see what really happens during the process - so we thought we’d share some of the iterations and design processes that went into creating this one! This process involved several people, over the course of 4-5 months, albeit not all continually.
The idea generated from the cumbersome process of creating a customer journey map. We wanted to leverage those whiteboard sticky-note maps and create an easier way to capture them digitally… to bring them to life. In looking to find a way to capture those customer interactions in the field as they happen, the idea of Journeys was born.
Our initial first thoughts sketched out… as you can see, we tried to cram a lot of info on the screen.
Our “dashboard” and information list.
After gathering feedback, we refined some of the layout and introduced the idea of Atlases.
Simplifying the process - capturing what’s necessary, then removing everything we could. For example, we originally included 2 view modes, edit and view… later iterations were simplified to just one.
Wireframe adding experiences to a stage. For simplicity, we changed the ability to see multiple stages at once - screen real estate and focus was a concern. Export was where we focused on the holistic picture.
A design direction of the simplified map with stages. We had a lot going on in the lower navigation space, something that was scrutinized and simplified for our first release.
A wireframe comp describing the interaction of adding an experience to the stage. The color represents the emotional state of the experience. We decided to remove the emotional icon on the left when dragging to reduce visual clutter in the current release.
A design of multiple stages filled with experiences. The dots above an experience bubble were ideas that indicated if there was additional information in each experience like photos, voice, or location.
First design iteration of the experience detail popup… the “start mapping” button was a left over.
Icon ideas analog style.
More icon ideas - we pushed the idea on the whole “map” concept.
We then started to look at the brain and circles that tied back to the app.
The final outcome was a simplistic representation of a map itself.
Ideas on what an exported PDF of a map could look like. You can see this isn’t too far off the final outcome.
After gathering more feedback, we found that images were a must. We looked at a layout structure for them, represented by the grey boxes. This was a huge part of the export and was a key addition.
Here’s a popup animation test which is not in the app currently. We actually created several tests like this to see how some interactions might work. We used origami to create these tests.
Final Dashboard - yes, that’s a smiley face…
Final map. As mentioned before, we simplified the experiences at the bottom so they felt more draggable. We did create several animation tests to determine the speed of the grabbing/dragging to get the feel just right.
Final experience popup. During development, iOS 7 was released and we felt it was necessary to follow some of the visual design.
Final experience popup — locations
Final experience popup — adding images/videos.
Final experience popup — audio.
Now that you’ve see the process of creating the app, give it a try… If you’re interested in checking it out, but not interested in the $4.99 price tag, email us for a free download code! We’re always looking for feedback and comments as well, so please let us know what you think.
If you want to read more about how we created the app, check this out.