Role
UX Designer
Outline

2 Months
1 Designer
1 Developer

Live Link
Deliverables
  • User Research
  • Ideation
  • Wireframing
  • Screen Flows
  • Mockup/Prototype
  • Screen Flows
  • Site Architecture
  • Data Visualization
  • Visual Design
  • Interaction Design
  • Graphic Assets
  • Web Style Guide
  • QA Testing

Results

In the first 4 months after launch (March 2018), there was a 421% increase in landing page conversions.

Background

The redesign of IdentityGuard’s consumer-facing website encompassed not only the challenge of redesigning the B2C website, but also the visual rebranding of IdentityGuard based on user research. 

Identity Guard® is an innovative identity protection solution, built around the ever-changing world that we live in. After the last redesign of the B2C website, I worked with the Director of UX of IDG to develop a plan to take on a second redesign.

Brief

Goals

Create a website that has better conversion rates and highlighted the services that IdentityGuard offers.

Hypothesis

Uncover issues on the current website and addressing branding and messaging discrepancies will help not only conversion, but also brand awareness

After several redesigns of IdentityGuard’s consumer-facing website, it was unclear why sales were not improving—at this time we were lacking data behind design decisions to prove assumptions and learn from.

Outline

Research

  • User testing current website
  • Internal stakeholder interviews
Process Findings

  • Affinity mapping
  • User journey mapping
Ideation & Wireframes

  • Using themes & findings from research develop wireframes
High Fidelity Mockups

  • Mockups & interactive prototypes
  • Created Design System
Development Handover

  • Prototypes for interactive patterns
  • Design system
Dev Q/A Testing

  • Testing developed designs

Research & Findings

The data obtained from usertesting.com uncovered 3 particular themes.

What is IdentityGuard?

Many users were not aware of who or what IdentityGuard was

What is Identity Theft?

When asked ”what does Identity Theft mean” many users did not have an answer or had many misconceptions.

What is the ‘call to action’?

“What do I do now?”

”How much does this cost?”

“Is this an app?”

Outcome

Consulting with the legal team of IdentityGuard and brand guidelines, I proposed incorporating the outline of the brand’s logo in marketing pieces for brand recognition—which was approved. In addition to the shield, graphics and backgrounds were inspired by the slash marks in the product’s actual alert notification iconography.

Brand Awareness

Not only did we discover that users were not aware of the brand, but also (based on imagery and colors) we found that users were frightened by the thought of identity theft. This was the exact opposite of the mission of the brand–IdentityGuard wants its customers to have a feeling of being taken care of and to be more carefree with this always there service and knowledge.

Using these findings, the brand’s primary red color was pulled back—more calming blues and lighter colors were used.

For marketing materials, I adjusted the imagery to display happier people living their lives in everyday scenarios.

Knowledge

Two key findings were found here, users did not know what identity theft is or how it can be related to their everyday life. Educating our customers about not only what identity theft is but also to show how relatable and relative identity theft is to potential customers of various stages of life, family makeups and behaviors was a priority in designing and the content.

I collaborated with the content team to strategize digestible bits of knowledge to incorporate into the pages and I created graphics and iconography to visually explain key points.

Guidance 

One of the biggest issues uncovered during testing was that customers did not know what to do on each page. What was the purpose? What do I do now? What are you selling and for how much? This feedback was used to design the structure of each page, verbiage, and content of each page. With the knowledge of customer confusion of pricing, my team was able to approach key stakeholders by making our pricing structure more straightforward–which enabled us to be able to put pricing upfront. Prior to this point, the then complicated pricing structure was only unveiled after the user not only clicks “buy it now” but after inputting information.

Stronger brand knowledge with usage of more appropriate imagery, colors and content.
Slashes inspired by product’s alert notifications
Page structure, clear and concise verbiage, and content changes. Upfront pricing structures were displayed on every page with the direct call to action of starting a membership
Educating our customers about not only what identity theft is but also show how relatable and relative identity theft is was a priority in designing and content.

Before & After

#364449

#663399

#2274B0

#9EABB0

#F3F4F5

#15B869

Open Sans Bold

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Open Sans Semi Bold

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Open Sans Regular

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z