How we built a video demo for Interact

When it comes to presenting your best self to a conference audience, static slides don’t always cut the mustard. Cristiane Morandin outlines how video can be a much better option.

How we built a video demo for Interact. Image by Artal85, iStockphoto.com

If you work in financial services, you will have noticed the fast pace of change over the last few short years. Regulation is changing, innovation is blossoming from seemingly every corner, and technology is advancing at a rate of knots. Here at ieDigital, we’re using our skills, imagination and knowledge to create special experiences for our clients and their customers. Yet, imagination and skills are just as valid around the periphery of the product itself.

For instance, how can video, animation and UX skills also be used to enhance your marketing efforts, and for talking to decision makers, developers and C-level execs across your industry? In short, what’s the best way to make a dynamic presentation that shows off your company innovation?

Think about presentations and PowerPoint inevitably springs to mind. However, PowerPoint is just one option. There’s Keynote, Prezi, Adobe Spark, and even the likes of Evernote and Dropbox Paper have settings for quickly presenting to an audience. There are so many options. Your choice may depend on what you want to happen, how you want to demo your product, and how you want to interact with your audience at that particular time.

Videos have recently (and rightly) claimed a new place in the presentation stack. The great thing about video is that the world is your oyster, you can do so much with it, from simple text to animations, live recordings, music, and so on. And best of all, you can set it on a loop and just watch it play. However, creating video can be labour-intensive. A 30-second video, for instance, can take anything from a day to many months to create – it all depends on your message and style. A video requires good planning, and the more time you spend planning, the less time you’ll need to redo sections of the video in future, and the faster it will get done. Once finished, you can use it in your presentation and publish it for the rest of the world to see across multiple platforms.

Our demo video for Interact.

Video tools of the trade

As with presentation software, there are so many tools you can use for creating video. The tools we use regularly at ieDigital are Adobe After Effects and Adobe XD. Initial ideas, on the other hand, can be created anywhere, from sketching on a piece of paper with storyboard ideas, to the final details of your design, like in Photoshop, Illustrator, Sketch or whatever you prefer. Our own interface designs at ieDigital have recently been migrated to Adobe XD, and that was my starting point for the demo screens we recently produced for a big event we co-sponsored. Adobe Illustrator was also used for some of the graphic work, and the animation was brought to life in After Effects, because it’s simple to import from other Adobe tools and is very powerful for shape animation.

From our initial idea sketches, we progressed to planning the video itself, and this is primarily about understanding your audience. Our own project would be shown on a loop at a specific event, probably on a HD TV. People would pass by, look for a few seconds, perhaps stop for a while longer and hopefully start a discussion. And that’s the key to a good video presentation: It should be a good conversation starter! The story needs to be simple and easy to understand at any point. The length of the video isn’t a crucial factor, but the hours that go into producing it need to be considered carefully. I had roughly a week to put everything together, so in this case, taking the time to produce a longer video wasn’t a luxury I could enjoy!

We wanted to show three specific elements of what our software can do. This means three simple demos, each one having a particular persona to give the viewer context. We also wanted to incorporate some concepts of our new corporate video, which as of writing is still in production. This part was one of the most exciting for me, as I could play with something a bit more fun and ‘out of the box’.

Taking a design-first approach, and using personas

The demos themselves already had a defined design, as they are taken directly from our current Interact product, so these were the easiest to start with. We simply needed to decide which screens to use for Loan Apply, Savings Accounts Servicing and Collections. Each of these ‘flows’ would be presented in different layouts: for smartphone, for tablet and for desktop/laptop. Personas were then used to drive each demo flow, such as:

Ruby. She is young, uses her phone a lot, wants to save more so she can buy a new car.
Loan apply: Show the ability to scan an ID document to gather user details, plus facial scan to verify ID. The rest of the flow showed the standard Apply – removed any typing in text fields to keep the video from being too long. Ability to review/save/return to the application at any point, and finally submit. A nice user journey!

Frank. He wants to easily manage money wisely to provide for his family.
Savings servicing: Managing savings online – select new maturity options.

Susan, persona image created for ieDigital by Cris Morandin.

Susan. She is a single mum with a daughter, and is struggling to keep up with her bills while debt is increasing.
Collections: Show the setting up of a payment plan that will help her pay off the debt.

Of course, using personas to shape the narrative of the video is important, but equally important is keeping a close eye on brand guidelines. New ieDigital branding introduced in 2018 means new shapes and bright colours can influence the movement, vibrancy and life of the video. Based on the designs for our corporate video, I decided to incorporate these concepts in the transitions between each flow. As the shapes morph into new ones, it’s as if they create new opportunities and solutions for our users.

Making sure others understand it, to be able to pitch it

A product demo is only great if the message is clearly understood by everyone at ieDigital, and everyone at your own organisation. When it comes to video production, there’s a specific timeframe to pass on your message before the next one comes along, and the next, and the next. Resist the urge to cram your screen with lots of detail and text (no matter how much your sales team wants to!). The viewer will only look at one piece of information at a time, and if you have a product to show, that’s the main priority. I added some comment text on the sides of each demo, to help the viewer understand what they were seeing, and to slow the demo when we needed to highlight or emphasise key items.

When finishing a video (and if time permits), I like to render it and watch it the next day. This is like any creative process, such as writing, where it’s often beneficial to come back to it with fresh perspective. It’s amazing how many mishaps you pick up after a good night’s sleep! Once I’m happy, I show it to others in my team and watch their reaction. They are first-time viewers, and a lot of them are non-techies, so if they understand the user journey and are entertained and informed by the narrative, then it’s probably good to go.

Being screen-ready for the event

Let’s get down to export settings – the nitty-gritty of making sure the final product will look good at the event. I’ve left this until last in this outline of the process, but I actually begin my initial designs already knowing what the output channel will be, and the various sizes/dimensions involved. These could be demo screens, printouts, video equipment, and so on. In this scenario, the video would be displayed on a 4K screen, so I knew it had to look sharp up close, or at a short distance away. Graphics are perfect for this, as they can be created as vectors and resized as you please.

I’m happy with the video, and it comes in at just under four minutes. It flows well, and everyone I spoke to has been positive about it. It’s important to leave enough room in the process to make improvements suggested by someone else, which is great as long as they’re not huge! But, as a designer, you need to be happy with your own work.

Design is about functionality, but it’s also personal, and you can only be good at it if you’re honest with yourself about what works for you. When you’re presenting something, you’re not only presenting your product, you’re presenting yourself. It will never be perfect for everybody, but you can be sure it will always be for you.


Find out more about our digital solutions

Subscribe to our newsletter

Top stories -

Debt Collections Technology -

Mental health and financial services, with Merlyn Holkar

On World Mental Health Day 2019, Merlyn Holkar from Money and Mental Health was interviewed by Shaun Weston about...

Read more
Podcast -

Podcast ep 08: Tackling mental health issues in financial...

On World Mental Health Day 2019, Merlyn Holkar from Money and Mental Health talks to Shaun Weston about challenges in...

Read more
Banking Technology -

Open banking, and the importance of data transparency

FreeAgent CEO Ed Molyneux joins Shaun Weston to talk about open banking, data transparency, and SaaS for small...

Read more