Interactive Tablet App
A market research company approached our team asking for a better way to deliver their 100+ page customer journey reports to clients. Over the course of ten weeks, my team and I created an interactive tablet app that allows users to travel through customer journeys.
This is the story of how we took a convoluted static document and turned it into an engaging, immersive experience.
Our client’s current means of presenting their customer journey research to end-users—via dense, static PDF presentations—failed to adequately convey the details and complexities around customer journeys.
Our team designed, developed, and launched an interactive tablet app in 10 weeks. Our product better illustrates our client’s research, sharing details only when relevant.
Help our client’s end-users better understand the nuances of how people become customers by allowing them to actually traverse customer journeys.
I served as the UX lead on this project during my 2015 apprenticeship at Viget. I worked with Blair Culbreth (visual designer), Nate Hunzaker (developer), Becky Tornes (project manager), and Jackson Fox—Viget’s UX director who oversaw my work.
Note: This project is under NDA and so most visuals are omitted from this case study.
Brainstorming and Ideation
At the start of the project, we held a design studio to make sure every person involved—including all of our team members and client stakeholders—was on the same page. We brainstormed solutions to several key design challenges, like how to evoke emotion and best orient users to the app. This process also gave us an opportunity to ask questions, clarify content specifications, and lay out our assumptions.
Our client wanted us to create an app modeled after a subway map, so we used that concept as our starting point.
Information Architecture and User Flow
In a PDF document, every piece of content must be visible, and journeys must be shown in a linear fashion. An interactive app, on the other hand, can push certain details to more granular views. Our goal was to be comprehensive without overwhelming the user.
We determined that we needed to show three levels of detail—an overview of all six customer journeys, a view of a single customer journey, and a detailed view of a single touchpoint on the journey (moments when a customer interacts with a product). Along the journey, a host of additional information, such as the customer’s emotional state and context, also needed to be shown in some way. We documented all of the data and user actions associated with any given view and developed a complete user flow.
Iterate, Iterate, Iterate
Due to the short timeframe for this project, we moved quickly into higher fidelity designs. Blair, our visual designer, mocked up the key screens, and Nate started the front-end so we could see it in production. In addition to UX work, I dabbled in project management as well—I tracked and updated requirements as the project developed so our team always had a point of reference.
Weekly Check-Ins with the Client
We met with the client weekly, sharing our progress and showing select deliverables. This helped us iterate quickly and ensured we never traveled too far in the wrong direction.
Keeping the Client Informed
One issue we faced during design was how to effectively convey animation and interactions through static mockups and verbal explanations. For instance, our client strongly wanted the most granular view, the stop view, to feel like a subway station. Though we planned to introduce animations to achieve that effect, our client wanted more obvious visual markers, like subways benches and posters. We compromised by adding some subway imagery (e.g. a tiled background), which pleased our client without making the metaphor too literal. Nate, our developer, also demoed early concept work showing transitions and animations to help mitigate some of our client’s concerns.
If we could do this again, I would prototype key interactions much earlier in the process in order to better convey our intentions and vision to our client.
As an immersive map, this project was rich in interaction design. Here are some of my key takeaways:
1) Well placed animations can greatly enhance a product.
In a static document, the six journeys had to be depicted in a linear fashion, when in reality, they are much more complicated. People can repeat a journey, end a journey, and “transfer” from journey to journey on their way to becoming customers. A web app is much better equipped to capture all of these complexities, particularly in “transferring” from one journey to another at the station level. We experimented with several means of switching journeys before settling on a navigation design that showed both the user’s current position as well as subsequent and transfer stops.
A well placed animation is worth a thousand symbols. Our client’s original PDF file used arrows to show journey direction. Our app foregoes arrows and instead uses moving particles to show direction. This not only streamlines content but adds to the immersive nature of the app.
We launched our tablet app in August 2015. The app is beautiful, clear, and succeeds in conveying the complexities of customer journeys. Content is abstracted until the users need it, making it easy for them to navigate and access the right information at the right time. Our solution is a big improvement over our client’s previous method.
While I can’t share the proprietary product, the video below shows the overall map view. Selecting any of the lines launches the journey view, and selecting a stop launches the stop view.