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.
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.
A demo worth
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.
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
GOALS OF THE DOCUMENT
View the demo at a macro and micro level
Alignment across the team from the beginning
Call-out and keep track of unknowns in the experience
in length between chapters
Place wireframes in context with other interactions
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.
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.
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:
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!
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.