User Experience, User Interface Design
September 2022 - December 2022
Redesigning Twitter (X) Terms of Service
Scroll ↓
My partner and I were tasked with redesigning Twitter’s (X) Terms of Service (TOS) mobile interface by manipulating typography. This project focuses on visual design, retention, and comprehension of complex written information.
SUMMARY
TIMELINE
October - December 2022
UX/UI Designer
Collaborator: Bhavana Veeravalli
ROLE
SKILLS
Visual Design Strategy, Design Systems, Interaction Design
TOOLS
Figma, Figjam
DESIGN PROBLEM
With something so critical yet often ignored, we asked ourselves: How could we make this experience more streamlined and engaging?
Majority of people can attest that they have blindly agreed to a Terms of Service contract without actually reading it before. More often than not, our eyes glaze over when we click on the Terms of Service , and it’s a large block of text with legal jargon.
PROJECT OBJECTIVES
1. Improve users’ comprehension and retention of information through stronger typographic hierarchy
2. Reduce time spent reading while still gaining an understanding of most crucial information
3. Create a simplified navigation system between sections and sub-sections
SEMANTIC ANALYSIS
Identifying structural patterns and problems within the existing Terms of Service contract.
Excessive hyperlinks
Long text with minimal variation for subclause
Time extensive to read and navigate information
Not enough typographic variation and distinct hierarchy
ACADEMIC RESEARCH
Content awareness is limited by information overload and excessive scrolling, and unreadable information disempowers users.
The Flesch-Kincaid Readability test is used to indicate how difficult a passage in the English language is to understand. My partner and I ran Twitter Terms of Service content into this test and found it is at a college reading level.
EXISTING USER INTERFACE
The existing user interface for Twitter's ToS depends primarily on scrolling as the primary form of navigation and has issues relating to the information hierarchy.
Based on this analysis, I wanted to design an interface that reduces the amount of time it takes to find the most fundamental information through hierarchy and navigation.
DESIGN ITERATIONS
Early iterations raised the question of how to make the pages more interactive, practical, and time-efficient.
Our first round of iterations focused mainly on addressing the issues of hierarchy and navigation. For users to sift between pages, I thought it would be helpful for the navigation system between the six sections to stay constant on the pages.
My colleague and I also explored the option of utilizing catchy, easy-to-understand Tweet summaries at the start of each section for users to know what to expect and get a gist of the main ideas.
Round two iterations: Revised navigation, ToS Tweet summaries, and added a "jump to" section.
The language we use for the summaries is more direct, and the Tweets themselves are interactive through expanding or closing the feed. This is the version we used for usability testing
USABILITY TESTING
Testing whether or not the user could accomplish their goal, the time it took them to complete the task, and whether they understood the interactive elements, such as the navigation systems and ToS summaries.
Takeaways
1. Jump-to sections were helpful but could have more
2. Take away hashtags within the jump-to. It looks like it will lead to another page rather than scroll down.
3. Adjust the highlighting system to clarify that it corresponds with the "jump-to" navigation system. (Also change color to light blue)
4. Understood that Tweet ToS summaries are interactive
