Problem

How can we provide our users a communication channel to share community incidents?

Solution

We built an end-to-end messaging feature that allows creating group chats.

Impact

The feature is currently in development. Close to be fully implemented.

Case Study

Messaging

Messaging features in a highly social-oriented era seem a no-brainer decision when building a community.

As a product designer at SOSAFE, I created an engaging solution to motivate our communities' interactions inside the apps. We worked along with early adopters that helped us implement a group chat in the user experience.

Since the group chat represented a significant milestone for the company and a considerable effort to the development team, we invested additional energy into the design rationale and user research to validate our assumptions that group chats would be a right-on-target decision.

Problem Definition

SOSAFE is a safety network where users share incidents on the streets: from lost pets and accidents to crime incidents. The app receives high activity when events are active or recent.

However, once the incident has been closed, some users expect to maintain private communication with the other people involved.

User Research

We conducted user interviews with several participants and early adopters. Interviews were conducted remotely through video calls.

Questions/Unknown: How users keep communicated with their community? How can we add value through a messaging feature?

Findings: Users share their phone numbers in the comments section to create an external group—like WhatsApp, Telegram, and Facebook Groups. But they would prefer to do it directly on SOSAFE.

Key Aspects in Design

The chat group experience begins in the list view. Users can see if they already joined a group. Then, they can open a single chat. Also, they can create a new chat group, make it private, and share the group link with their community.

Messages screen for iOS.

Single Chat

We currently have groups with more than 30 members. Recognizing each member of the community is crucial for our users. The single chat view displays the bubble messages in chronological order with the member's name and profile picture.

Single chat screen for iOS.

Design Handoff

I created a section in the design file to provide the new components to our developers. In this section, anyone could see how I composed the interfaces in our 8-pixel base, following the design system guidelines.

Design handoff considerations: Empty states, edge cases in the message delivery and chat settings, loading states, modals, and warnings.

Messages components for iOS.

Dark Mode

The new feature includes pairing with dark mode. The goal was to provide a seamless, well-crafted interface.

Messages in dark mode for iOS.

Challenges & Outcomes

As mentioned before, a messaging feature seems an all-time good strategy. But we were aware of the opportunity cost. We did not want to build something similar to WhatsApp; we did want to create a wonderful experience according to our user's expectations.

The challenge was to properly formulate a hypothesis based on our assumptions while considering the user's input and previous research. I struggled to define the initial scope, trying to attend to users' needs without compromising the development timeframe.

What did I learn?

Resources

Next

Map Interfaces