CONCUR INTERACTIVE DEMO

Elegantly showcasing Concur's
seamless travel software

CLIENT

YEAR

Year

Fall - Winter 18/19

THE BIG PICTURE

We created new guided trial experience to help potential Concur customers experience Concur’s offerings through an immersive, realistic and educational approach.

MY IMPACT

I was the creative lead in a team of 8 in charge of concepting, designing, and leading all elements of the visual experience. I delivered one fully-responsive interactive demo with custom photography, animation, and video. Later, I led the creative localization effort to translate this demo into over 20 languages. 

Hero Image

A demo worth
clicking through

ezgif.com-video-to-gif

STANDOUT MOMENTS

I loved this project because it allowed me to wear many hats in the creative process. I worked as both the primary UX designer creating the experience and the creative lead running client presentations, addressing feedback and directing other creatives on the visual and interactive approach.

Design requirements document

Concur has a lot to offer, but they didn't have any low-commitment options for potential users to test out their product. By creating a design requirements document I noticed that all my favorite examples from my research told a story. Through this lens I was able to categorize inspiration by storytelling techniques and how they could be used to tell Concur’s offerings.

Design Requirements Document
Design Requirements Document2

Excerpts from the design requirements document. The image on the left demonstrates various modes of timeline functionality and the image on the right is a list of 7 design pillars I used as a guiding light while making the experience. 

User flow document

UserFlow1-09

GOALS OF THE DOCUMENT

Concur_RoughDraft_2-06

View the demo at a macro and micro level

Concur_RoughDraft_2-10

Alignment across the team from the beginning

Concur_RoughDraft_2-07

Call-out and keep track of unknowns in the experience

Concur_RoughDraft_2-09

Ensure consistency
in length between chapters

Concur_RoughDraft_2-08

Place wireframes in context with other interactions

THE TAKEAWAY

Creating a user flow allowed me to call out problems and missing pieces of information early in the process. This saved the team time and gave the client the confidence to trust that our choices were well-considered and documented. This trust proved invaluable as we tackled each step of the project together.

Wireframe iteration

One of Concur’s key concerns was making sure that the user felt “in control” of the experience. They could experience each click as if they were testing the software in real life, but also skip ahead, go back, or exit if they wished.

This created an exciting design challenge for me - I immediately knew a classic text box with a “next” button would not be enough. Wireframes for this problem and all other facets of the experience provided the bones on which the rest of the visuals were built.

Concur_Flow_1-14

A custom
photoshoot

I led a photoshoot to align the visual narrative of the expense story with the content. Specifically, I needed custom photography to show off Concur's receipt-capturing feature. I worked closely with our in-house video production team to create the perfect image. I selected photos to convey my concept, and worked with the production manager to select props that would match the Concur color pallete. The image is utlized in the final demo, and also provided to the client to use on future assets. 

Image inspiration and color reference:

Concur_RoughDraft_2-11
Concur_RoughDraft_2-12

I ran several tests  to make sure we could comfortably layer elements on top of the final image. We also worked as a team to make sure this new image would fit with the existing Concur library of imagery. And of course, it needed to be beautiful and believable - it's a formal dinner!

Concur_RoughDraft_2-13

WHAT I LEARNED

This project was all about collaboration and process. It required the expertise and hard work from almost every department in the organization. As the creative lead I  honed my communication skills to make sure every contributor on the project was driving towards the same vision. I also developed a strong raport with the client. Keeping the Concur team clued in on our process allowed me to take greater risks in the design because of the level of trust between our teams.

This project is a success story because of the collaboration, risk-taking, and user-centered approach our team took. Ultimately, we were able to deliver a product that went above the client's expecatations and built a new offering for our team.