Ravel, an off-grid messaging app
@Spideroak inc · 2022
Context
Starting as a down-to-earth (pun intended) demo of our decentralized mesh satellite network technology, Ravel soon grew into a simple to use messaging app with a very powerful trick up it's sleeve—messaging people with or without the internet!
MY ROLE
THE TEAM
TIMELINE
Responsible for research, product vision, UI design, prototyping and delivery of dev-ready design/documentation
1 designer, 2 product managers and 1 engineer
May 2022 — Nov. 2022
Discovery
Reearch and Identifying Our User(s)
The possibilities for users that could benefit from the off-grid communications capabilities of the demo quickly grew to include a wide range of user personas ranging from festival concert goers to journalists in countries with less-than-adequate free speech laws.
Identied seven distinct personas based on user research
The team opted to conduct user interviews with one person group, military field personnel as SpiderOak had an existing relationship with a large user base in this group.
Business goals/User needs
We identified our core business goal for the app and using this as a North Star, identified 3 key challenges that were crucial to nailing the experience and solving our user/business goals:
Build a simple messaging app for low-connectivity users with intermittent-to-no internet access... easy peasy 🙃
Design solutions
The final design incorporated several key UI elements that address specific challenges for low-connectivity users:
👋 Easily add members in person...
We designed a simple QR code method for adding/joining a chat in person (sans internet)
📍 Indicating chats/users within bluetooth range
Users within bluetooth range are identified with a distinct icon throughout the app.
Users within bluetooth range are identified with a distinct icon throughout the app.
🧵 Weaving together disparate off-line convos...
As early adopters and internal testers began using Ravel, chat groups would form. Within chat groups, off-network splinter groups would have entire conversations that peppered into other convos leading to conversational CHAOS!
Early diagram/animation illustrating the problem for developers/project managers
The solution — a card-based conversation UI…
The design incorporated a simple card UI to create clear distinction between the different conversational threads that were merged together, as apposed to simply peppering in the messages according their timestamp.
Distinct conversation branches displayed as separate cards in the UI
Design detail: note the sticky tag at the top of newly synced/discovered conversation cards: