UX Guidelines

The 7 Pillars of Cola Design

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

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

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

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

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

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

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

bubble-line-breaker

Why Bubbles?

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.

bubble-line-breaker

Types of Bubbles

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.

Informational Bubble Lifecycle

Informational-bubble-lifecycle


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.

Collaborative Bubble Lifecycle

collaborative-bubble-lifecycle


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.

Media Bubble Lifecycle

Media Bubble Lifecycle


bubble-line-breaker

Bubble States

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.

Compose Sample

1. Compose

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.

Compose State Tips

Branding
Send Button
Configuration
Navigation
Branding
Include some branding and a simple description to provide context for what your bubble does.
Send Button
Keep the Send button disabled until the bubble is sufficiently configured.
Configuration
Enable the sender to configure the bubble to their specific need.
Navigation
If the compose needs multiple screens, like a results list and details view, make sure to include a way to go back to results.

inline

2. Inline

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.

Inline State Tips

clear-call-to-action
context
hiding-or-showing-header
Clear call to action
For collaborative bubbles it’s important to show the recipient a clear call to action to help them know how to participate.
Context
Provide sufficient context for someone who hasn’t interacted with your bubble by making it easy to understand at first glance.
Hiding or showing header
You can choose to show a header bar on your bubble by specifying Default, Edge-to-Edge, or Full bubble styles. Keep in mind the header provides basic context of your bubble icon and name.

full-screen

3. Full Screen

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.


Beyond States: Other aspects to consider

It’s the subtle details that can really make your bubble powerful, easy to use, and will keep people coming back to it.


bubble-name
bubble-menu
Bubble Name
The name you choose will probably be the first encounter users have with your Bubble so make it as clear as possible. In choosing an appropriate name, make sure it:Is action based, to indicate to users it will help them complete a task at hand
Is clear and easy to understandYour bubble name appears in the following areas within Cola:Bubble Menu
Launching from the bottom of the conversation view. This is where users discover and choose bubbles to send.

Bubble Bar
Appears at the top of the conversation view and acts as a quick link to the bubbles existing in a given conversation.

Bubble Header
This is the title that appears at the top of your bubble.

Notifications
In push and inline Notifications sent by your bubble.

notifications
Notifications
Custom Bubble Notifications are useful for keeping everyone up to date about changes in a bubble, bringing people back to a conversation, and for providing social pressure to respond to a bubble. Notifications are displayed either in the conversation or as push alerts by iOS depending on if the user is in the app.When designing your bubble consider what events should trigger notifications, the relative importance of the events (whether Major or Minor) and what text should be displayed for the notification.Major notifications play a louder and more noticeable sound than Minor notifications and should be reserved for the most important events, such as confirming the final time on a When Can We Meet? Bubble or after everyone has voted for a Quick Poll.Just remember that since notifications will play a sound or vibrate a user’s phone just like a message that they can quickly be overwhelming. Use them only when the update is essential for everyone on the conversation to see.

Requesting Location Access
Location based bubbles are really powerful, but with power comes responsibility. For privacy reasons bubbles are required to prompt the user for permission to access their location the first time they are used.Make sure your designs gracefully handle situations where:The bubble prompts the user for location accessThe user denies location access to the 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.

[image]
Providing feedback and handling errors
Things happen that you don’t always anticipate, whether it’s the network going offline or some other unexpected state.When errors occur that impact the user’s experience, be sure to provide clear feedback so they can determine how to best recover from the issue.For example, if your bubble requires network access for the Compose view, make sure to clearly indicate that to the user rather than showing an empty screen.

Layout Specifications

Below are the guidelines for making bubbles and the supporting screens. For more information download our sketch template.

Compose_screen

Compose Screen specifications

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.


Branding

Branding

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.

inline-bubble-specs

Inline Bubble specs

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.

Full_screen_bubble

Full screen bubble specs

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.


BUbble_icon

Bubble icon

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.

text
Text Specifications
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.


bubble-line-breaker

Resources

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.

sketch-step1
Step 1:
Open the “BDK Design Template.sketch”. Select “File”, and click on “Save as Template”.

sketch-step2

Step 2:
Enter in a name for your template.

sketch-step3

Step 3:
Select “FIle”, click on “New from Template”, and select the BDK Design Template.