The Circle – A Platform for Social Issues, Discussions, and AI Insights
The Circle – A Platform for Social Issues, Discussions, and AI Insights
Embedded Files
"Tap the image to open the interactive prototype — best viewed in the Figma app or on desktop.”
01. Introduction
Today, online discussions about important social issues often face several problems:
They lack structure, making it hard to follow conversations.
Misinformation spreads quickly, making it difficult to trust what is being shared.
Many users only consume content instead of actively participating in meaningful discussions.
The Circle is a web-based platform designed to solve these problems by creating a structured, AI-supported space for users to engage in ethical discussions, share ideas, and publish content.
Unlike other platforms, The Circle uses AI-enhanced discussions and a gamified credibility system to encourage users to contribute high-quality content. Users can earn "stars" for their engagement, which helps them progress from contributor status to a publisher who can post articles.
I designed and developed The Circle from scratch, focusing on user needs, engagement strategies, and ethical discussions. My goal was to create a platform where people could talk about social justice, AI, and ethical issues meaningfully and truthfully.
Process: Research · User Journey Mapping · Wireframing · Prototyping · Interaction Design · Usability Testing · Iteration
Role: User Experience (UX) Designer, User Interface (UI), Interaction (IxD) Designer, and Content Strategist
Tools: Figma, Miro, Photoshop
02. Problem Statement
02.1. Common Issues in Online Discussions:
Unorganized Conversations: Many platforms have discussions that lack structure, making it hard for users to find valuable insights.
Spread of Misinformation: False or misleading information spreads easily, reducing the credibility of online discussions.
Lack of Motivation to Participate: Most users consume content passively instead of actively contributing to discussions.
02.2. How The Circle Solves These Problems:
Structured Conversations: Discussions are well-organized and focused on reliable sources and thoughtful insights.
AI-Supported Discussions: AI enhances conversations by providing relevant context, summaries, and topic suggestions.
Gamification for Engagement: Users earn stars based on their engagement. Once they reach 100 stars, they can become publishers and share their articles.
"An interactive video showcasing how The Circle facilitates structured discussions between users and AI on ethical and social topics."
03. Research & Insights
To ensure that The Circle effectively addresses the challenges in online discussions and provides a meaningful user experience, I conducted in-depth research using multiple approaches. This research helped identify gaps in existing platforms, understand user needs, and shape the core features of The Circle.
03.1. Competitor Analysis:
To position The Circle effectively in the digital landscape, I conducted an in-depth competitive analysis, comparing it to news platforms, discussion forums, publishing platforms, and AI chat tools. This helped identify gaps in existing solutions and refine The Circle’s unique value proposition:
News Platforms (NYT, Washington Post, Guardian)
👍 Strengths: Credible journalism, and high-quality content.
👎 Weaknesses: Content is controlled by journalists. There is Limited user engagement, and there are no AI-driven discussions.
👏 The Circle’s Edge: Combines news content with AI-powered discussions for interactive learning.
Discussion Forums (Reddit, Quora)
👍 Strengths: Community-driven discussions, diverse topics.
👎 Weaknesses: Misinformation risk, lack of AI insights.
👏 The Circle’s Edge: Integrates AI for fact-checked, structured conversations.
Publishing Platforms (Medium, Substack)
👍 Strengths: User-generated articles, and monetization options.
👎 Weaknesses: One-way content, minimal engagement.
👏 The Circle’s Edge: Blends publishing with AI-driven, interactive discussions.
AI Chat Tools (ChatGPT, Perplexity)
👍 Strengths: Instant AI responses, and personalized insights.
👎 Weaknesses: No human interaction, lacks discussion depth.
👏 The Circle’s Edge: Merges AI insights with real community engagement.
"Competitive Analysis: Evaluating news platforms, discussion forums, publishing sites, and AI tools to position The Circle as an interactive and credible space for news discussions."
03.2. User Interviews & Surveys:
To gain firsthand insights, I conducted user interviews and surveys with individuals passionate about social issues, ethics, and AI. The goal was to understand their motivations, pain points, and expectations for an online discussion platform.
~ Key Areas Explored:
User Preferences: What features do users value most in a discussion and news platform?
Pain Points: What issues do they face on existing platforms regarding credibility, misinformation, and engagement?
AI Integration: How comfortable are they with AI-driven discussions, and what improvements would they like to see?
Engagement Triggers: What motivates them to participate actively and share quality content?
~ Key Findings:
Users want discussions to be structured and credible rather than chaotic or opinion-driven.
Many feel overwhelmed by the lack of moderation and misinformation on existing platforms.
AI can help provide fact-based insights but should not replace human discussions.
Users appreciate gamification elements that reward meaningful participation.
"This pie chart represents user preferences, focusing on structured discussions, AI-driven insights, and community interaction."
03.3. Sticky Notes:
The sticky notes were instrumental in breaking down complex user experiences into manageable insights. They allowed me to highlight the pain points users encountered, their triggers for engagement, and their interactions with both the content and AI features. This approach helped me better understand how to make the platform more intuitive and user-friendly.
Pain Points: Users had difficulty understanding how to engage with the AI chat, particularly how to initiate meaningful conversations or get relevant responses.
Triggers: Users were motivated to interact with AI after seeing engaging discussions or relevant social issues but felt the AI responses could be more intuitive.
Feature Requests: Users asked for clearer instructions on how to use AI features and more interactive elements to guide conversations.
Positive Feedback: Users appreciated personalized content recommendations but expressed the need for AI to enhance this further with more context-driven suggestions.
Understanding The Circle: Users sought a clearer understanding of how the AI and content sections (like articles and social issues) were interconnected, requesting a more seamless experience.
"Sticky note wall summarizing user insights from interviews and surveys, covering pain points, triggers, and key expectations."
03.4. User Personas:
I developed user personas to better understand my target audience and ensure that The Circle’s design reflects their needs, goals, and behaviors. These personas are based on insights from interviews, surveys, and behavioral observations.
Each persona represents a key segment of users—helping me align design decisions with their motivations, frustrations, and engagement patterns. These insights played an important role in shaping features like personalized news feeds, AI-powered conversations, and the contributor-to-publisher journey, ensuring the platform meets user expectations and encourages participation.
04. Behavioral Research:
My behavioral research explored user needs and motivations related to contributing to and engaging with social issues news, informing The Circle's design, and AI Integration. I conducted interviews with diverse individuals interested in social issues, analyzed user reviews of existing platforms, and developed refined personas. Key research questions focused on motivations for contributing, frustrations with current platforms, desired features, and preferred discussion styles.
04.1. User Journey Map:
A primary finding was user frustration with the complex contribution process on existing platforms. Participants wanted a simpler, more transparent system with clear guidelines and feedback. This directly influenced The Circle's "Reader to Publisher" program, designed to streamline contributions and provide valuable feedback. Users specifically needed:
Simplified Submission
Clear Guidelines
Constructive Feedback
Recognition and Reward
The following user journey map visualizes the contribution experience, highlighting pain points and design opportunities.
"User Journey: Contributing an Article on The Circle - Key Pain Points and Opportunities"
04.2. Engagement Funnel:
04.2. Engagement Funnel:
After mapping the user journey, I’ve also focused on how users engage with The Circle at each stage. The Engagement Funnel helps me see how users move through awareness, interest, and active participation, all the way to building loyalty. Here’s a breakdown of the key stages and strategies I’m using to keep users engaged:
Attention: Capturing Initial Interest
At this stage, my goal is to grab the attention of potential users who are looking for meaningful conversations about social issues.
Tactics:I place current, relevant news stories about social justice, AI advancements, and trending topics prominently on the homepage.
I use clear and engaging calls-to-action that invite users to explore the AI-powered conversation features.
I share articles and videos that highlight how The Circle is a hub for important discussions on social change.
Interest: Sparking Engagement Through Personalization
Once I’ve captured their attention, the next step is to spark curiosity by offering personalized features that align with each user’s interests.
Tactics:I showcase how AI can provide a personalized experience, allowing users to explore topics they care about, like AI in education or climate change.
I encourage participation with tailored prompts that guide users to join discussions or groups related to their interests.
Desire: Cultivating a Deep Desire to Participate
As users get more engaged, my focus is on building a stronger desire for them to keep participating in group discussions.
Tactics:I highlight the impact of discussions within The Circle, showing how conversations have led to meaningful change or contributed to social movements.
I offer users the chance to create content or lead discussions on social issues that matter to them.
I share user testimonials and success stories that demonstrate the value of joining AI-powered group chats.
Action: Driving Active Participation
At this stage, users are ready to take action. My goal is to convert their interest and desire into active participation.
Tactics:I provide clear and simple steps for users to join group chats or post on important social issues.
I promote real-time chat features that let users engage in dynamic conversations on breaking news or AI-related debates.
I send gentle reminders and notifications to encourage users to join new groups or upcoming live discussions.
Loyalty: Building Long-Term Engagement and Advocacy
Lastly, I want to build long-term loyalty by making the platform rewarding and empowering.
Tactics:I offer reward systems like badges, recognition, or early access to exclusive content for users who consistently engage.
I keep users updated with fresh news content and discussion topics based on their past interactions.
I encourage users to become community advocates, sharing their insights and inviting new members to join The Circle.
"Illustration of Engagement funnel"
04.3. User Flow:
After understanding user behavior, I created a user flow to visualize how users interact with The Circle’s core features.
1. Entry Point:
Users choose between Contributor or Publisher and click Start Contributing.
2. Sign-in Process:
They sign in with their email, confirm an OTP, and proceed.
3. Success Message:
After verification, they see a success message and are directed to the dashboard.
4. Dashboard & Home Page:
The home page features sections like Our Mission, Popular on The Circle, Join the Conversation with AI, Explore More Topics, The Circle Podcast Hub, Advocacy and Action Center, and Publisher Status.
5. AI Discussion:
In Join the Conversation, users select AI and the Fight for Equality, choose between Private AI Chat or AI Group Discussion and start interacting with AI and other users.
6. Content Creation and Publishing:
Users ask AI to help edit their article, submit it for review, and receive an Article Under Review notification.
7. Return to Home:
Users return to the home page from the dashboard.
Why This Flow Works,
Why This Flow Works,
Logical Progression:
Each step builds on the previous one, guiding users naturally from signing in to contributing and interacting with AI and the community.Personalized Experience:
Features like personalized AI chat and topic-based discussions keep users connected to the content they care about most.Encourages Contribution:
Simplified publishing and AI assistance lower the barriers to content creation, encouraging users to contribute and become publishers.Community Engagement:
Group discussions promote user interaction and create a sense of belonging, while podcasts and advocacy sections add depth to the experience.
"User Flow: Key Actions and Decisions"
05. Design and Prototyping:
05.1. Hi-Fi Prototypes:
I designed the hi-fi prototype to create a simple, modern experience that feels easy to use and engaging. My goal was to keep everything clear and organized while encouraging real-time interaction and participation.
Features like horizontal scrolling for articles, AI group discussions, and live status indicators help users stay connected to ongoing conversations. I also added collapsible buttons, progress bars, and quick links to make navigation easier and keep the design clean and user-friendly.
This design makes it simple for users to explore topics, chat with AI, and be part of a growing community while staying focused on what matters most—conversation and connection.
Design Intent:
The top-right corner features a search icon, profile settings, and a dedicated publish button. A collapsible button reveals like, comment, and share options, with horizontally scrollable articles for seamless browsing.
Rationale:
The top-right placement ensures quick access to key features. The publish button encourages content creation, while the collapsible button reduces clutter by keeping actions hidden until needed. Horizontal scrolling maintains a clean design and allows users to explore more content effortlessly.
Design Intent:
Horizontally scrollable AI topic cards with a green light indicate live conversations. A status bar shows rising topic popularity. A podcast section offers seamless listening.
Rationale:
The green light and status bar highlight trending discussions, boosting real-time engagement. Podcasts provide on-demand content, keeping users informed without leaving the platform.
Design Intent:
Users can choose between private chat or group discussions with AI. The top-left menu lets users add, view, or browse topics. The Upload icon allows document uploads for AI review, with Circle AI providing edit suggestions. Users can then edit and publish directly within the chat.
Rationale:
Providing the option for both private and group chats allows users to choose their preferred engagement style. The top-left menu offers easy access to topic discovery and management. Circle AI's document review and edit suggestions streamline the process of refining content. The publish button within the chat ensures a seamless and efficient content submission process.
Design Intent:
Publisher-only content is locked to maintain exclusivity, while the Advocacy and Action Center lets users explore volunteer opportunities, support campaigns, sign petitions, and stay involved in real-world actions.
Rationale:
Locking publisher content encourages users to strive for publisher status. The Advocacy and Action Center bridges online discussions with offline action, fostering meaningful engagement and social impact.
Design Intent
The Our Community at a Glance section highlights recent activity, top contributors, and ongoing discussions to foster engagement. Unlock Publisher Status uses a progress bar to motivate users toward becoming publishers by showing how close they are to achieving the status. Quick Links offers fast access to key pages like trending topics, AI chat, and profile settings for seamless navigation.
Rationale
Community at a Glance builds a sense of belonging, encouraging users to participate. Publisher Status visually tracks progress, motivating users to contribute more content. Quick Links improve user experience by reducing clicks and simplifying navigation.
05.2. Design System Overview:
I focused on simplicity and readability for my design system to create an engaging user experience.
Logo Design:
The logo features 6 small circles arranged in a circle shape, symbolizing unity and connection, reflecting the platform’s goal of fostering open dialogue and community engagement.
Typography:
I chose SF Pro for its modern, clean look and readability across various screen sizes. It helps create a professional and approachable feel for both headings and body text.
Color Palette:
Primary Color: #BB86FC – Used for icons and buttons to create a visually appealing focal point that encourages user interaction.
Card Color: #211F26 – A deep, dark shade that provides contrast and helps separate sections for better readability.
Text Color: #EAEAEA – A light gray for headings and body text, ensuring good contrast and easy reading, while maintaining a smooth visual flow.
"Design System Overview"
05.3. Final Design:
I designed a high-fidelity prototype of The Circle in Figma to reflect how people would use the platform. I focused on making the AI feel helpful and accessible, whether it's chatting one-on-one, in a group, or assisting with writing and submitting articles. The goal was to create something that feels easy, real, and engaging based on what users said they needed.
Join the Conversation Section: Horizontal scroll with live AI discussions.
AI Chat Page: Private chat with AI or AI group discussions.
Publisher-Only Content: Access exclusive content and publishing features.
Advocacy & Action Center: Explore campaigns, sign petitions, and discover volunteer events.
Progress Bar for Publisher Status: Track progress to unlock publisher privileges.
05.4. Explore the Hi-Fi Interactive Prototype in Figma:
“Tap the image or the button below to explore the full interactive prototype.”
06. Reflection and Future Steps:
Key Takeaways:
Key Takeaways:
AI Integration: The AI feature was an experiment in design to explore how users can discuss topics either personally or in a group chat. This experiment helped test the versatility and relevance of AI-driven discussions in various contexts.
User Experience: The overall design focused on simplicity, aiming for an intuitive user interface that facilitates seamless navigation and interaction with AI-powered features.
Content Personalization: Through AI-based chat and group discussions, users could engage deeply with topics they care about, enhancing the platform’s value for individual users.
Areas for Future Development:
Areas for Future Development:
Scalability of Features: As the platform grows, there will be a focus on optimizing the AI chat system to handle more users and discussions without compromising performance.
Personalization: Integrating more personalized features, like dynamic content suggestions or advanced AI-driven conversation prompts, can further improve user experience.
Accessibility Improvements: Ensuring that The Circle is accessible to all users, including those with disabilities, will be an ongoing priority for future updates.
More Case Studies & Designs 💯
Google Sites
Report abuse