Hero Security Center

Security Center

B2C redefined user experience allow customers to find information quickly and easily

Project Summary

Not Disclosed

UX/UI Designer

Sr. Management, Product Owners, Project Managers, Other UX Designers, Business Analysts, Engineering

Security Center

Bank and investment customers were concerned with recent security breaches. Security documentation is hard to find on the both the public and authenticated areas.

  • Long, flat and wordy security area
  • Outdated interactive models
  • Lack of navigation to different security features
  • No clear call-to-actions
  • Lacking interaction
  • Security info is buried below the fold
  • Public vs authenticated Security Center differ

  • Modular sections offer manageable and easily consumable details (tabs, cards, accordions etc.)
  • FAQ section may offer answers customers seek
  • Search feature for Security Center
  • Promote the Security Center in the public space/login area
  • How-to videos
  • Leverage social media for security alerts/notifications/emails/newsletter/blog posts
  • Leverage bank side resources for security
  • Provide incentives (rewards, points, free stuff, etc.) for customers who complete security training

Process

Process Info Graphic

The design process is not a linear step-by-step process. Instead, each part represents one of many moving parts so there is no start or end -- it is fluid, evolving and never "complete". However, the core of any project is understanding as depicted in the model above. Read on to learn how I applied this framework to Security Center.

  • UnderstandLeverage existing set of personas to understand audience
  • DefineCollaborate with key stakeholders to define project goals, set expectations, determine technological limitations and set scope and when appropriate interview users and SMEs
  • Ideate; PrototypeCreate rough comps to define design direction using Client brand guidelines
  • PrototypeCreate low-fidelity wireframes to determine and validate user-flows
  • Ideate; Prototype; TestCreate a high-fidelity prototype used in demos and user testing
  • Ideate; Prototype; TestAnalyze new product backlog items and design new features
  • DefineUpdate prototype and design system from new requirements
  • TestVisual QA in staging and UAT environments after sprint completion

User Scenarios

  • User goals:invest money safely in digital era
  • Motivations:save money for retirement, home, car etc.; passive income
  • Pain Points:hard to find security features; no clear CTAs
  • Tasks user wants to achieve:research; sign up/subscribe to security alerts; view any security alerts; in event of competitors or internal breach, what information is available to ease and ensure user perception; how to make my account more secure
  • Opportunities:Current IA is flat and currently doesn't allow for content drill-down and searches
  • Notes:First iteration is a reorganization of current content into more digestible chunks. Would this be the time to update the content as well? What about SEO?

New/existing client

  • As a new or potential client, I would like to learn about different security features offered by Client
  • As an existing client, I understand the Client culture really well and have been advised by my FA to go digital

John - New customer who has inherited a fortune. Pretty tech-savvy, shops online, likes social media. Outside of the Bill Pay feature at current bank, John has never done online banking/investing. Privacy is a concern. John has been shopping around for best investment options. He is concerned about data breaches/online security.

User Scenario Flow - John

2-step authentication is buried behind a one-pager (Digital Defense Keeping Your Family Safe Online) which I found by chance when searching. User needs to scroll to find sought after section on this feature once on the landing page

Jane - Is a potential customer shopping around for banks with heightened security protocols. Her current bank had a recent data breach and is looking to switch banks/broker. Jane is experienced with online banking and investing -- wants to know how Client handles data breaches. What is Client saying about this?

User Scenario Flow - John

Existing client

  • As an existing client I would like to learn about different security features offered by Client.

Mary Jane - is an existing customer and online user at Client. Mary is comfortable navigating the Web, social media and MyClient.com. She is concerned about recent data breaches and wants to "beef-up" security on her profile. She would like to subscribe to security alerts and change her password. Mary Jane would like to access how-tos, video and blogs on client.com that show her how.

User Scenario Flow - John

Wireframes

Responsive Web

Wireframe Responsive Web

Mobile

Wireframe Responsive Web

Results

Results All

Results Mobile