Snapchat Redesign

Snapchat Redesign

Snapchat Redesign

Introduction

Background

  • Purpose: To create a new Snapchat feature that replaces linear group conversations with a dynamic, web-like interface for brainstorming and idea sharing.

  • Inspiration: Current group chats are linear and hard to follow, making it challenging to grasp the main topic or revisit earlier messages.

  • Target Users: Groups of friends, workgroups (e.g., for creative or academic projects), and brainstorming sessions.

  • Goal: Foster creativity, collaboration, and efficiency in group discussions while preserving Snapchat’s signature features.


Challenges

  • Linear message flow makes it hard to track topics and ideas in group chats.

  • Scrolling up to find the origin of a conversation is time-consuming and inefficient.

  • Limited options for collaborative discussions and creative expression.


Proposed Solution:

  • A new conversation web design that allows branching discussions, fostering creativity, and maintaining focus on main topics.

Tools

Figma

Role

Reasearch & UX/UI

Timeline

December 2024 - January 2025

Research

Research Objective

Objective: Understand user behavior and identify pain points in group communication.

  • Methods:

    • User Interviews: Conducted interviews with 5 groups (friends, students, and professionals).

    • Competitor Analysis: Examined other apps (e.g., Slack, Discord) to evaluate their collaboration features.

  • Key Findings

    • There’s a need for tools to organize and brainstorm ideas in group settings.

    • Creative and visual tools (e.g., drawing, custom fonts) are appealing but lacking in current apps.The diagrams below are the responses from the interviewees on these topics.

    • Users struggle with tracking topics in group chats due to linear message flow.

Define

Persona:
 Definition

  • User Persona:

    • Meet Alex, a student and aspiring artist who frequently collaborates with friends and teams on group projects.

    • Goals: Brainstorm ideas efficiently, track conversations, and creatively express thoughts.

    • Challenges: Difficulty navigating long chats and organizing thoughts in group discussions.

  • Core Features:

    1. Dynamic Conversation Web: Non-linear chat interface allowing branching discussions and topic connections.

    2. Message Attachment: Users can attach new messages to topics or older messages for context.

    3. Creative Tools: Drawing and writing in custom fonts and styles to express ideas visually.

    4. Topic Highlights: Users can anchor key topics to avoid scrolling up to find the conversation origin.

    5. Snapchat Core Features: Integration of existing features like desktop sync, video calls, and multimedia sharing.

Design

The Creative Process

Creative Process:

  • Brainstormed ideas, created rough sketches, and refined them into wireframes using Figma.

  • Iterative design influenced by feedback from early testers.

  • UI Highlights:

    • 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.


Test

Prototype Testing:

  • Recruited 5 groups (friends and project teams) to test the Figma prototype.

  • Testing Goals:

    1. Evaluate ease of navigation in the conversation web.

    2. Assess the usability of creative tools.

    3. 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.

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 (e.g., international students, remote workers).

    • 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



Conclusion

  • Vision: Transform Snapchat into a tool for both fun and productivity by enabling dynamic group conversations and creative brainstorming.

  • Call to Action: Expand testing and gather insights from diverse user groups to refine the design.


Introduction

Definition

Design

Test

Final UI

Next Steps