cybersage hero image

Cyber Sage x Identity Force

Educating users via interactive content and gamification

UX/UI Designer

IdentityForce (IF) is one of the largest providers of identity theft protection (ITP) software in the industry. Their customers range from private consumers, to businesses and a variety of government agencies.

Over the course of two weeks, our team conceptualized a branded content micro-site with the aim of encouraging customers to take small actions that help them be more proactive in their own identity protection.

Team Members

Freddy Chen | Seemin Masood | Esther Kim | Jahla Pope

Tools

Sketch | Figma | Invision | Miro | Google Suite

Case Study Navigation

Discover | Competitive Analysis

Understanding business goal(s)

With identity theft already on the rise prior to the onset of the COVID-19 pandemic, there has seemingly never been a better time to invest in ITP.

We wanted to ensure we understood the ITP marketplace and IF’s respective positioning. We conducted a competitive feature analysis, researched a number of industry whitepapers, and ultimately discovered that:

IF is a big fish in a slowly growing pond.

cyber sage competitive analysis
Click to Expand View

Define | User Interviews

Validating our initial assumptions

As identity theft is a problem impacting consumers of all ages, we interviewed a wide variety of users with equally varying degrees of experience and exposure to identity theft. Some of our biggest takeaways were that:

Over

60%

of users had already experienced some form or incident of identity theft.

Despite

88%

of users not saving personal identifying information (PII) with autocomplete or form-filling features.

Yet

0%

of our users had any intent to purchase ITP unless they had greater financial assets OR another theft occurred.

Define | Solution Ideation

Deciding to pivot or not to pivot

It was evident our users harbored surprising doubts about ITP software. To break that perception, our team referenced products that hid learning within more engaging mechanics such as Duolingo and Buzzfeed quizzes.

The team came to the conclusion to design a gamified, unique micro-site experience and quiz for IF… right up until we discovered IF’s existing quiz.

identityforce quiz
Click to Expand View

Site Redesign and UX Overhaul

Can leverage existing style guide and information architecture

Little to no tech debt incurred or resource cost

Endemic user flow

New Micro-site and New Quiz

Can design new experience and user flow to fulfill business goal without compromise

Potentially significant resource investment and cost

Define | Usability Testing

Testing our way to clarity

The team eventually hit a point where we could see the merits of either idea and we couldn’t decide what direction to take. To break the stalemate, we decided to usability test the existing quiz.

We asked users to find the quiz and a specific article from the IF homepage.

Users averaged over

4 min

to find the quiz and a specific article due to the confusing hierarchy of information on the IF homepage.

“This quiz hasn’t told me anything particularly new or how to fix anything. It just says I’m at risk of identity theft and suggests I call an [IF] agent.”

“I don’t understand how this yes no [quiz] format is helpful or supposed to help me learn anything.”

New Micro-site and New Quiz it is!

Key advantages that played a critical role in our decision:

1) Lets the team develop a new brand largely free of association from IF

2) Allows the team to stay true to the original business goal of informing customers about preventative best practices rather than needing to sell IF products to them 

Design | Low to Mid-Fidelity Wireframes

Balancing information with ease of use

cybersage wireframe v1

Low fidelity wireframes iterating on progress bar design as well as displaying answers after every question

Dots provided faster understanding of how many questions were left vs using percentages

cybersage wireframe v2

Also experimented with displaying the questions all together instead of one at a time

Decided on one question at a time to allow users to spend more time understanding the answer(s)

Moving into mid-fidelity, we also tried implementing a “Previous Question” button and adjusting answer selection to bubbles to match the progress bar’s design.

Design | High Fidelity Wireframes

Defining a visual identity

During usability testing of the early high-fidelity prototype, users found it difficult to tell if their answer was correct or not.

As a result, we revised the answer heading and colors to reflect if their selection was correct or incorrect and changed the pie chart’s colors to match.

Deliver | Web Mockup

Selected hero screens

cybersage home
Click to Expand View
cybersage articles
Click to Expand View
cybersage article
Click to Expand View
cybersage forum
Click to Expand View

Next Steps

Committing to final design

Moving forward, our team would want to evaluate and test the actual utility of the forum and browser extension features. We would also like to implement an algorithm in the quiz to allow for more customized personality results.

Throughout the process, our team routinely checked in with one another to make sure we were all aligned on the same ideas. I’m confident we have produced a design that every member is proud of and feels accountable for in some way.

Thanks for reading! Need help solving a design problem of your own?

View Next