Dynamics 365 has valuable services to offer businesses, but their marketing materials are often dense and unapproachable for their audience.
Create a scaleable and visually engaging web experience to market the Dynamics 365 offerings across 6 business scenarios to a technical decision-maker audience.
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
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 diagram
15-second attract loop and vision video
2-3 clickable pillars outlining key business highlights
Hero map of the six clickable scenarios
Detailed information and links to learn about speciifc topics
Overview of the selected scenario
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!
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.
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.