Streamlining Engagement: Enhancing User Experience in the Twitter Comment Section

Jyotipriya poojari
11 min readMar 23, 2024

--

Revamping the comment section for a smoother experience. No more getting lost in the conversation

Illustration — Jyotipriya Poojari

Heads up! This Twitter redesign is just a concept I cooked up to explore UX design. It’s totally independent of the official Twitter app, and all the content is made-up for learning purposes.

First, a little about myself

Ten years rocking fashion design! Why am I switching careers to UX design after working as a fashion designer for almost a decade now? Well, it took me three years to finally take the plunge, but here I am. But here’s the thing: design is my jam, and UX design feels like a perfect fit. In fashion, I got to create beautiful pieces that were functional too, always keeping the wearer in mind. But UX design feels like the next level. Not just how something looks, but how it feels to use it. That user-centered focus is what really gets me excited.

And hey, let’s not forget the experience I already have! Designing clothes collections taught me so much about what people need and how to create a cohesive experience. Those skills will be gold in UX design, I know it.

It’s a new path, but it feels right. It’s a chance to keep using my design skills and focus on what I love: creating experiences that people enjoy. It’s going to be a challenge, for sure, but I’m ready to learn a new design language and make a splash in the UX world!

🤔 What is the challenge about ?

For my first ever UX case study challenge hosted by Growth School under the mentorship program by UX Anudeep, I learned the best way to learn—the non-textbook approach to solving all UX problems & how to look at everyday products with the simple example of a SWITCH. How mind-blowing was that? I never imagined there could be a 1-hour discussion that could even be done about a switch. But that was when my perspective on looking at things around us changed. Design is in everything around us, like a door or a safety pin; it’s all about opening our third eye 👁 like Anudeep mentioned.

Picking a project for my first UX case study got me thinking about my own social media habits. For years, I’ve been on Twitter (X), but lately, I just haven’t been using it as much. It’s weird, because I love the idea — sharing quick thoughts and updates, following interesting people. But compared to other platforms, Twitter (X) just feels old-fashioned, somehow.

Now, I’m a total Instagram addict—the pictures and videos are amazing, it’s so visually engaging. But Twitter (X) is all about text, right? Perfect for those bite-sized updates and discussions. So why wasn’t it clicking for me anymore?

That’s when it hit me—maybe the problem wasn’t Twitter (X) itself, but the way it’s designed. Navigating it can be confusing, and that frustration was probably keeping me from using it as much as I could. So, I decided to use this as my case study — to see if I could figure out what’s making Twitter (X) a little tricky to use, and maybe even come up with some ideas to make it better!

😫 Problem Discovery

Users encounter difficulty while navigating the Twitter comment section.

Even though I had found a problem, I wanted to investigate it further to find out if it was a personal challenge or a widespread concern among users. I thus carried out some secondary research and discovered a ton of comments from users on other social media applications who had expressed dissatisfaction with the comment section’s navigational difficulties.

** Listening In: User Insights from Real-Time Comments**

User Frustrations:

  • The secondary feedback analysis revealed several areas where the user experience could be improved.
  • Many users expressed a desire for a smoother overall experience, particularly within the comment section.
  • Some long-time users shared disappointment at encountering tutorials after years of using the app.

👉🏻 My final re-design of Twitter comment section

Let’s take a look at the old app screens side-by-side with the new ones I designed! In a bit, I’ll walk you through the thought process behind the changes. I’m curious to hear what you think — is the new design easier to use?

( Original Home Screen | Redesigned Home Screen | After User Testing Home Screen)
( Original Comment Section Screen | Redesigned Comment Section Screen | Redesigned Animated App Flow — After User Testing Comment Section Screen )

Now first lets understand the current flow of the Twitter app.

Current Twitter Flow

Have you ever been excited to join a conversation on Twitter, only to hit a snag when you click the comment icon? It can be frustrating to land on a blank screen instead of jumping right into the discussion.

We naturally expect apps like Twitter to take us where we want to go quickly. Right now, clicking the comment icon takes you on a detour — you have to go back to the main screen and find the post again to see the conversation. This extra step can feel clunky and interrupt the flow of your engagement.

Imagine how much smoother things would be if clicking the comment icon brought you straight to the conversation! This small change would make it easier to jump in and participate in discussions you care about.

By focusing on what users expect and making commenting more accessible, Twitter could create a much more enjoyable and engaging experience for everyone.

👉🏻 What was the final solution, & how does it help the users ?

Jakob’s Law tells us that people prefer things to be consistent and predictable. That’s why using familiar visual elements throughout an app is so important. It helps users learn the app quickly and intuitively, without having to memorize where things are.

For example, clicking on a comment icon should take users directly to the comments section, not to a different screen altogether. This can be confusing and disrupt the flow of using the app.

By keeping things consistent and making actions and options readily visible, we can reduce the burden on users’ memory. They shouldn’t have to remember where to find something every single time they want to use it. A good design should make it easy for users to find information without having to recall specific details.

👉🏻 What business metric does it affect ?

Retention Metrics : Messing up with customers can be a total bummer. Have you ever felt frustrated dealing with a company that just doesn’t seem to listen? studies show it costs businesses a whopping $1.6 trillion every year because of bad customer service! Ouch. On the flip side, companies that put users needs first, tend to stick around longer and make more money (like, 60% more!). The crazy part? You only get one shot to make first impression — 32% ditch a company after just one bad experience. That’s a scary statistic!

So it is important to make the users spend more time with the app, a user-friendly design will guarantee more engagement and retention. It keeps people engaged and coming back for more, which is ultimately good for everyone — we get a happy, loyal user base, and the business thrives!

🫡 Workbook in Action

Learning design through real-life examples opened my eyes to how it works everywhere! It’s like asking “why?” like a kid, but with design. This got me thinking about Twitter’s comments — a huge app with millions of users. Maybe I can use design to make it better for everyone!

The “Business Impact of UX Design” workbook was fascinating! It showed how tiny details in design can affect both users and the business itself. The key is to truly understand the problem before jumping straight to solutions. That’s why I think improving the comment section on Twitter is such a great opportunity. Making it more efficient and user-friendly wouldn’t just be good for people using the app, it could have a big impact on Twitter’s business metrics too. Imagine how much more engaged users would be if commenting was smoother and easier!

So after learning all this cool design principles, I couldn’t wait to put them to the test! So, I started asking all sorts of questions about how Twitter works, especially the home page and comment section. Applied all Heuristic Principles we learned in the workshop. Those were like my secret decoder ring, helping me identify areas where Twitter’s design could be even more user-friendly.

Heuristic Evaluation

The good news? By focusing on user happiness, we can help the business too! Win-win!

💡 User-Centered Ideation

Bridging the Gap

I wanted was to make things easier for people using Twitter. My goal was to streamline the experience, making it smooth and easy for everyone.

📝 Paper Power: Low-Fidelity Prototypes

From Ideas to Action

Creating a clickable prototype in Marvel was awesome! Using “Low-Fidelity Prototype” learnings, I brought my design to life with a smooth navigation flow. It felt like building a real Twitter experience!

The best part? Testing the navigation flow of my Twitter redesign in a low-fidelity prototype was amazing! It was like getting a sneak peek of how the app would actually work. This way, I could catch any confusing parts early on, before people started using it.

📲 From Sketch to Clickable: High-Fidelity Prototypes

Let’s take a look at the screen updates I’ve explained. These changes not only make things easier for the users, but also benefit the business.

The High-fidelity Prototyping workbook was a game-changer! It showed me how to create prototypes that felt real and engaging, not just like static sketches. I could build a user-friendly app that was actually fun to use. Adding those little animation touches made all the difference — it felt like the app was coming to life! It was like taking my design from a blueprint to a real, interactive experience.

Figma Prototype Before Testing

🤝🏻 Putting Users First: Learnings from Sessions That Shaped My Usability Testing Approach

I put my designs to test! Based on the heuristic evaluation findings, into reality and then tested them with users. This ensured they worked smoothly and helped me identify areas for improvement.

Users participated in a usability testing session where they completed a set of tasks.

👀 Insights from User Testing

User voices: Insights from usability testing

Making it work : What users said !

Home Page Rocks : Users clearly appreciated the update that made differentiating between posts easier. This suggests they desired a cleaner and more organised home page.

Tweet Button Hiccup: The big tweet button wasn't working during testing. I totally get why they wanted to see the flow—thats super important! This issue was later fixed. Users also loved the new central spot at the bottom for the button.

Threaded Conversations : Users enjoyed the implementation of keeping threaded conversations, indicating a preference for a well-structured and easy-to-follow comment section.

“View More Replies” FTW : Users appreciated that they could view the comments in the same thread, & users were glad they could stay on top of longer conversations.

Bookmark icon improvement: This is a great suggestion from a user! Addition of a number of saved tweets to the bookmark icon that would keep track of saved content.

Streamlining Icons: All the users felt the need to reduce too many icons in the comment section and tweet lines & find way to reduce clutter & improve clarity.

🤌🏼 From Good to Great: How Feedback Transformed My Redesigned Screens

Based on the insightful user feedback, it was clear they craved a clear, organised, and user-friendly Twitter experience. To address this, I made some key changes:

  • Interactive Tweet Button: The big tweet button is now interactive, allowing users to explore the new tweet creation flow and understand its functionality.
  • Reduced Icon Clutter: I streamlined the interface by minimising the number of icons in both the tweet and comment sections. This reduces visual clutter and makes the experience more focused. The view stats icon is moved to the drop-down.
  • Saved tweet counter: Added a save counter to the bookmark icon. The user can easily track their saved tweets.
Figma Prototype After User- Testing

🚀The Key Learnings — 2 Weeks of UX Design Awesomeness!

The past two weeks have been a total blast — I learned things in the most unconventional way (because learning should be fun, right!), putting fundamentals of UX principle and design concepts into practice. But the biggest lesson ? “I am not the user!"—a"truth I’ve both learned and unlearned (thanks, UX Anudeep)

Here’s a peek into my adventure:

  1. Design Inspiration Everywhere: This past week has made me appreciate everyday design in a whole new light! It made me understand the existing design patterns & how to approach them.
  2. Putting Users First & Making Business Smile: User-centric design became my mantra, and i witnessed the power of UX on the business side too.
  3. Prototyping Power: Low-Fi to Hi-Fi: From low-fidelity mockup sketches on Marvel to high-fidelity masterpieces, i learned the art of crafting prototypes that bring ideas to life.
  4. The Magic of Usability Testing & Feedback Gold: ✨ Usability testing was an eye-opener, highlighting the importance of feedback. Now, I can confidently interview users and translate their insights into action.

⏱️Bonus Level : Design System Mastery & Time Management Ninja:

This challenge taught me how to leverage existing design systems and even add my own creative spark! After working hard for 7 days, I finally completed my first UX case study & this has been an absolute experience.

Thanks a lot for reading my case study. Please feel free to share your valuable feedback :)

--

--

Responses (1)