Recognizing Banking Scams

Overview

This eLearning tab interaction helps learners become aware of common online banking fraud. Through interacting with each of the accordion sections, users learn how to spot and common methods for financial scams, as well as tips to make more informed decisions when online banking.

Target Audience: Online banking users seeking to enhance security and decision-making Tasks: Designing instructions, creating eLearning content, crafting visuals Software: Articulate Storyline, Adobe Photoshop, Adobe Illustrator

Problem and Solution

With the overwhelming amount of online communication within the financial world, it is difficult to be aware of the reality of many messages and choose the appropriate one. Awareness of common fraud techniques help make those choices easier to avoid, but only if the learner understands how to spot them.

I designed and developed this short eLearning tab and interaction to help users understand how to identify some of the most prolific scams and false communication. The accordion animation gives users an easy way to identify the different types of common scams and their characteristics, along with providing simple explanations and tips for users to help them when confronted with these fake banking offers.

Process

Storyboarding

Drawing from the US Bank website on how to understand and identify fake messages, I wrote out the text for the project. Adapting the most important information for each section, I wrote short, easily digestible points for each section. I focused on the most important aspect of each section as users only need to know the highlights in order to make better decisions when reading online financial offers.

I also provided a link to the US Bank web page for online security so users can delve deeper into the information, if needed.

Visual Mockups

I created the accordion using a vector graphic, using ‘banking’ colors, graphics, and fonts to fit my project. The color changes and animation movements for each section seperate the information visually so users can easily distinguish the parts.

Feedback given on the visual design included suggestions to include…

Development

The development of this project was relatively rapid as I was able to take direction from my previous projects in Articulate Storyline on how to create seamless interactive slide layers.

I started by creating the base layer and title screen in a similar format to the different slide layers to keep the design language consistent. I color-coded the vector graphics and moving bars to indicate that each section was clickable. When the user hovers over and selects a section shape, that shape responds with a corresponding color and slider movement. This visual cue lets users know which section they are currently viewing.

Takeaways

Knowing that this project could be accessed on multiple types of devices, from desktops to mobile phones, I was careful to display the information in a large, easy to read format.

As online financial messaging reaches almost every home, this project challenged me to present these fraud techniques in a readable and appealing manner that help users identify attempts at fraud and to make better online decisions.