TEAM
JIGSAW
PROJECT
OUTLINE
ROLE
SENIOR UX DESIGNER
FOCUS
PRODUCT DESIGN,
UI ENHANCEMENTS
Outline is a Jigsaw core product built to fight censorship, and help journalists and oppressed citizens gain unrestricted internet access to and from repressive countries.
The product enables anyone to access the free and open internet more safely by running their own VPN. Running one's own VPN server through Outline makes accessing the internet safer and establishes a connection that is harder to block. Using Outline requires both the Outline Manager (desktop app) and Outline Client (desktop and mobile).
As senior UX designer, I worked closely with Jigsaw product management and engineers to create and implement new flows and UI designs to both Outline Manager and Outline Client.
SECTION 1
MULTI-USER CREDENTIALS & DYNAMIC KEYS
PROBLEM
Outline managers (sharer of the access key) do not have a way to share their access key safely with multiple users. Nor do they have a way to keep track of all data limits with each client (recipient of the access key).
How do we expand Outline's user base and potential while maintaining a high level of privacy and security that users trust?
OPPORTUNITY
To create and integrate a new type of enhanced access key that can be easily shared while remaining private and secure. Ultimately, this new enhanced key could expand Outline's user base of journalists and oppressed citizens living in censored countries who are having their internet access restricted, throttled, or shut down to suppress free speech. This nationwide censorship cuts off citizens from news, accurate information, and potential reporting of human rights violations.
The Outline manager needs a way to share the key safely with multiple users. To accomplish this, there needs to be a migration of technology from the Legacy to a new Enhanced key.
The Outline manager needs a way to keep track of all data limits across shared users.
Opportunity to enhance security with a new type of dynamic key and simultaneously increase user base through an infinitely shareable key.
APPROACH
Worked closely with Jigsaw product management and engineering to understand the complex technical aspects of creating a secure, encrypted VPN. From that technical understanding and the ramifications on design, changes were made throughout the flow and functionality of the existing Outline Manager and Outline Client apps to integrate the new dynamic key.
ENHANCED KEY INTRODUCTION
In the top image, upon first visit to Outline Manager, an Onboarding tooltip was added to introduce the following new features: multi-user key sharing, connected device visibility, and device removal management from a connected key.
In the bottom image, a dedicated button was added to the UI to create a new Enhanced access key, which would populate in a new row once clicked. Below is new copy to explain how to upgrade an Enhanced key.
SHARING AND DEVICE LIMITS
In the top image, a share dialog was expanded to allow users to not only share an Outline Client app invite link but also to now be able to share a multi-user access key.
In the bottom image, an "Edit share settings" link was added to the contextual menu, which opens a 'Share settings' dialog. In the dialog box is now the ability to 'Set a device limit' for managers to keep a limited number of devices linked to their shared access key.
KEY TYPES + DATA LIMITS
Unfortunately, there was no way to automatically update all Legacy keys to the new Enhanced key on the backend. As a result, the dashboard (top image) was left in a transitional phase, where both Legacy and Enhanced keys had to exist until a user deleted and updated all access keys to the new one.
In the bottom image, two new settings were added. The first was a new setting for 'Data limits' that set a 30-day data transfer limit for access keys on the selected server. The second was the ability to 'Enable legacy keys' for users who preferred to maintain their compatibility with non-Outline clients.
DYNAMIC KEY FLOW
Outline Client needed a new user flow to accommodate the new Enhanced/Dynamic key received from the Outline Manager. The Dynamic key allows the Outline server operator to change the server that the user is connected to. This allows for more flexibility in providing users with Outline access.
In this flow, two brand new features and pages were introduced—'Server Info' and 'Diagnostic Log'.
SECTION 2
UI ENHANCEMENTS, ONBOARDING & GCP
PROBLEM
As senior UX designer and someone taking on the Outline project with fresh eyes, I found aspects of the product difficult to use and some of the UI and terminology confusing. The technical aspects and the idea of two interdependent products—Outline Manager and Outline Client—wasn't straightforward unless one was an advanced user.
Another issue was Google Cloud Provider (GCP) was an in-house server provider that Google had already created, and yet, there was no easy way to set up or access GCP in Outline Manager.
OPPORTUNITY
Refining Outline into an easy-to-understand and more accessible user experience has the potential to expand Outline's user base and reach. One potential opportunity is to give Outline's user base of journalists safer, increased access to information to research issues, communicate with sources, and report the news from repressed societies.
Secondly, this was an opportunity to harmoniously integrate two Google products—Outline Manager and Google Cloud Provider—within Google's ecosystem.
How can we make a complicated technical product easy to understand and more accessible for both new and seasoned users alike?
How can we push Google Cloud Provider as a preferred server provider and make the VPN onboarding much easier and smoother for the user?
APPROACH
Worked closely with Jigsaw product management and engineering to eliminate redundancies and tidy up the UI in Outline Manager's dashboard. Added an onboarding to explain how Outline Manager and Outline Client are two interdependent products.
On the GCP onboarding front, we initally focused on creating an easier way to choose a preferred server location.
Original Dashboard
Updated Dashboard
UI Enhancements
- In the left rail, a dedicated 'Create Server' button was added. Below that, a trash can icon was added upon rollover of server locations. This trash can icon would eliminate an extra click, buried in a contextual menu, to delete the server.
- Replaced the three-tile dashboard view with a two-tile data visualization of 'Total Usage' and 'Allowance Used' for easy scannability. Removed the third tile to the right called 'Keys' since this information was not as relevant to how much data each new shared key was using from the total data allowance.
- Removed the 'Connections | Settings' tab and moved the settings menu into the top right corner button, which was replaced with a Gear icon to symbolize the Settings menu.
- Moved the floating 'Add new key' button and integrated it into the dynamic key section. Removed the word 'Enhanced' since this was the new default key.
- Added table titles in the keys section to orientate the user: Access keys, Devices, Usage, Date Added. Under 'Usage' progress bars were added to display used data versus total data.
ONBOARDING
In the original Outline Manager, there was almost no onboarding to explain how Outline Manager works in tandem with Outline Client. Onboarding was added alongside tooltips upon first use of the product to help orient the user.
GCP ONBOARDING
Designed GCP onboarding pages and experimented with a two-view (Grid vs List) toggle for choosing a preferred server location. Also, the location needed to be standardized based on feed values. As a team, we landed on City and Location as a broad category to encompass all possibilities.
Worked with the Outline engineering team to find a dynamic flag source and added visual treatment to make the flags and feed information pop and easier to scan.
IMPACT
• Outline was the #1 tool used in Myanmar (Rohingya genocide).
• Outline was the #3 app in Hong Kong after the national security law was enacted.
• From 2020 to 2022, Outline downloads more than doubled on Android.
• Over 20% of Outline servers are using data limits, which were meant to protect the server operators. These servers had 100% more data transfers and 60% more access keys used.
TEAM
JIGSAW
PROJECT
OUTLINE
ROLE
SENIOR UX DESIGNER
FOCUS
PRODUCT DESIGN,
UI ENHANCEMENTS
Outline is a Jigsaw core product built to fight censorship, and help journalists and oppressed citizens gain unrestricted internet access to and from repressive countries.
The product enables anyone to access the free and open internet more safely by running their own VPN. Running one's own VPN server through Outline makes accessing the internet safer and establishes a connection that is harder to block. Using Outline requires both the Outline Manager (desktop app) and Outline Client (desktop and mobile).
As senior UX designer, I worked closely with Jigsaw product management and engineers to create and implement new flows and UI designs to both Outline Manager and Outline Client.
SECTION 1
MULTI-USER CREDENTIALS & DYNAMIC KEYS
PROBLEM
Outline managers (sharer of the access key) do not have a way to share their access key safely with multiple users. Nor do they have a way to keep track of all data limits with each client (recipient of the access key).
How do we expand Outline's user base and potential while maintaining a high level of privacy and security that users trust?
OPPORTUNITY
To create and integrate a new type of enhanced access key that can be easily shared while remaining private and secure. Ultimately, this new enhanced key could expand Outline's user base of journalists and oppressed citizens living in censored countries who are having their internet access restricted, throttled, or shut down to suppress free speech. This nationwide censorship cuts off citizens from news, accurate information, and potential reporting of human rights violations.
The Outline manager needs a way to share the key safely with multiple users. To accomplish this, there needs to be a migration of technology from the Legacy to a new Enhanced key.
The Outline manager needs a way to keep track of all data limits across shared users.
Opportunity to enhance security with a new type of dynamic key and simultaneously increase user base through an infinitely shareable key.
APPROACH
Worked closely with Jigsaw product management and engineering to understand the complex technical aspects of creating a secure, encrypted VPN. From that technical understanding and the ramifications on design, changes were made throughout the flow and functionality of the existing Outline Manager and Outline Client apps to integrate the new dynamic key.
ENHANCED KEY INTRODUCTION
In the top image, upon first visit to Outline Manager, an Onboarding tooltip was added to introduce the following new features: multi-user key sharing, connected device visibility, and device removal management from a connected key.
In the bottom image, a dedicated button was added to the UI to create a new Enhanced access key, which would populate in a new row once clicked. Below is new copy to explain how to upgrade an Enhanced key.
SHARING AND DEVICE LIMITS
In the top image, a share dialog was expanded to allow users to not only share an Outline Client app invite link but also to now be able to share a multi-user access key.
In the bottom image, an "Edit share settings" link was added to the contextual menu, which opens a 'Share settings' dialog. In the dialog box is now the ability to 'Set a device limit' for managers to keep a limited number of devices linked to their shared access key.
KEY TYPES + DATA LIMITS
Unfortunately, there was no way to automatically update all Legacy keys to the new Enhanced key on the backend. As a result, the dashboard (top image) was left in a transitional phase, where both Legacy and Enhanced keys had to exist until a user deleted and updated all access keys to the new one.
In the bottom image, two new settings were added. The first was a new setting for 'Data limits' that set a 30-day data transfer limit for access keys on the selected server. The second was the ability to 'Enable legacy keys' for users who preferred to maintain their compatibility with non-Outline clients.
DYNAMIC KEY FLOW
Outline Client needed a new user flow to accommodate the new Enhanced/Dynamic key received from the Outline Manager. The Dynamic key allows the Outline server operator to change the server that the user is connected to. This allows for more flexibility in providing users with Outline access.
In this flow, two brand new features and pages were introduced—'Server Info' and 'Diagnostic Log'.
SECTION 2
UI ENHANCEMENTS, ONBOARDING & GCP
PROBLEM
As senior UX designer and someone taking on the Outline project with fresh eyes, I found aspects of the product difficult to use and some of the UI and terminology confusing. The technical aspects and the idea of two interdependent products—Outline Manager and Outline Client—wasn't straightforward unless one was an advanced user.
Another issue was Google Cloud Provider (GCP) was an in-house server provider that Google had already created, and yet, there was no easy way to set up or access GCP in Outline Manager.
OPPORTUNITY
Refining Outline into an easy-to-understand and more accessible user experience has the potential to expand Outline's user base and reach. One potential opportunity is to give Outline's user base of journalists safer, increased access to information to research issues, communicate with sources, and report the news from repressed societies.
Secondly, this was an opportunity to harmoniously integrate two Google products—Outline Manager and Google Cloud Provider—within Google's ecosystem.
How can we make a complicated technical product easy to understand and more accessible for both new and seasoned users alike?
How can we push Google Cloud Provider as a preferred server provider and make the VPN onboarding much easier and smoother for the user?
APPROACH
Worked closely with Jigsaw product management and engineering to eliminate redundancies and tidy up the UI in Outline Manager's dashboard. Added an onboarding to explain how Outline Manager and Outline Client are two interdependent products.
On the GCP onboarding front, we initally focused on creating an easier way to choose a preferred server location.
Original Dashboard
Updated Dashboard
UI Enhancements
- In the left rail, a dedicated 'Create Server' button was added. Below that, a trash can icon was added upon rollover of server locations. This trash can icon would eliminate an extra click, buried in a contextual menu, to delete the server.
- Replaced the three-tile dashboard view with a two-tile data visualization of 'Total Usage' and 'Allowance Used' for easy scannability. Removed the third tile to the right called 'Keys' since this information was not as relevant to how much data each new shared key was using from the total data allowance.
- Removed the 'Connections | Settings' tab and moved the settings menu into the top right corner button, which was replaced with a Gear icon to symbolize the Settings menu.
- Moved the floating 'Add new key' button and integrated it into the dynamic key section. Removed the word 'Enhanced' since this was the new default key.
- Added table titles in the keys section to orientate the user: Access keys, Devices, Usage, Date Added. Under 'Usage' progress bars were added to display used data versus total data.
ONBOARDING
In the original Outline Manager, there was almost no onboarding to explain how Outline Manager works in tandem with Outline Client. Onboarding was added alongside tooltips upon first use of the product to help orient the user.
GCP ONBOARDING
Designed GCP onboarding pages and experimented with a two-view (Grid vs List) toggle for choosing a preferred server location. Also, the location needed to be standardized based on feed values. As a team, we landed on City and Location as a broad category to encompass all possibilities.
Worked with the Outline engineering team to find a dynamic flag source and added visual treatment to make the flags and feed information pop and easier to scan.
IMPACT
• Outline was the #1 tool used in Myanmar (Rohingya genocide).
• Outline was the #3 app in Hong Kong after the national security law was enacted.
• From 2020 to 2022, Outline downloads more than doubled on Android.
• Over 20% of Outline servers are using data limits, which were meant to protect the server operators. These servers had 100% more data transfers and 60% more access keys used.