Delivering an Interactive Demo with a Compelling Story
Project Overview:
A Fortune 50 company was looking to drive Business Decision Maker (BDM) interest in their product. With operations moving towards being mostly remote, the client needed to transform its marketing and sales approach to a digital form.
Our team developed an interactive demo for one of the client’s solutions. The storytelling approach revolved around the ‘day-in-the-life’ of the solution end-user, thus illustrating a digital transformation that improves productivity and promotes sustainability. A client representative presented our demo at the company’s town-hall in early 2022.
Role: UX/UI Designer
Platform: Microsoft Azure
Tools: Adobe XD, Adobe Illustrator, Adobe Photoshop, HTML
The Process:
STORY PATH
Research was conducted to better understand the end-user, the problems they faced, and the technology designed by the client to solve these problems. This led to clearer insight into the day-in-the-life of the end user, resulting in a compelling story that dives into a day in the user’s life as they utilize this new tech.
EXPLORATION
We explored different illustrative and pictorial styles to populate the demo website, ensuring that the story focused on the client’s mission and goals. We presented different options to the client to better gauge their expectations and preferences.
PROTOTYPES
Since the client’s preference was a more photo-realistic approach, we acquired photographic imagery to support our story and bring the user’s story to life. Transitions, animations, and vibrant assets allowed the demo to have a visually-rich narrative to support the demo presenter.
PRODUCT DEVELOPMENT
With an Adobe prototype in place, it was time to develop the demo in browser-based HTML. I supported the developers with required photography, visual assets, and color/sizing specifications, while also inspecting the browser demo to ensure quality and refinement.
The Final Solution:
Our team was proud to have our demo showcased by the client in their town-hall meeting. Below are some gifs of the interactions in the Azure-hosted demo website. The demo included a navigation bar at the top to help the user progress through the story. For proprietary reasons, the content has been adjusted and white blocks have been included to cover brand names.
Takeaways:
Interactive Design: Don’t overdo it! A simple, compelling story with a guided flow goes a long way in capturing the user’s attention
Gestalt Principles: User experience goes a long way once you incorporate visual perception principles into your work. Again, don’t overdo it. The simpler the idea, the easier it is for users to connect the dots.
Style Guides: Clients love to see their brand come to life. Use the brand guidelines as a foundation for your prototype, and let your curiosity take the design further.
Adaptability: The unexpected can happen. Balancing design principles with business value and client needs takes you a long way, so be ready to read the circumstances and adjust your design approach.