OVERVIEW—
Project goal.
Identity Force is provider of identity-theft, privacy, and credit protection for individuals, businesses, and government agencies.
For this project, Identity Force's goal was to introduce ways to help their users be more proactive in their own identity protection.
My role.
PROJECT MANAGEMENT
With this large a design team, we set to work, allocating our responsibilities according to our strengths. I coordinated the team and project, establishing objectives and timeline for each phase of the design process using Trello.
PROJECT TYPE
Microsite and Chrome extension design
TIMELINE
4 week-design sprint
UX/ UI DESIGNERS
Seemin Masood, Esther Kiim, Freddy Chen, Jahla Pope
TEAM RESPONSIBILITIES
Research & testing, Journey mapping, Personas, User flows, Wireframing, Prototyping, Pitch Deck
TOOLS
Sketch, InVision, Figma, Miro, Trello, Google suite
UX RESEARCH
For the research phase, I developed questions and success metrics for user interviews and usability tests, and synthesized findings. Together with the team, I conducted the content inventory of the existing website, and ran interviews and usability tests to define our design goals, personas and journey map.
UX DESIGN
Using research findings to implement solutions is my favorite aspect of UX design and so I took on user flows, wireframing and prototyping within the design phase.
Disclaimer: All views expressed here are my own and do not necessarily reflect the views of the respective company.
DISCOVER—
Understanding the market.
INDUSTRY TRENDS
With online security being such a vast field, it was necessary for us to dive deep into industry trends and understand the extent to which the problem existed. We went in with some assumptions but were swiftly proven wrong with our findings.
The 30-39 age group reported the most (30.2% of all) cases of identity theft in 2019
Credit card fraud was the most common type of identity theft last year (2019) and more than doubled from 2017 to 2019
Identity theft protection services are used more by the consumer compared to enterprises
165 million records with personal data were exposed through data breaches in 2019
We wanted to ensure we understood the marketplace and Identity Force's respective positioning. After conducting a competitive & comparative feature analysis, we ultimately discovered that Identity Force is a big fish in a slowly growing pond.
Understanding our users.
As identity theft is a problem impacting consumers of all ages, we interviewed a wide variety of users with equally varying degrees of technological experience and exposure to online security risks. Our biggest takeaways ended up validating our initial industry trends research.
OVER
60%
of users had already experienced some form or incident of identity theft.
DESPITE
88%
of users not saving personal identifying information with autocomplete or form-filling features
YET
0%
of our interviewees had any intent to purchase identity theft protection services unless they had greater financial assets or another theft occurred.
DEFINE—
Bringing our users to life.
Using the data from the interviews and industry research, we created two personas- Michael, our primary persona and Christie, our secondary persona. The personas helped us prioritize features that would keep both groups' needs at the center of the design.
Michael, The Content Creator
needs: more information on preventing account hacks
wants: social media monitoring tools to protect his account
feels frustrated: that information on how to protect his personal information on different online platforms is difficult to find given identity theft protection services can be pricey.
Christie, The Consulting Firm CEO
needs: a low-effort, high impact solution for identity theft protection given lack of time
wants: employees to stay vigilant regardingtheir data when working remotely
feels frustrated: that there aren't good resources to learn best practices to reduce a company data breach
Why design a microsite?
The wide array of options in the nav bar, footer and Identity Force webpages made navigation difficult to find resources on online safety. But after an extensive content inventory of the site, we found a page buried deep within that offered a quiz and information on proactive online safety.
The question became: Do we redesign the entire website for better feature discoverability or design a microsite to address our objective of increasing users' knowledge on identity theft protection?
PROS
Allows the team to develop a new experience free of association from Identity Force, that stays true to the original business goal of informing users about online safety rather than sell Identity Force products to them.
CONS
Cannot leverage existing design system elements and patterns, which can result in a significant resource and time investment
Usability testing the existing site for clarity.
We could see merits of going either route. To break this stalemate, we decided to run usability tests and gauge the effectiveness of existing site design. The usability tests were unmoderated and included follow-up contextual inquiry, resulting in a mix of quantitative and qualitative data.
Identity Force's lengthy flow to find the quiz
Users took 4+ min to find the quiz and articles on online security due to the numerous options in the nav bar
TEST INSIGHT 1
60% users gave up when attempting to find the quiz and 40% gave up when attempting to find articles
TEST INSIGHT 2
Users who completed the quiz did not find themselves any more informed about best practices for security
TEST INSIGHT 3
How gamified apps inspired our design goals.
It was evident from interviews that users were unwilling to invest in proactive online security measures and tools. So for inspiration, we referenced products that hid learning within more engaging mechanics such as Duolingo, Buzzfeed quizzes and wellness apps to establish design goals for the new quiz.
Features:
A progress bar and strategic use of color and hierarchy will determine how easy it is to absorb information on the page.
EASY TO SCAN INFORMATION
Features:
Images and pie charts will offer a visual and engaging way to learn about online safety
ENGAGING AND FUN TO READ
INFORMATIVE AND USEFUL
Features:
Factual data and reference links will ensure users learn the importance of online safety from trustworthy sources.
DESIGN—
Moodboarding to establish the new brand colors.
BEFORE
The first moodboard we created was an orange-blue color palette. It looked too similar to Identity Force’s colors. We also decided not to use a serif font since we wanted Cyber Sage to feel modern.
AFTER
We still wanted to use a blue to relay a sense of security so we chose a dark blue-green with a soft, but bright green to balance it out. We chose a san-serif font to differentiate Cyber Sage as contemporary and approachable.
Designing the brand logo and visual identity.
To brand the microsite independent of Identity Force, we brainstormed on a name and landed on "Cyber Sage" with the tagline "Your companion for online security."
We played around with the logo, exploring different ways to relay our brand. Our final iteration utilized owl eyes to denote "sage" and the four concentric circles for the four ways we offered information on online security - the quiz, forums, articles and the Chrome extension.
Testing and iterating on wireframes.
With four minds working on improving the user experience, we went through several iterations before landing on our final design.
We ran two design studios — one by sketching and another with mid-fidelity wireframing to decide on the best layout for key screens. We also conducted two rounds of usability tests— first on a mid-fidelity prototype, and a second time on a high-fidelity one. Here are some key refinements we made:
BEFORE
1. The page displayed a percentage to show progress on the quiz, adding information clutter.
2. All questions were listed on one scrolling page, providing little room to inform users with the correct answer.
AFTER
1. We removed the % and added dots to the progress bar to visually communicate number of questions completed.
2. Each question now had a separate page so we could add facts about online safety based on the user's answer.
BEFORE
1. Users were confused on whether they selected the right answer as there was no clear indication.
2. User didn't find the facts useful to learn about online safety stating the text as "too long-winded."
3. The traditional pie chart took up more space and caused information overload.
AFTER
1. We added a subheading based on the answer selected to indicate "safer behavior" in blue and "risky" in red.
2. Copy for facts were edited to be more specific and to make learning of facts quick and easy for users.
3. We replaced the pie chart with a donut chart to match the minimal aesthetic.
Delivering the prototype.
With all iterations made, here are some of our key screens and the prototype walkthrough.
Cyber Sage quiz results
Cyber Sage - Chrome extension
Cyber Sage article on online safety
Cyber Sage forum thread on Bank Cards and Credit Reports
Prototype walkthrough of Identity Force microsite
DELIVER —
Potential next steps.
If the scope and time had allowed for it, here are some features we would've liked to test on our users.
FEATURE: OFFER MULTIPLE QUIZZES
Segmenting the quiz addressing different topics will allow users to evaluate their knowledge on a specific issues instead of their general knowledge on online safety.
FEATURE: AD-REVENUE MODEL
CyberSage is currently free and informational only but we would’ve liked to explore how it could be used to generate sales for Identity Force through ads and sponsorships.
FEATURE: TWO FACTOR AUTHENTICATION FOR FORUMS
We’d want to evaluate if forums were the preferred environment for users to discuss their online safety issues and if so, add 2FA for added security.