Project OVERVIEW

The Kick-Off

Project Type:

Timeline:

Role:

Tools:

Academic Feb-May 2021

8 Weeks

UX Researcher, Design Strategy, UX/UI Designer

From Feb 2021-May 2021, I completed a full-time UX Design Bootcamp with BrainStation to obtain a Diploma in UX Design. During the Bootcamp, I was tasked with completing an 8-week capstone project to create a compelling and practical digital experience. This experience was an end-to-end UX design process that took me from idea generation and research to developing a mobile app interface and brand.

VIEW PROTOTYPE

My Approach to the Challenge

When approaching this design challenge, I leveraged design thinking methodology to ensure my focus throughout the process was on the people I was designing and creating for. I wanted my project to be economically viable and technologically feasible, but most importantly, I needed it to be desirable and address real human needs.

Empathize

Secondary Research

Primary Research

Problem Space

DEFINE

Personas

Experience Map

Opportunity Selection

IDEATE

User Stories

Task Flow

PROTOTYPE

Low-Fi Wireframes

Mid-Fi Wireframes

TEST

Usability Testing

Incorporating Feedback

Hi-Fi Wireframes

REFINE

Visual Identity

Hi-Fi Prototype

Human-centered design process

Discovery of problem space

Dipping my Toes in Digital Privacy

As a young adult and a classified digital native, I had never put much thought into digital privacy until asked to create a design that solves human problems. While digital privacy and security is something that my peers and I have always brushed off, I believe that it will be a key driver that reshapes the digital landscape within the next 5-10 years. This inspired me to look deeper into how digital privacy is impacting our lives and what we can do about it.

SECONDARY RESEARCH

Digging Deeper into the Problem

Canadians' concerns for their digital security and privacy are growing exponentially. With the transition to more work-from-home lifestyles, Canadians have been increasingly dependent on the digital world, which has led to an unprecedented amount of attacks on their data security and privacy.

92%

of Canadians expressed some level of concern about the protection of their privacy.

Office of the Privacy Commissioner of Canada, 2019

And who are most vulnerable? While Gen Z's are the most tech-savvy, they are also the most willing to trade their personal information for convenient and personalized experiences. However, when it comes to protecting their data, the effort and complexity required to maintain safer online habits are significant barriers for Gen Z's.

54%

of Canadians Gen Z’s say it takes too much time to manage their data across every app and service.

Help Net Security, 2021

Before Gen Z's start to enter into the "real-world" where the threats of sharing personal information online hold much more gravity, it is crucial for them to develop safer online habits.

DESIGN CHALLENGE:

How might we help Gen Z’s who share personal information online, learn and execute safer online habits in order to reduce the risk of their personal information being misused?

PRIMARY RESEARCH

Understanding the User

To understand the “why” behind the problem, I conducted five 30-minute interviews with Canadians between the ages of 18-24 who share their personal information online. I wanted to understand their attitudes and feelings towards digital privacy and explore how they currently manage their online information.

After completing the interviews, I combed through the interview notes, classified quotes as pain points, motivations, or behaviours, and used empathy mapping to extract six main themes and insights:

EFFORT

Individuals demand simple and easy experiences

Managing digital privacy is far too complicated, laborious, and boring.

KNOWLEDGE

Individuals want to know “what” and “how”, but the information is not accessible

A lack of easy access to digital privacy information has led to a major gap in knowledge about personal information collection, usage, threats, and protection.

CONCERN

Perceived online vulnerability correlates to stage in life

Given Gen Z’s “early” stage of life, these individuals do not feel that their personal information is at risk, creating a low level of concern.

Icon: Speakerphone with noise coming out

AWARENESS

Increased awareness leads to a higher willingness to learn

Increased awareness of the risks and threats of sharing information online encourages individuals to learn how to engage in safer online habits.

ignorance

Ignorance is bliss

When it comes to digital privacy and information usage, individuals would rather not know what they don’t know.

mindset

Approach privacy with a reactive mindset

Due to lack of awareness and concern, individuals tend to use a reactive vs. proactive approach when dealing with their digital privacy.

KEY INSIGHT: EFFORT

While increased education/knowledge and significant concern may encourage individuals to engage in safer online habits, the most significant barrier preventing these individuals from managing their digital privacy and engaging in safer online habits is the effort required to do so.

Due to the boring nature of digital privacy and the complicated ways companies communicate privacy, it is more convenient for individuals to ignore safe online habits. If engaging in safer online habits was simple, digestible, and user-friendly, these individuals would do it.

PERSONA & EXPERIENCE MAP

Uncovering the Moment of Opportunity

After synthesizing my interviews into insights and pulling out a key insight to focus on, I developed a persona and experience map to ensure my design process was driven by my target user’s goals and behaviours. These artifacts helped me:

1

Build empathy for the user by exploring their goals, frustrations, and behaviours.

2

Identify opportunities to intervene with my digital solution.

3

Create an optimal user experience that achieves the user’s goals.

My primary persona, Katie Robertson, is a 23-year-old young adult who constantly shares information online and values her digital privacy and security but needs an effortless and convenient way to engage in safer online habits.

Primary Persona: Katie Robertson

Using Katie, I developed an experience map to understand her end-to-end experience for sharing information online. By putting myself in the users shoes, I was able to identify moments of opportunity where I could intervene with my digital solution.

Experience Map for Katie Robertson

Having a deeper understanding of my persona, her main pain points, and the areas of opportunity highlighted in the experience map, it was important to revisit my "How Might We" statement and make any necessary revisions to ensure that it still best framed the problem at hand:

REVISED DESIGN CHALLENGE:

How might we make engaging in safer online habits as simple and easy as possible for Gen Z’s (aged 18-24) who share personal information online in order to reduce the risk of their personal information being misused?

USER STORIEs & TASK FLOWS

Creating Safer Account Management Habits

In order to begin brainstorming the functionality and features of my solution, I created several user stories under different epics and initiatives that followed the structure:

“As a user I want to action so that I benefit.”

Given that my problem space was so expansive, I looked back at my primary and secondary research to see where the biggest opportunity was in order to identify an initial focus. My findings showed that Gen Z’s feel that managing data across all accounts is too laborious and complicated, so I narrowed in on developing user stories within the initiative, Safer Account Habits.

Chart: Narrowing down a specific initiative

PRIMARY TAsK:

A crucial first step to creating safer account habits is a users awareness of all of their online accounts. Using multiple user stories from the epic "Account Awareness”, I created a primary task flow of: creating an overview of companies the user has registered accounts with.

“As a young adult sharing personal information online, I want to view a comprehensive list of all my online accounts so that I can be aware of all my accounts online that could be collecting my data”

“As a young adult sharing personal information online, I want to find accounts by email address so that I can minimize time spent finding my online accounts”

*For the case study, I highlighted the two user stories that best represented my products value proposition in the primary task flow.

Primary Task Flow: Creating an overview of companies the user has registered accounts with

SECONDARY TASK:

As the user achieves the primary task flow of creating an overview of companies they have registered accounts with, the user gains awareness of the true scale of their online profile. As a secondary task, users need to be able to manage and delete accounts to clean their online profile. Using multiple stories from the epic, “Account Controls”, I created a secondary task flow of: cleaning online profile by deleting unnecessary accounts.

“As a young adult sharing personal information online, I want to delete accounts associated with a specific email so that I can save time deleting accounts that have a compromised email”

“As a young adult sharing personal information online, I want to delete accounts by date last used so that I can minimize my effort spent deleting unnecessary accounts”

*For the case study, I highlighted the two user stories that best represented my products value proposition in the secondary task flow.

Secondary Task Flow: Cleaning online profile by deleting unnecessary accounts

SKETCHES & WIREFRAMES

Exploring Solutions

Once I was clear on my primary and secondary task flows, I used paper and pen to sketch out possible solutions. Drawing inspiration from other existing UI components on Dribbble and looking at features from competitor apps like Jumbo, SAFE Me, and MyPermissions, I started sketching out different ideas. Below are my top sketches that were translated to wireframes.

App Idea: An IOS app that acts as a privacy assistant, making it simple and easy for Gen Z’s who share information online to recognize and develop safer online habits.

Sketch #3: Populated Account Summary Page

Sketches that were translated to wireframes

From the series of sketches I developed, I highlighted different ideas, features, and components to incorporate into the first round of low-mid-fidelity grayscale prototypes. Developing and working with grayscale prototypes allowed me to quickly iterate and test out components, layouts, information hierarchy, and screen flows before adding a visual identity.

Version 1 of grayscale wireframes

USABILITY TESTS (TWO ROUNDS)

Gathering Feedback

During the wireframing process, I conducted two rounds of usability tests on ten different individuals to obtain practical, real-time feedback that was incorporated to improve the design and deliver a more frictionless user experience. The testers were asked to complete a set of five tasks while navigating through the prototype, which will helped me observe how real users interacted with the app and see if the app’s functions and features helped the user achieve their goals.

Major Change #1: Accounts Homepage

Opening up the app to this page, testers were not immediately clear that this was an accounts summary page due to an unclear page header, illustration, and copy.

Rephrased “Account Summary” to “Online Accounts Summary” to be more indicative that this is the accounts summary page.

Reduced size of icons and text in bottom navigation as they were too large on mobile view. Added hotspots for easier navigation.

Version 1

Version 2

Version 3

Updated illustration and descriptive copy to better represents the task flow.

Major Change #2: Online Accounts Summary Page

The accounts summary page was confusing to users for many reasons: 1) testers didn’t understand what the pie chart graphic was trying to communicate, 2) the call-to-actions were not clear or bold enough, and 3) testers weren’t sure who or what the recommendations were for.

Updated pie chart design and added additional visual signals to show the functionality.

Added descriptive copy to highlight what the recommendations are and updated fidelity by adding illustrations and copy.

Version 1

Version 2

Version 3

Changed positioning of both call-to-actions, drew more attention to “View” call-to-action, and rephrased “Find More Accounts” call-to-action.

Major Change #3: Your Online Accounts Page

On the online accounts page, testers felt a lack of control as they weren’t easily able to identify the filter function and were unable to sort accounts. Testers were also worried about accidentally deleting important accounts when swiping to delete and feared that it could get laborious when deleting multiple accounts.

Updated filter icon and placement to make it more obvious to users.

Changed method of deleting an account from swipe to delete to select to delete.

Version 1

Version 2

Version 3

Added sort by functionality.

After incorporating all of the feedback from the user testing and resolving the most pressing usability issues, I landed on my final grayscale prototype, prototype version III.

Version 3 (Final Version) of grayscale wireframes

VISUAL IDENTITY: JOURNEY TO HI-FIDELITY

Gathering Feedback

After completing user testing, I enhanced the user experience by translating my grayscale prototype into a high-fidelity prototype by developing and applying a visual identity to my digital product.

To establish my products’ brand, I began writing a list of keywords that embody the brand’s essence and define the personality of the product.

Secure

Trust

Protected

Empowered

Confidence

Freedom

Clarity

Simple

FRIENDLY

Using these keywords, I searched for inspiration and created a mood board, colour palette, and typography system that evoked a simple, modern, innovative, and trustworthy feeling.

Primary Colours

#1821CC

#FFFFFF

Secondary colours

#1ED9C6

#010D55

#1821CC-
#1ED9C6

TERTIARY COLOURS

#1E69D9

#49D4AA

#FD7983

#D94042

FUNCTIONAL COLOURS

#404980

#878CA8

#B8BBCC

#E9F0FB

#F7FAFF

LOGO TYPEFACE

PRIMARY TYPEFACE

Protekt’s Visual Identity

Word mark Exploration

When exploring an app name and icon, I wanted to create something unique and memorable to encourage easier word-of-mouth. Using concepts and words surrounding security, trust, protection, and care, I generated a list of potential brand names to test on users: Profil, Tuitio, Introl, Cura, and Protekt. Protekt resonated the best with users, evoking a modern and “tech-y” feel while also signifying the purpose of the app. After numerous iterations, I landed on the final word mark you see below.

To create a distinct word mark, I replaced the letter “o” with a gradient fingerprint and modified the letter “t” to create a seamless flow between letters. The fingerprint acts as a unique icon, responsive word mark and embodies the idea of a digital identity.

Primary Word mark

App/Social Icon

Reverse Mono Word mark

Gradient Mono Word mark

Reverse B&W Mono Word mark

High-fidelity prototype

Enhancing the User Experience

Injecting my brand’s visual identity into my prototype was a challenge that I didn’t anticipate. Properly balancing out the colour ratios, establishing a type hierarchy that works on mobile and is accessible, and designing a unique identity required many tries and rounds of testing.

After countless hours using the Figma mirror app, screen recording, and getting feedback, I created my final UI prototype and developed an accompanying UI library that uses Brad’s Frost Atomic design system.

Final Interactive Prototype

VIEW PROTOTYPE VIEW UI LIBRARY

Looking at the high-fidelity prototype, we can see the three main benefits that Protekt offers:

Feature 1: Finding online accounts.

Hi Fi Mockup: Empty Accounts Summary Page

Hi Fi Mockup: Find your Online Accounts Page

Hi Fi Mockup: Searching for Accounts Page

When interviewing users, a key pain point raised was that they had no idea about the true scale of their online profile and had no easy way to find out. With Protekt, users can easily and quickly find all of their online accounts connected to a specific email, username, or phone number to build a comprehensive understanding of their online profile.

Feature 2: Viewing & managing online accounts.

Hi Fi Mockup: Populated Accounts Summary Page

Interviewees indicated they were in the dark about managing their online accounts and data. Protekt makes managing accounts easier by providing users with a summary of accounts, useful filtering and sorting options, and allows them to control their data by deleting accounts and requesting data removal in-app.

Feature 3: Recommendations to improve account security.

Hi Fi Mockup: Populated Accounts Summary Page- Recommendations section

Hi Fi Mockup: Recommendation Delete accounts Page

Hi Fi Mockup: Accounts Deleted Confirmation Page

Another key finding from my interviews is that convenience is king. Users want a solution that doesn’t require them to change their current behaviours or add any steps to their online routine. By providing users with recommendations and automated actions to improve their online security, the app serves them digital security and privacy on a silver platter.

TAKING PROTEKT TO MARKET

Building a Marketing Website

To bring Protekt one step further to market, I explored what a marketing site for this mobile app would look like. To create a compelling and responsive marketing site, I started out with UI inspiration, created sketches, designed multiple rounds of low to mid-fidelity wireframes, conducted user testing, and then applied my brand’s visual identity to create a high-fidelity interactive site.

The marketing site aims to 1) educate and inform, 2) build trust, and 3) promote the product. Users typically go to a company’s website in the interest and consideration phases of their consumer decision-making process, so Protekt’s websites provides them with information that aids their decision-making and pushes them to convert. Outlining how and where an individual may be vulnerable helps inform and educate them on their online vulnerability, which incentives them to download the app. Incorporating features such as testimonials and the number of users on the app helps build trust, which is essential for an app that encourages digital privacy and security but also requires the users to hand over a significant amount of personal information.

VIEW DESKTOP SITE

VIEW MOBILE SITE

Protekt’s Responsive Marketing Website

EXPANDING ACROSS PLATFORMS

Protekt on an iPad

As another means of concept exploration, I envisioned what Protekt would look like on a tablet device. Given that finding, viewing, and managing accounts created requires a larger viewport, the most logical platform expansion would be either a desktop or tablet. As the foundations for an IOS mobile app are already in place, designing and developing an iPad app would be more efficient than creating a desktop/mobile web app.

LOOKING INTO THE FUTURE

What’s Next for Protekt?

Feature Rollout

Ideally, Protekt, in its completion, will be a pocket privacy assistant. In the future, I will need to revisit and explore more user stories and epics under different initiatives like safer device habits to build a more holistic digital privacy and security solution. When considering the order of rolling out new features and functionality, I will conduct user testing to determine the value-effort trade off and understand priority levels.

Monetization

During the development of Protekt, I have thought of many monetization and pricing strategies; however, to develop this part of the business model properly, more testing and research needs to be done. Based on my current research, a freemium model would be the most appropriate pricing strategy as it allows users to test basic features for free and charge for higher value services. With digital privacy and security matters, this could be effective for pushing users to gain awareness of privacy and security threats for free and then up-selling features that make the process of managing these threats more convenient (selling either convenience or control).

KEY BUSINESS CONSIDERATIONS:

Changing legislations (Bill C-11, Canada) and company initiatives (Apple’s new privacy initiatives) are giving Canadian’s greater transparency and control over how companies handle and use their personal information. These ongoing changes and a refreshed focus on digital privacy and security will be essential for supporting Protekt to empower consumers to manage their digital privacy and security more conveniently.

Looking forward, it will be crucial for Protekt to adhere to all privacy regulations and laws, communicate simply, openly and honestly about its own data collection and usage, and invest in the most robust and advanced security measures to protect users’ personal information.

KEY PROJECT LEARNINGS

About Me

I’m not afraid to take the road less travelled

Not knowing a thing about digital privacy made it a very daunting challenge to face; however, the amount of learning I knew I had to do when approaching the challenge excited me. Stepping out of my comfort zone and using this low-risk opportunity to explore a concept and space that I had no knowledge of was eye-opening, rewarding, and was a unique experience to be learning about digital privacy in parallel with my users.

Design doesn’t have to be perfect

In the past, I have been notorious for focusing too much on details. The quick-moving nature of this process helped me overcome my fear of showing my work in progress and pushed me to use my time more effectively. Instead of focusing hours on details for them to be scrapped by the first round of testing, I learned that sometimes, it is important to complete what is necessary to move forward and go back after to refine details.

About Design

Always be digging deeper

Throughout this process, I learned why “why” holds so much importance in UX. The way I asked and framed questions guided how the interviewees responded. I learned to refine and revise interview questions to be more open-ended and constantly follow up each question with a “why”. By actively listening, reducing my own amount of talking, and avoiding using misleading questions, I was able to get unbiased, authentic, and open answers.

Sometimes it is necessary to move backwards in order to move forwards

Design is not a linear process. While constraints such as time and resources were pushing me to keep moving forward, I learned to not be afraid to revisit and change work completed earlier in the process. Prior to this experience, I was hesitant to make changes to the work I did early on in the process because I didn’t want to move backwards and commit more time to something that was “finished”. By forcing myself to revisit earlier parts of the process and analyze whether they still aligned with the user, I was able to create a more cohesive user narrative and build a better solution.