Introduction
Summary
Messaging today is trapped in a linear timeline forcing users to scroll through endless conversations to find meaningful moments. That is why I came up with the solution to change Snapchat into a messaging canvas. By replacing this traditional feature with a web like interface, users are able to connect messages, ideas and moments together and can be revived at anytime. This allows users to express themselves creatively and perfect understanding of conversations in group chats.
Background
Snapchat’s group chats rely on a linear message flow, which works for quick conversations but breaks down during brainstorming, planning, or long-term discussions. This leads to a lot of users struggling to revisit ideas and understand context begin messages and these users are able to track multiple topics at once.
This project seeks to transform Snapchat group messaging in to a playful experience while allowing communication amongst users.
Research
Key Findings
Objective: Understand user behavior and identify pain points in group communication.
Methods:
User Interviews: Conducted interviews with five students.
Competitor Analysis: Examined other apps like Slack and Discord) to evaluate their collaboration features.
Key Findings
Users do not just want to find old messages they want to find how the ideas evolved.
There’s a need for tools to organize and brainstorm ideas in group settings.
Creative and visual tools are appealing but lacking in current apps.
Users struggle with tracking topics in group chats due to linear message flow.
“I always have ask the group chat what they were talking about.”
~ Kofi Computer Science Major
“I scroll for a whole minute just so I can remember what the conversation was about”
~ Amy Biology Major
Define
Definition
Meet Sam, a student and aspiring artist who collaborates with classmates on visual projects. He needs to quickly collect, organize, and critique ideas with his group before presentations and deadlines. Traditional group chats bury feedback, making it hard to understand which ideas are evolving and which are approved.
Core Features:
Dynamic Conversation Web: Non-linear chat interface allowing branching discussions and topic connections.
Message Attachment: Users can attach new messages to topics or older messages for context.
Creative Tools: Drawing and writing in custom fonts and styles to express ideas visually.
Topic Highlights: Users can anchor key topics to avoid scrolling up to find the conversation origin.
Snapchat Core Features: Integration of existing features like desktop sync, video calls, and multimedia sharing.
Design
The Creative Process
I had always struggled with group conversations and understanding the communication of different topics. This idea came to me while trying to solve my algorithm homework on Turing Machines. I wanted the messages around a topic to show connectivity and creativity. So I did the following.
Brainstormed ideas, created rough sketches, and refined them into wireframes using Figma.
Iterative design influenced by feedback from early testers.
In creating the UI I sought to create:
Conversation Web: Interactive, node-based design for group chats.
Creative Toolset: Toolbar for drawing, fonts, and color customization.
Minimalist Aesthetic: Maintains Snapchat’s youthful, intuitive design while introducing new features.
Topic Anchors: Clear visual hierarchy to distinguish between main topics and sub-threads.
The Design concept and the Turing machine homework
Test
This was my process of testing for the new Snapchat canvas feature.
Recruited 5 college students of different majors to test the Figma prototype.
Testing Goals:
Evaluate ease of navigation in the conversation web.
Assess the usability of creative tools.
Identify challenges in attaching messages and managing topics.
Findings:
Successes:
Users found the conversation web engaging and intuitive.
Creative tools enhanced the brainstorming experience.
Challenges:
Some users wanted clearer differentiation between main topics and sub-threads.
A few struggled with message attachment during fast-paced conversations.
Revisions:
Enhanced topic hierarchy for better visual distinction.
Simplified the message attachment process with drag-and-drop functionality.
A double click or double tap button to reply
Final UI
Home Screen: Overview of all group chats, highlighted topics, and notifications for updates.
Conversation Web: Visual representation of messages and topics with interactive nodes.
Topic Highlights: Anchors for key topics, displayed prominently for quick reference.
Integrated Features: Desktop sync, calls, and multimedia sharing preserved from Snapchat’s original design.
See Prototype
Next Steps
What's Next
Development:
Use React Native for cross-platform development.
Implement Firebase for real-time data synchronization.
Build creative tools and the conversation web with Canvas APIs.
Expanded User Testing:
Test with diverse user groups like remote workers and students from other schools.
Collect feedback on usability, accessibility, and engagement.
Future Enhancements:
AI Integration: Automatic topic summarization and suggestion of related messages.
Accessibility Features: Voice-to-text and audio playback for visually impaired users.
Offline Mode: Allow brainstorming even without an internet connection.
Launch and Marketing:
Beta testing with select groups.
Social media campaigns targeting students and professionals