DYNAMICS INTERACTIVE EXPERIENCE

Showcasing industry use-cases through
a layered multi-media web experience 

CLIENT

YEAR

Year

Fall - Winter 19/20

THE SITUATION

Dynamics 365  has valuable services to offer businesses, but their marketing materials are often dense and unapproachable for their audience. 

THE REQUEST

Create a scaleable and visually engaging web experience to market the Dynamics 365 offerings across 6 business scenarios to a technical decision-maker audience.

MY IMPACT

I lead the visual strategy and art direction for a team of 7.  Working closely with our technical strategy team and our creative team I delivered one fully-responsive interactive site with custom animations, bespoke interactions, and a unique content layout. 

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 diagram

Icons-09

LAYERS 

Numbers-15-10

HOOK

15-second attract loop and vision video

Numbers-15-13

PILLARS

2-3 clickable pillars outlining key business highlights

Numbers-15-11

EXCITE

Hero map of the six clickable scenarios

Numbers-15-14

SUBPILLARS

Detailed information and links to learn about speciifc topics

Numbers-15-12

SCENARIO INTRO

Overview of the selected scenario

Numbers-15-15

NEXT STEPS

A link back to the homepage to explore other scenarios

WHY LAYERS? AND WHY THIS DIAGRAM?

Our source content came from a series of 100+ slide decks (aka extremely detailed). Depending upon the setting and the user, users will want to explore the content at various levels of detail. Rather than bombarding someone with all the details upfront, I decided it would be best to break it down into friendly chunks. I made and printed this user flow to remind the client in reviews what level we were at. It helped us stay on track!

Iteration station

Iteration1

CONCEPT ONE: EXPANDING DRAWERS

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.

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.