GoPhish

Rethinking cybersecurity education through positive behavior change.

Time

10 Weeks

Team

1 Project Manager

2 Product Designers

2 Developers

Role

Research

Visual

Strategy

Deliverables

Design System

Figma Prototype

We designed GoPhish - a web app that educates the Dartmouth community about cybersecurity.

This was a project at the DALI Lab for our client, the Dartmouth Information Technology and Consulting (ITC) Office. As the senior designer on the team, I researched and designed the education module, rewards system, launch strategy, and the landing page. The other product designer and I collaborated on the rewards and quizzes screens, working together to conduct user testing and make final design decisions as a team.

Background

Phishing is a type of social engineering attack that uses emails, phones, or texting to obtain personal information.

65%

of organizations have been phished in the US.

Proofpoint 2020

96%

of phishing attacks happen by email.

Verizon DBIR 2020

Our clients noticed an increase of phishing attacks targeting Dartmouth, and reached out to the DALI Lab to create a solution.

PROBLEM

The Dartmouth community is hindered from learning about cybersecurity due to non-victim mentalities, time limitations, and dull training modules.

While undergraduate students believed that they were "too smart to get phished," faculty members noted that their limited time decreased their motivation to participate in additional training. Meanwhile, administrative staff that have experienced prior cybersecurity training found them to be boring.

OPPORTUNITY

How might we motivate the Dartmouth community to educate themselves about phishing and participate in reporting?

Solution

GoPhish

An educational web app that trains and motivates users to detect and report phishing attacks.

Phish Users First

Users didn’t believe they could be victims of phishing. To challenge this mental model, the user experience begins by sending a highly credible phishing email from the Dartmouth ITC Office, which redirects users to the GoPhish landing page.

Forward Reporting

Dartmouth has a diverse population with different mail clients, so we consulted with our developers and decided that the most scalable reporting mechanism would be email forwarding rather than an integrated report button. Each forwarded phishing emails awards the user with points, reinforcing the positive behavior of reporting.

Interactive Quiz

An element of gamification is added through an interactive clickable quiz. After a short informative introduction, users are prompted to identify phishing indicators within emails. The quiz reinforces material comprehension, and trains users to identify phishing quickly.

Rewards System

The motivational rewards structure engages users through a points-based system. Users can obtain points by completing education modules with the interactive quizzes and reporting phishing emails in their inbox.

GoPhish

Protecting the Dartmouth community through gamifying cybersecurity education.

Process

Research

Competitive Analysis

We began by researching the existing cybersecurity education tools and their approaches to cybersecurity education. We found interesting features from different competitors, but we first needed to find out whether these features would be applicable to our specific user demographic of the Dartmouth community.

Research

User Interviews

In order to gather deeper insights the Dartmouth community, we conducted in-depth user interviews with:

Students

Faculty

Staff

Our questions sought to gather information about the current user experiences and perceptions of phishing and emails, the limitations of existing phishing education methods, and the pain points that barred users from engaging.

To identify key themes and pain points, we used affinity diagrams to organize interview insights.

Research

User Personas & Empathy Maps

Based on user interviews, we created empathy maps and user personas that helped us further understand our target users and empathize with their perspectives.

DEFINE

Needs

From the extensive user research conducted across campus, we found key pain points that illuminated the current behavioral attitudes surrounding cyber security.

Pain Point #1: Reporting

Many students, faculty and staff don’t know how to report phishing attacks.

Pain Point #2: Mental Model

Students believe that they are “too smart to get phished”.

Pain Point #3: Time

Faculty have very limited time and motivation to participate in additional training.

Pain Point #4: Training

Staff generally want to be better educated in cyber security, but find the training modules are boring.

DEFINE

HMW Statement

How might we motivate the Dartmouth community to educate themselves about phishing and participate in reporting?

Ideate

Goals

Simple

User’s interactions should be simple, effortless, and straightforward, so users can quickly comprehend the structure of the platform.

Engaging

Users should be engaged, and the interactions should be reinforced by positive feedback that motivates long term behavioral change.

Ideate

Brainstorm

After synthesizing the insights from users, we brainstormed potential design solutions, went through rounds of down selection to decide on the core features, and sketched a preliminary user flow.

Ideate

User Testing

Based on the brainstorm, we conducted qualitative user testing through interviews to gather feedback on our ideas. We primarily wanted to understand the best structure to proceed with for the education, points, motivation, and reporting aspects of our platform.

Ideate

Insights

Educational Game with Bullet Points

Users didn’t like videos, but preferred basic bullet points to skim quickly.

Users preferred a clickable game to videos or readings.

Phish Users

Users didn’t want to spend time getting educated, unless they had prior experience being phished.

Reporting

Users wanted a confirmation email, and an email to detail next steps.

Users would forward emails if it was an easy email to remember or an autofill in Outlook.

Points Based Rewards

Users thought tying education into a point system would give motivation to engage.

Users liked individual prizes over a contest, as “no one would care who’s the #1 phishing reporter“ on a leaderboard contest.

Ideate

MVP Elements

Given the tight constraints of time for this project, we consulted with the developers to consider the functionality limitations of the development. As a team, we were able to take user insights to narrow down our MVP elements, and discern which development functionalities were reach goals and out-of-scope features to decide which key design features to prioritize.

Ideate

Site Structure

This allowed us to finalize the structure and features of GoPhish.

PROTOTYPE & TEST

Visual Design System

I constructed the style guide before moving unto creating my designs, as I wanted to keep the constraints of utilizing the preexisting Dartmouth style guide in mind.

PROTOTYPE & TEST

Low Fidelity Wireframes

Top Navigation VS Left Navigation

To quickly evaluate my ideas, I translated my ideas into low-fidelity wireframes. I experimented with how to visually organize the modules. To decide between the horizontal and vertical scrolling options, I decided to run a quick A/B Testing to evaluate which option was the most visually appealing and practical for users.

Usability Findings - Users preferred Option B because organizing the modules with a horizontal carousel increased hierarchy, allowing the modules to feel less overwhelming while reducing decision paralysis.

Rethinking Education Page Content

After consulting with the stakeholders on the educational content, we realized that cyber security education was simpler than we initially envisioned it. As there wasn’t enough content to organize the modules by subjects, we decided to consolidate education into interactive quizzes that reinforced phishing detecting behavior, and consolidated the modules into interactive quizzes. Additionally, we replaced the second menu of subjects with a progress bar that encouraged users to complete all quizzes.

PROTOTYPE & TEST

High Fidelity Prototype

Designing the Gamified Education

One of the main pain points that users experienced was that the existing educational anti-phishing videos were boring. So we decided to add an element of gamification through introducing an interactive quiz that was reminiscent of the New York Times “Copy Edit This!” quiz.

We found through user testing that users preferred a clickable game and basic bullet points to skim quickly, the interactive quiz begins with a short introduction of key phishing giveaways, then displays examples of phishing emails. This prompts the user to identify the regions that seem indicative of phishing, and rewards the user with points for each quiz completed. Users found the quiz to be fun and reminiscent of a scavenger hunt.

Designing the Rewards Structure

Although our clients were initially excited about a contest, in which a big prize would go to a sole user who reported the most phishing emails, we found that users would be more motivated by instant gratification with smaller, more attainable prizes. Drawing inspiration from the College Pulse, a popular survey platform at Dartmouth, we designed a motivational structure that interested our users by utilizing a points-based reward system.

Designing the Landing Page

The landing page describes a high-level concept of phishing and introduces the users to the simple reporting mechanism, the education modules, and the rewards system. The landing page was designed by incorporating the launch strategy features of phishing users first, and a simplified reporting mechanism.

A key insight from user testing was that users didn’t want to spend time getting cyber security education, unless they had prior experience. Therefore, the users are first phished by the Dartmouth ITC Office in a credible email, which redirects the users to the landing page. Through this experience, our goal is for users to understand that they too, are possible victims of phishing.

We found through user testing that users would forward emails if it was an easy email to remember or an autofill option in Outlook. And given the constraints of different mail clients being used within Dartmouth, we decided that the most scalable reporting mechanism would be to forward emails to an email, phishing@dartmouth.edu. Each forwarded phishing emails awards the user with points from in the rewards system, reinforcing the positive behavior of reporting phishing emails, while the quick mechanism considers the busy schedules of users.

PROTOTYPE & TEST

Usability Insights

With our high resolution prototypes, we conducted usability testing with undergraduate students, faculty, and administrators. Based on our findings, we made the following changes to our prototype:

1. Displaying Points & Completed Quizzes

We found that users were confused when the points were displayed within the navigation bar, as it seemed clickable. So we changed our design, utilizing hierarchy to make the points bigger and independently positioning the points. This maintained the gamification aspect of visually seeing points increase while eliminating user confusion. We also changed the button state for completed quizzes, making it clearer which quizzes were already completed.

2. Quiz Error Feedback

Usability testing showed users were frustrated when they didn’t have an error feedback, because the users believed their choices were correct and the system was failing to recognizing their choices. Therefore, we implemented overlays that provided error feedback to users.

3. Rewards Progress Bar

From A/B testing, we found that users were more motivated by displaying the redeemed prizes with progress bars. Users found that having a visual representation of the prizes conveyed more strongly that the prizes were attainable, since other members in their community were able to win them.

Reflect

Takeaways & Next Steps

GoPhish was created for the Dartmouth ITC Office to educate, train, and raise awareness on how to detect and report phishing attacks. Our clients were very excited about our final product, and for the upcoming full launch at Dartmouth. This was a first term project in the DALI Lab, and it is scheduled for additional terms of design to develop the administrative user interface.
‍
After launch, GoPhish would benefit from conducting more user research and iterating on the designs as needed. The long term vision of GoPhish is a scalable package that is interoperable and can be repackaged for other institutions to spread phishing awareness and education.
‍
From working together with developers, designers, and a project manager under a tight deadline of 10 weeks, I learned valuable lessons about the limitations of bringing designs to real life, and found that additional constraints from a development perspective helped fuel more creativity.

Thanks for reading!

Check out more projects:

Creating a better way to manage healthcare.

Web + Mobile | Research, UX, Visual

Eliminating separation anxiety in children.

Tablet | Research, UX, Visual