I improved the user interface of Pairagraph - a platform that seeks to revive respectful and mature online debate. It is designed for written dialogue between pairs of notable individuals, to discuss a topic or issue that they disagree on.
I was such a fan that I reached out to Jonathan to express my fondness for his creation, and to explore the possible directions he might take. As amazing as Pairagraph is, there were a couple of small UI/UX issues which stood out as candidates for possible improvement.
I mocked up my suggestions into an unsolicited redesign of the interface. Many of the features have since been implemented and have generated a ‘10x’ improvement.
- 1. Context
- 1.1 Setting the scene
- 1.2 My involvement
- 1.3 The problem
- 1.4 Supporting data
- 2. Design
- 2.1 Process
- 2.2. Features
- 3. Outcome
- 3.1 Live design
- 3.2 Problem to impact
- 3.3 Learnings
/w=3840,quality=80)
Skills: UI
Time: June-July 2021
Tools: Figma
1. Context
1.1 Setting the scene
Founded in 2019, Pairagraph is a platform for written dialogue between pairs of individuals. By getting some of the brightest minds to discuss a topic or issue that they disagree on, it seeks to revive respectful and mature online debate.
There are over 100 debates, with contributors like Niall Ferguson, Yanis Varoufakis, Lawrence Krauss, Francis Fukuyama, Alan Dershowitz, Howard Marks, Coleman Hughes, Balaji Srinivasan, Joe Lonsdale, Robert Shiller, and Russ Roberts.
“We love Twitter, but it can be annoying. It’s loud and noisy, it’s replete with echo chambers, and 280 characters is not enough to make a real argument. Pairagraph is our attempt to push back on these trends and build a proper town square for the digital age” - Jonathan, Co-founder
1.2 My involvement
Over the course of a month, I worked on the full UI redesign process: from understanding the current interface, ideating improvements, designing in Figma, handing over to Jonathan for implementation.
1.3 The problem
As the Aesthetic-Usability Effect says: users often perceive aesthetically pleasing design as design that’s more usable.
With Pairagraph, the inverse effect was occurring. The interface was dated, formal, and not aesthetically pleasing. My intuition told me this negatively affected the sites usability.
Rationale:
- No images
- Confusing alternating author feature
- Formal language and style
- Outdated font choice
- Basic colour palette
- Poor information hierarchy
- Under-utilised white space
1.4 Supporting data
2. Design
2.1 Process
Understanding the current interface →
Ideating + designing in Figma →
Handing over to implement ✓
2.2. Features
3. Outcome
3.1 Live design
3.2 Problem to impact
Problem →
Dated, formal User Interface was not aesthetically pleasing.
Aesthetic-Usability Effect says users often perceive aesthetically pleasing design as design that’s more usable. The inverse can also happen.
This represented a problem for the platform user interface, and for the business as a whole.
Solution →
Complete redesign of UI of the debate page.
New UI includes cleaner font, imagery, social features, better information hierarchy - all designed to make the platform more aesthetically pleasing for the user.
Impact ✓
“The site looks 10x better than it used to”
“The new design…
- incorporated many of the features that I am planning to roll out in the next couple months
- inspired other features (e.g., like button, comment sections)
- has excited me so much about the future direction of Pairagraph that I have recently increased my pace of software development.”
3.3 Learnings
There were some great learnings encountered on the journey.
