top of page
Terms of Serve Us thumbnail.png
Terms of Serve Us
Overview

 Considering the rapid evolution and growth of online services and social media today, people have become increasingly concerned about their privacy and the ethics of the digital services they use. This project seeks to create a more ethical digital world by making users aware of the meaning of the terms they agree to as they perform relevant actions on mobile devices. 

Title: Terms of Serve-Us 

Role: Research & UI/UX

Duration: 6 weeks

Team: John Lovely, Deyshna Pai, Wanting Yang, Grace Zheng

Design Approach

How might we statement: How might we increase user awareness of the content of Terms of Service Agreements? 

 

Problem statement:  People want to know about their legal responsibilities and rights with respect to the digital services they use, but are often deterred by the formatting, length, and vocabulary of Terms of Service agreements. 

 

Design Solution: Our team designed Terms of Serve-Us, a mobile app that tracks user’s real-time app usage and responds with notifications containing information from the ToS agreement relevant to the action being taken. Our design revolutionizes the way users engage with the ToS by changing it from what was previously a static, ineffective process to one that engages with and supports the user’s traditional manner of operating on their mobile device. 

Research

Surveys + Secondary Research + User Interviews

Our research consisted of a mixed-methods approach: survey,  interviews, secondary research. Our surveys and secondary research helped identify the problem space in which we were operating, while our interviews helped further contextualize the user experience.

 

I asked participants survey and interview questions about:

  • The process by which they create accounts on apps they use

  • Their behavior concerning how they interact with the Terms of Service

  • How their approach to a ToS compares to reading a contract as both are legally binding

In an effort to visually organize our research and thoughts, my team and I card sorted our research to see what larger themes and contexts surrounded the development of and interaction with Terms of Service agreements. 

 

The affinity maps below revealed the emotional frustrations users often face with respect to ToS agreements. The ToS is widely regarded as a “legal” document to be “cautious about.” Users also agree that it is “hard to understand” and “draining to read.”

card sorting research.jpeg
survey research 1.jpeg
survey research 2.jpeg

Summary of Research Insights

A History of Violations in Recent Years: 

Several companies have faced backlash over unannounced ToS revisions such as:

  • Stealing ownership rights of user-uploaded content

  • Nebulous language that confuses the reader

  • Changes regarding subscription policy

From our surveys, we learned: 

  • 12/13 participants recognize "Privacy" as a section in a ToS; 

  • 9/13 participants consider "privacy" sections most important to read.

  • 8/13 participants reported length affects their willingness to read contracts in general 

  • 6/13 participants engage in social loafing; the justification of skimming and or skipping the ToS due to an abstract trust that companies with larger user bases will have greater rates of whistleblowing for violations 

From our interviews, we learned: 

  •  there could be a better format for Terms of Service Agreements that would increase their willingness to read them. 

  • People are motivated to read the ToS when they know how it directly impacts finances or privacy

  • People are deterred from reading the ToS based on vocabulary, length, and format used

Competitive Analysis

Having identified users' frustrations and needs where the ToS was concerned, we conducted a Competitive Audit of seven other products to identify our market opportunities.

We looked at:

  • ToS;DR

  • Clickwrapped

  • TLDRLegal

  • ToS Back

  • Smart ToC

  • App Store Privacy Info

  • Apple In App Pop-ups

tos;dr logo.png
tosback.png
Screen Shot 2022-02-28 at 1.24.14 PM.png
smarttoc logo.jpeg
app store privacy logo.jpeg
tldrlegal logo.png
640px-Apple-logo.png
competitive audit.jpeg

What we learned:

  • our 7 competitors were mainly browser sites/databases of ToS summaries or browser extensions that created clickable links to certain sections of the ToS

  • no product delivering real-time action-based feedback to users on their mobile devices. 

Accordingly, our analysis revealed two key insights: 

  • We had 0 direct competitors in the mobile app field

  • All existing competitors only provide summary in a static place (would take effort on the user’s part to look up the information they needed outside of their app) 

Personas

Primary Persona

persona 1.png

With the identification of our user base and their needs, we developed our primary and secondary personas to better illustrate the people who were part of our design audience.

Secondary Persona

persona 2.png
Storyboards

After our research helped us identify our users and their needs, we were ready to start ideating. We developed 6 storyboards with these motivations in mind: 

  • Time-efficient

  • The system should be active rather than passive without increasing the user’s cognitive load

  • Keep the information easy to understand

  • Recognize that some content like privacy or finances is more important than other content  → get the user the information they care about faster and in an easier-to-understand way

Storyboard #3

storyboard 3.jpeg

Goal: 

  •  prioritize the user’s time,

  • interests in specific sections of the ToS

  • need for simplicity to understand the ToS

Idea: 

  • a storyboard in which the user interacts with a “clickable Table of Contents.” Each clickable section contains an easy-to-understand summary of its respective ToS content. 

Storyboard #4

storyboard #4.jpeg

Goal:

  • Solve users’ struggle to read ToS due to its lengthiness and jargon. 

 

Idea:

  •  Extension delivers pop-ups of summarized ToS content relevant to the user’s current action. In the final panel, the user is about to post a photo when a pop-up appears addressing the relevance of the user’s action to the ToS. The user is better able to understand the ToS and makes an informed decision to post!

Storyboard #5

storyboard #5.jpeg

Goal:

  • Save user time by prioritizing most important sections 

Solution:

  • Create a third party app that intakes user’s “trigger words”

  • App searches for and navigates to ToS parts containing trigger words whenever a new app is downloaded 

Storyboard Analysis

storyboard analysis.jpeg

Our feedback was strongly in favor of Storyboard idea #4, the design I contributed to our round of ideation for the following reasons:

  • Users liked solutions that delivered parts of the ToS relevant to the action being taken because it contextualized the ToS when delivered in action, and became more digestible when delivered in parts

  • We accurately identified users’ frustrations. 

With our storyboard solution identified, we were ready to start sketching UIs of how to implement our in-parts, in-action design.

Sketches
sketches.jpeg
sketches pt2.jpeg

Pictured above are my team’s initial sketches for the ways in which we could implement the in-parts, in-action model. Some ideas we considered took place within the apps being used, but we realized the difficulty of implementing this design from a developer’s standpoint. With that in mind, we moved forward with a background mobile notification based system as it would leverage already-existing systems and prioritize the feasibility of implementation.

Lo-fi Prototype
giphy.gif

Instagram Notification Flow

When posting a photo on Instagram, Terms of Serve-Us sends an iPhone pull-down notification summary of the Terms of Service. The user also has the option to "View ToS" in the Terms of Serve-Us app. 

Lo-fi In-App Interactions

Within the app, the user can:

  • look up a Terms of Service summary 

  • Contribute a ToS to the open-source database for legal review

  • Manage their notifications 

giphy.gif
User Feedback

We took our lo-fi and hi-fi prototypes to 6 different users to conduct usability tests and created affinity diagrams of what we learned. 

User Testing Insights

aff map 1.jpeg

Here's what we learned about our lo-fi prototype:

  • Tapping > Dragging: most users tried accessing the notification pull-down menu via a tap when the interaction required dragging. —> takeaway: change interaction to tapping 

  • "Contribute" as a button name lacks direction: most users struggled to associate the word "Contribute" with the act of submitting a ToS for review —> takeaway: change name/prompt

  • Constant notifications = annoying —> takeaway: increase user preferences within "Manage Notifications" menu 

  • Unnecessary Buttons on IG notification flow

Iteration + how we implemented above insights

Tapping > Dragging

giphy.gif
giphy.gif

  • Tapping > Dragging: most users tried accessing the notification pull-down menu via a tap when the interaction required dragging. —> takeaway: change interaction to tapping 

Lo-Fi: dragging pull down menu

Hi-fi: tapping menu 

Unnecessary Buttons

  • Unnecessary Buttons on IG notification flow

Screen Shot 2022-03-08 at 12.12.32 AM.png

unnecessary button
(users swipe up to dismiss)

Screen Shot 2022-03-08 at 12.12.03 AM.png

added button to manage frequency

Our usability testing also illustrated to us that we had initially incorporated an unnecessary button in our lo-fi prototype as most users would be inclined to swipe their notifications away. With this in mind, we redesigned our hi-fi screen with this in mind. Our second round of usability testing, conducted on our hi-fi prototype this time, revealed to us the importance of users being able to customize the types and frequency of notifications they received (core feature from above). Accordingly, we added a “don’t show again button” on the notification to ease the user’s flexibility and efficiency of use. 

Contribute Button Content Strategy

  • "Contribute" as a button name lacks direction: most users struggled to associate the word "Contribute" with the act of submitting a ToS for review —> takeaway: change name/prompt

confusing
name 

Screen Shot 2022-03-07 at 10.15.47 PM.png

changed name 

Screen Shot 2022-03-07 at 10.12.15 PM.png

Lo-Fi: "Contribute" is confusing

Hi-fi: "Add a ToS" is clear

lacks direction

made button more specific

added prompt

Screen Shot 2022-03-07 at 10.16.05 PM.png
Screen Shot 2022-03-07 at 10.14.11 PM.png

Finally, our “contribute” page was the starting point of our app’s open-source functionality, which was a core feature of our design. During testing, however, it became apparent that seeing the word “Contribute” lacked a clear directive for users, and so many were unsure of how to submit a Terms of Service for review upon seeing the “Contribute” button on the app’s home page. We ideated a variety of terms and user tested them to see which set of phrases would prompt the response we were looking for. 

Our results showed us “Add a ToS” was the most straightforward prompt for those trying to submit materials to the app, so we incorporated this change into our hi-fi iteration by renaming the form, adding a form prompt (see below), and editing the button names for clarity.

Final Design + core features

A brief overview of our three core features: 

giphy.gif

Notification-Based System 

  • Users benefit from knowing how and when the ToS is relevant

giphy.gif

Open-Sourced Community Contributions

  • Idea derived from competitive analysis process; several of our competitors were browser databases which allowed site visitors to submit Terms of Service Agreements for review and addition by the site’s legal teams 

  • We incorporated this feature into our own app to also address user concerns in our interview data as to how our product would handle missing or unavailable Terms of Services.

giphy.gif

Manage Notifications System 

  • This feature evolved between our hi-fi and hi-fi iteration rounds thanks to user insights.

  • Problem we learned during testing: receiving repetitive notifications = annoying

  • Our solution: default mode of receiving each notification once - you can toggle with frequency and the notification content you feel most interested in receiving

Reflections

Through this project I familiarized myself more with the design thinking process as well as with tools such as Figma and Miro. 

Some design takeaways I learned from this project are: 

DON’T:

  •  reinvent the wheel in terms of gestures!

 

DO:

  • Several rounds of user testing

  • Remain mindful of the language used in your directions! 

bottom of page