2019 - UX Design, experimental

LTAP — Let's Talk About Privacy

Hybrid documentary experience about online privacy and security.

brief

Let's Talk About Privacy (or LTAP for short) is an experimental virtual-reality hybrid documentary where our team explored using chat-based technology and interactions to provide users with extensive online privacy and security knowledge.

Main Contributions

User research and testing, information architecture, UI and prototype design

Duration

January 2019 – April 2019

Team

Tianhao He, Yizhen Guo

Tools

Figma, Sketch App, Whimsical, Procreate

Let's Talk About Privacy

We believe online privacy and security are crucial for users everywhere in this digital era. Everyone should have the necessary knowledge to understand what they are carrying and using every day while being aware of what kinds of personal data are being collected during the usage. LTAP's primary goal is to create an immersive and easy-to-follow chat-based experience, allowing different users to understand such knowledge through a documentary where they will explore various topics digitally and physically across different devices.

Content

Why Privacy Matters

In this section, the user will learn why their online privacy and security matters. The narrator will lead the user to go through different places on their digital devices and suggest where sensitive information is stored.

How Persona Data is Leaked

Topic 2 introduces the users to the backstories about how their information is leaked. LTAP will utilize the device's built-in privacy restriction to demonstrate how these different granted accesses will lead to various potential security risks.

How Persona Data is Leaked

Personal information is not only leaked on the devices themselves but also leaked on the internet. The narrator will lead the user to see whether their online accounts are facing security breaches.

How to Protect Personal Info

After understanding some fundamental knowledge about online privacy and security, the users will be lead through different parts where the narrator demonstrates how the user can increase their information security, including password strength test and decoding.

How Properly Used Info Can Be Beneficial

Lastly, the narrator will let the user experience what convenience different services can bring if personal data is utilized properly. The user will experience it in the real world by visiting a nearby grocery store.

The Menu

The menu is where the user can access directly during the process and easily switch between different topics as they wish. The user can also track their progress, configure the app, and linking with additional devices.

Ideation

With the mind of creating a digital and interactive documentary related to online privacy and security, we brainstormed two different ideations. The characteristic of our first ideation is the interaction between multiple devices: the phone can interact and cooperate with the desktop device. Users can play the documentary on one device and interact with extra information on the other device.

For the second ideation, we imagined a documentary based on chatting and agentive bot technology. The chatting bot in the documentary is acting as a regular messaging contact on the digital device, giving users indications of what they need to do to engage with the documentary content. Considering the potentials and interactions, we finally settled on the second idea as our central concept while added some characteristics from the first idea for future developments.

Preliminary ia

During the process, we also created two information architecture for both of these ideations. Although these IAs are primitive and mainly focus on the user interface, they gave us more ideas on how the different topics and content can be laid out and how these IA can be improved later on with the project's development.

Our Values and Goals

After defining what experimental method we would like to approach, we set up our values system for our design process and final product, as well as the ultimate goals of our project. These two guidelines helped us coordinate the collaboration process and shaped how our final design will be.

Our Values

The value system we created for our designing process containing three vital points: consistency, understandability, and creativity.

Consistency

Considering the fundamental content of our project is documentary, all the interactive components in the design should always serve the documentary and the content in the topics.

Understandability

Always consider audiences as very beginners to this topic. Provide instructional content at individual steps to lead the user's way into the subject and help them navigate through different phrases of the experience.

Creativity

Do not be restrained by the limitation of screen-based interactions. Also consider how physical and environmental interaction can improve the experience and enhance the persuasiveness of the content and how users can interact with their surroundings.

Our goals

Besides letting the users understand the knowledge of online privacy and security, the main goals for us are:

  • Use the agentive technology and artificial intelligence to challenge the traditional documentaries' video format / linear process and create a more interactive experience.
  • Allow the users to create divergencies throughout different topics with their own decisions.
  • Let the users interact with the physical environment and dig deeper into the content with the immersive experience.

Users and Interactions

Based on our idea brainstorming, we started to imagine what kind of users are our potential audiences and what specific experience we would like to provide to our users. We created personas and the user scenarios that fits the personas to help us decide the next step in our process and lay the foundation for our content development.

Personas

Initially, we created three personas, but considering the different variants when the user engages with our design, we narrowed them down into two primary personas. Both of them have exciting characteristics and background stories that fit different scenarios and decisions when chatting with the narrator.

Table of content

The essence of a documentary is the content it provides. So with all of the previous ideas in mind, we tried to figure out the topics that have the most potential to fulfill our goals. We separated online privacy and security into four different components, from introducing the subject, how the information can be leaked, how to protect yourself from such leakage, and what is the potential of adequately used data.

User scenario

With the content table, we created our user scenario based on the 4th part of our documentary to explain one of the leading design highlights: the users' interactions between the physical and digital worlds and how they can make different divergencies during the process.

Prototyping and Testing

During the process of prototyping and testing, we developed two versions of prototypes and several interaction explorations. We also conducted card testing and user testing to further improve the usability of our app and information architecture clarity.

Low-fi Wireframes

We created our low-fidelity wireframes based on a very classic chatting interface, iMessage, while expanded interesting interactions across all different topics, including real-time password decoding, linking real social media platforms, and detecting security breaches. We also identified some problems related with switching topics. In order to decide whether to use traditional buttons or chatting text to switch between different parts of the documentary.

CARD SORTINg

The card sorting process helped us a lot regarding the information structure in the documentary. We laid out all the possible components and content in our documentary as cards and let our three card-sorting testers decide what kind of hierarchy they would like to have.

One of our testers' card sorting result

After card-sorting, we figured out that users are more likely to sort the topic first and consider our project is topic-based. Therefore, we changed the switching topics method from chatting with the narrator to a menu button for switching topics. Even though our app's main interface is a chatting interface, we still consider menus are more intuitive, and the user can find exactly what they want explore next more easily.

Mid-fi prototypes & control explorations
Control Explorations

After deciding on the menu system, we challenged ourselves to integrate other classic controls from the chatting app into our design, including viewing contact info, react to a message, and more. Also, we tried more iterations on the topic-choosing controls and made them even more intuitive while still being familiar to the users.

Some of the menu and conversation controls we explored
Mid-fi Prototypes

Based on the feedback, we also clarified how our content should be laid out in the chatting interface and expanded our chatting interactions to all the topics and multiple devices, including Apple Watch and desktop computers, in the mid-fidelity wireframes. Combined with the refined fundamental interactions, the multi-platform chatting and guiding feature can provide a more immersive experience when users access actual privacy-related content on their phone, move physically in the real world, or see the real-time collected data on their watch or mobile devices.

Topic 4 mid-fi prototypes
User testing

With all the interactions and content in place, we prepared to throughout user test in order to discover the problems in the user flow and the topic process. After three tests, we learned a lot from understanding how to create test scripts to alter our final design decisions based on the participants' feedback. The feedback we got from the participants include:

  • The user should know the available choices or paths they have. Due to the nature of the chatting interface, sometimes it is confusing that the user might not understand how to proceed or refuse the narrators' guides or suggestions.
  • More scenarios should be considered, such as if the user denied the notification access in the first place, what will the app do.
  • More diverse user scenarios can be integrated into user testing, such as the social platform linking page, which can further expand the agentive bot's capability and react to different user responses.
User Testing Script

Final Content and Design

After all the testings and iterations, we were finally able to sort out the complete information architecture, which became a hybrid between UI elements and the documentary content. This structure allows us to visualize how users can switch between different part of the app clearly. We also created a simple branding and design guideline for the app to help us create coherent design across different platforms.

Final IA

The final version of information architecture comes with an arranged structure that includes both UI-related elements as well as content-related elements. This structure helped us navigate through the home screen, the menus, and the chatting interface in the app.

Design guide

For the color, we chose orange and blue as our primary and supplementary colors, considering their high contrast and different emotions they bring to the user under different circumstances. We also chose the standard grey on the iOS app for the immersive experience and a deeper grey for the texts. We experimented a lot with the font, and in the final design, we chose Noah Grotesque as the header and SF Compact Rounded as text, considering their playfulness and similarities with the default SF Pro fonts on iOS. For the logo, we had several iterations where we experimented with the font, the idea of privacy and security, and the color. The final design is the combination of the essential parts of our documentary: chatting and online security.

Final Design

Let's Talk About Privacy

Thank You for Viewing :)