How can we help?

Design? Check. Strategy? Check. Bulletproof code? Check! People who can manage it in an agile and efficient manner? Check. Someone to help you create your next big product? Of course.

Denver

- 1201 18th St. Suite 250, Denver, CO 80202

Grand Rapids

- 125 Ottawa Ave NW Suite 270, Grand Rapids, MI 49503

Blog

BLOG:The Art of Creating “Journeys”

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

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.

1

1

Our initial first thoughts sketched out… as you can see, we tried to cram a lot of info on the screen.

22

Our “dashboard” and information list.

33An early look at the ideas we tested… we quickly realized the need to simplify.

44

After gathering feedback, we refined some of the layout and introduced the idea of Atlases.

66

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.

55

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.

88

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.

99

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.

77

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.

100

First design iteration of the experience detail popup… the “start mapping” button was a left over.

110

Icon ideas analog style.

120

More icon ideas - we pushed the idea on the whole “map” concept.

1*YSH4CRXdHcdnOpZQuZOQqg

We then started to look at the brain and circles that tied back to the app.

1*WzDSGZC8AfwCR1UQct9sRw

The final outcome was a simplistic representation of a map itself.

99

Ideas on what an exported PDF of a map could look like. You can see this isn’t too far off the final outcome.

111

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.

1*VcBeIv1ZCq2-dh4BKEowvA

Final Dashboard - yes, that’s a smiley face…

1*mkau2yi4HCUAs9gTvPvbbQ

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.

1*lG0vtXirmeDKsrOLbGVRiQ

Final experience popup. During development, iOS 7 was released and we felt it was necessary to follow some of the visual design.

1*yaXIFBEY1IM1LMxVzud4vg

Final experience popup — locations

1*z_C1Rc9WCCPL9oNhAdb3Ag

Final experience popup — adding images/videos.

1*MgA0q6UjkR555SjYLH8-RQ

Final experience popup — audio.

1*Xp4LIUVVdV_B0K5V2wuiFA

Final PDF export.

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.