We recently created Journeys: The Customer Experience Mapping Tool. Its an iPad application which allows you to capture customer journeys as they happen. It is designed specifically for in-the-field data capture including the ability to capture photos, videos, audio, and locations and associate them with an experience.
Creating an app can be a daunting task. Often times people don’t get to see what really happens during the process. I wanted to open the hood on some of those iterations and design processes that went into creating the application. This process involved several people, over the course of 4-5 months, albeit not all continually.
The Idea
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, and bring life to them. 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.
More of a dashboard and information list.
Quick refined comp of the early ideas we tested. Quickly realizing we need to simplify.
After feedback we refined some of the layout and introduced the idea of Atlases.
Working through the simplification of the process, first 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 have a lot going on in the lower nav space, something that got 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 with multiple stages filled with experiences. The dots above an experience bubble was an idea that would indicated if there were additional info 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 to far off the final outcome.
After 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 that really makes the export.
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. (Yeah that’s a smiley face)
Final map. As mentioned we simplified the experiences at the bottom so they felt more draggable. We did create several animation test to determine the speed of the grabbing/dragging to get the feel just right.
Final experience popup. While developing this iOS 7 was released we felt it was necessary to follow some of the visual design.
Now that you’ve see the process of creating the app why not give it a try iTunes Link. (If the $4.99 price tag is a bit much for you and you really want to give it a try email us for a free code info-journeys@universalmind.com.)
