Design should be an ambassador welcoming strangers to new technology and concepts. Likewise poor design can do just the opposite, driving people away from a product. How do we make things Approachable? It’s a culmination of details found in color, display copy, sounds, buttons, onboarding, etc.
Make a product that makes sense to users on the first run. Users should not have to “think” about how to use the product they should just use it. It’s ok to use “hints” or tutorials when they truly add value however do so sparingly.
Simplicity is something we strive for at Cola. There are many feature ideas we could add into Cola, many of them good ideas. We restrain ourselves from adding in too much on purpose to keep the experience simple. Some of the tech behind these bubbles is pretty darn complex but we don’t want the user to see or feel that complexity.
We strive for efficiency in every product decision we make. In fact our whole experience is built on efficiency. We like to think one bubble for example can replace dozens of text messages at a time. That’s efficient. If we can add efficiency to your daily life we’ve accomplished our mission.
Why not have some fun while we can? After all messaging is increasingly a part of modern life. We aim to delight the user whenever possible by adding whimsical, yet not egregious design flourishes like fun bubble sounds and winking icons. We want our users to smile.
Above all design should be useful. Any feature we add to Cola should solve a real problem and add value to the user’s everyday experience.
We believe in moving fast and shipping regularly. That allows us to stay out in front of our competition and consistently innovate by incorporating the latest technology and trends.
Today’s messaging apps are incredibly inefficient for on-the-go communication. Group conversations drive you crazy by constantly notifying you of new messages, and it’s impossible to keep up with when trying to organize with multiple people when you’re tied up with something else.
At Cola we believe that messaging can be made better by streamlining the communication process with interactive bubbles. Send a bubble that suits the purpose and drive the decision to conclusion easily within the group. Instead of typing tons of messages to figure out who can bring what, or how far away people are from the picnic, just use a bubble!
Bubbles are smart and can stay up to date with the latest information. There’s no need to go to another view or browser to see the latest, just scroll the bubble into view or tap to go full screen.
In building these first Cola bubbles we’ve seen the power and efficiency that bubbles add to a conversation. We look forward to seeing your ideas come to life, too.
Build a bubble, not an app
The great thing about Cola bubbles are that they bring relevant information directly into the conversation itself as mini-apps.
Build a bubble when you think you have a distinct service or idea that can be realized best through messaging vs in a web or app environment. The most successful bubbles are highly focused on a specific task making that a key differentiator.
There are three types of Bubbles, all of which share the same design philosophy of keeping a conversation moving. The difference between them is if the intention is to primarily display content or real-time information vs being focused around collaboration or decision making.
1. Informational Bubbles
Share a bit of info that’s relevant to the conversation with an Informational Bubble. This type of bubble can contain either static or dynamic information depending on what makes sense for the content being shown.
Some examples currently in Cola are “How’s Your Weather?”, “I’m On My Way”, and “Track My Flight”.
The “How’s Your Weather?” bubble contains just a snapshot of everyone’s weather at the given time (perfect for bragging when you’re in Hawaii), where as “I’m On My Way” continues to update during the specified time interval to show your current location, and “Track My Flight” periodically refreshes to display the current status for the specified flight.
Informational bubbles tend to not require the recipient to opt in or respond in any way to view the sent information. Though sometimes it makes sense to have the receivers chime in too, like with How’s Your Weather.
2. Collaborative Bubbles
These Bubbles ask the receiver to do something whether it’s picking a poll item, sharing location or driving a decision. Think of it as a two way interaction between sender and receiver(s).
These bubbles can be useful for both long and short-term tasks. Quick Poll and ToDo list exemplify collaborative Bubbles in the Cola menu.
A Quick Poll can help you choose the location for your picnic, while a To Do List can track the different items everyone needs to gather for the picnic itself.
3. Media Bubbles
Media bubbles are shortcuts for sharing your favorite media types. They do not require any action on the side of the recipient. Good examples of media bubbles in the Cola menu are Youtube and Giphy.
There are 3 main states that all bubbles move through and each state and it’s related properties should be carefully considered in your design.
The Compose screen opens right after a user picks your bubble from the bubble menu. This is where the sender customizes the content of the bubble before sending it to the conversation. That customization could be simply searching and picking a Giphy, deciding how long to share location, or suggesting meeting times.
The Inline Bubble is added to the conversation after being sent. Conversation participants can interact directly with the bubble in this state without needing to go full screen.
Keep in mind any differences between what the Sender and Receiver may need to see in this view. Although most of the time the versions will be identical, when necessary you can show different content or controls for the Sender or Receiver.
For example, if the Receiver needs to respond to the interactive bubble by sharing their location like in Where Are You Now? or choosing an item like in Quick Poll, make sure to include sufficient context and a clear call to action so they know what to do.
Tapping on a bubble will take the user to a full screen version of the bubble.
Often this view displays more information or a more complex view to take advantage of the full screen and since the user is choosing to focus on the content. The Sender and Receiver versions are usually identical.
A good example of this is How’s Your Weather bubble where you can see more detailed information for each person sharing their weather in the full screen view.
Side note: You can also open the Full Screen View by tapping the bubble in the Bubble Bar or by tapping a notification from the bubble in the conversation.
It’s the subtle details that can really make your bubble powerful, easy to use, and will keep people coming back to it.
Appears at the top of the conversation view and acts as a quick link to the bubbles existing in a given conversation.
This is the title that appears at the top of your bubble.
In push and inline Notifications sent by your bubble.
The user denies location access to Cola
Check out the Weather bubble sample code for a good example of how to properly request location access.
Below are the guidelines for making bubbles and the supporting screens. For more information download our sketch template.
The compose screen is where users are able to customize a bubble. There are many ways to go about it. The whole screen below the header is available for your design. Keep in mind that keyboards and system notifications will overlay content.
Add some branding into the experience to provide context and tie it back to your service. We suggest two ways to think about it. Full page and ¼ page. The full page is typically used in the case where there is a single action to be taken and the ¼ page is used when the experience starts right in the first screen.
The specs above pertain to the body of the bubble, what is shown in white above. They do not include the header or the tail. Note that when using images full bleed they will be cropped thewidth of the tail on the left or right depending on if it is a Sender or reciever bubble.
Tapping a bubble invokes the full screen mode which utilizes all of the screen under the header. Notice in Full Screen view the user can only “X” out of the screen.
The Bubble icon is the first thing users will see regarding your bubble. It’s shown in the Bubble menu and the Bubble header.
We use the icons as masks and apply a tint to them to match the color scheme where they are shown in the UI. Be sure to include an alpha channel in your final assets so the cut outs are visible.
Above are some of our house icons. It’s not required to match the look and feel of them in order to make a bubble but we think it would be neat if they all matched as much as possible.
With that in mind here are a few guidelines.
* Simplify as far as possible
* Use a consistent stroke (1.5)
* Avoid 90 degree corners (they pop bubbles).
* Include alpha channel in final assets
* Remember to save your assets at 1, 2x and 3x.
Type is up to the developer however we do have a list of best practices that are consistent with the Bubble designs we are building in the core set of Bubbles. The range we find works best is 20pt to 11pt.
Below are links to additional resources that can help while working with Cola Bubbles.
Cola Sketch Template DOWNLOAD
This template contains all the necessary components needed to mock up a Cola Bubble experience.