To Top

2015, UX Designer

Identity Smart

As the business grows, the team decided to separate their identity monitoring service as a stand-alone product. I was focusing on below three key items for this product revamp. This included participating in the development of new branding and style guide, conducting usability testing, providing high fidelity mock-ups and supporting engineers for development.

  • Checkout FlowMotivating users to complete activation with frictionless flow
  • Member DashboardUnderstand what users care and allow access to alerts
  • Landing PageInforming the visitors the value of the service.

Landing Page

The landing page needs to explain the value of identity monitoring service and how the users can actively utilize the service, therefore, we closely worked with the content team to convey the right message using the suitable visual elements. Below is finalized landing page wireframe after redesign.

Website user Flow

Checkout Flow

Version A: Combined Flow

As soon as the user finishes the payment step, activation completion was required for the full service coverage. The first version was designed so that the user provides the information before the payment gets completed.

To provide smoother experience, I came up with a set of interaction that will help users to digest forms in smaller chunks.

Input Field Prototyping, ObjectivesView the types of information to fill in at a glance. Input fields are grouped into related chunks. The label is always visible, even after they finish typing in. Show the current section, invalid values, and successful submission to convey the concept of progress.

This prototype is created using HTML/CSS and Javascript. *Individual input interaction was referenced from Google Material Design.

Version B: Separated Flow

In this version, service activation and payment step were separated. First, users create accounts, then submits the payment method. After this, they can complete the activation so that the full coverage can be started.

Member Dashboard

Enabling Prompt Reaction on Alerts

In previous dashboard, data were presented separately in multiple pages based on the types. Users could only view the total number of alerts from the dashboard. They were unfamiliar with the difference of some types, but strongly reacted to their credit score or social security number alerts which could be associated with their financial losses. Therefore, we decided to include types as part of the alert table.

  • Dashboard Redesign ObjectivesMake alert details accessible from the dashboard. Provide the next step for the alerted users. Reorganize navigation bar. Actively provide supporting information.
  • Dashboard Prototyping and Usability TestingI created an interactive prototype to test a few different approaches on the interaction of the alert table. I used the bootstrap framework for this prototype and tested internally.
  • Tested iterations and observationsTab implementation for archived information. This helped testers to find previously archived alerts. Notifying users when alerts archived. Testers were ignoring most of the notification. Providing category of the alerts. Testers paid more attention to noticiations related to SSN than Email breaches. Organizing the alerts from the latest to the oldest. Testers valued more when the information was organized by risk rather than by time.

This prototype was created using HTML/CSS, Javascript and Bootstrap Framework.
View Prototype

Side Project

Administrator's Portal

To help business owners get prepared for data-breaches, the team decided to build Administrator’s portal, which allows them to purchase a number of services to their employees and customers.

Admin's Dashboard flow

  • Following information is required to enroll: company name, email address, phone number, name, portal URL, pre-generated 1st password
  • The service charge will be billed to the administrator's email based on the number of redeemed accounts.
  • System will require matching PIN code with address to remove any abuse cases.

PIN Redemption Flow

  • The value of subscription should be explained in this flow.
  • By submitting correct PIN Code and account information, service activation can be started.
  • The user will be notified before expiration about continuing the service.

Rivermatters

Physical and Digital city planning game that markets H2Oh! exhibition at Carnegie Science Center.