SMS migration

Updating features to match new visual direction while fixing usability issues in the flagship version.

Overview

Need to update features to match new visual direction

Outreach's Design Systems team completed a complete visual rehaul of the product's components in order to move into a more modern look. Designers were tasked with updating their surfaces with the new "restyled" components. My work spanned multiple surfaces, one of which was the SMS feature. Since we were already in the mindset of "update and improve", this project was focused both on 1:1 migration and fixing any usability issues that lingered in the flagship version.

Auditing the platform

Three surfaces to migrate

The main SMS page: This is where users can see all of their previous text exchanges and create new text exchanges.

A one-off SMS experience: This is for users who want to send a quick message while they are elsewhere in the product.

SMS tasks: An experience where users can create and schedule a task to send an SMS message to their customers. Outreach's tasks can be pulled up anywhere throughout the product and outside the product via our Google Chrome extension.

Auditing the platform

Identifying issues with our SMS offering

Issue 1: Search bar spacing

The search bar on the main SMS page lacked proper padding and spacing.

Issue 2: Subject line requires memorization

Subject line requires users to memorize customer's phone numbers in order to remember who the text exchange is with.

Issue 3: Visual differentiation

Now that our new design system had rounded buttons, the rounded text bubbles do not have any visual differentiation from our buttons.

Issue 4: Avatar component

The avatar component next to the sender's messages added no additional information or clarity to the user's experience. It also wasted horizontal space, particularly in SMS tasks.

Issue 5: Send button copy

The send button explicitly said "Send," taking up valuable typing space for users. This was especially problematic for SMS tasks with limited horizontal space.

Issue 6: Color palette

The flagship version of the one-off SMS dialog used improper color palettes. We needed to correct this by using an off-white background color for the dialog.

Issue 7: Scrolling to typing interface

Users had to scroll down to the bottom of the text exchange to access the typing interface while using SMS tasks. This could be disorienting for first-time users and frustrating for those wanting to quickly respond to a message they already saw on another surface.

First iteration

Tackling how to update text bubbles

The first iteration resulted in us creating text bubbles that an 8px rounded corner, so that they look more like rectangles rather than full ovals. We also made the sender's text bubble color a dark gray and the receiver's text bubble white, so that there would be no overlap from the colors used for buttons or interactive objects. To synergize with this change, I changed the texting background be a light shade of gray supported by our new design system.

However, there was also concerns from the Design Systems team that the usage of such dark colors for a prominent, recurring component would not match the new visual style of the product.

First Iteration - Text Bubbles

Final iteration

Adjusting the designs of text bubbles

Thus, we moved forward with a different version where the sender's text bubble was a shade of purple that was more complimentary to our product's new look. With our new colors for the text bubbles, we needed a white background in order to be compliant with color contrast standards. To solve for this issue in the one-off SMS dialog, I opted for a border around the texting interface.

Final Iteration - Text Bubbles

Subject line

Updated the subject line so that once the first message has been sent, the subject line changes the receiver's phone number into their contact name.

Optimizing for typing space and reading space

We removed the avatar component for the sender. We also stickied the typing interface to the bottom of the screen, so that users always have access to it.

Updating the Send button

Replaced the "Send" copy with an icon, with the ability to see the title of the button on hover for additional context and accessibility purposes.

Defining how text bubbles should be resized

The flagship version of the SMS platform also had the issue of line lengths spanning way past the point of optimal readability. Therefore, I defined when text bubbles should wrap across the 3 different widths we supported.

• For surfaces with narrower widths (640px and narrower), the max line length was 45 characters
• For surfaces with wider widths (641px and higher), text bubbles wrapped after 75 characters.

Results

What's next?

The updates to SMS were shipped to our customers in March 2023. Through some of our customer feedback channels, we've heard about customer appreciating the new SMS experience especially in the Tasks surface, due to giving them more space to both view and type messages. The design of the "Send" button has also been utilized in different parts of the product, such as our new AI Assist feature.

Next, we'll be testing if we should incorporate a "Scroll-away" functionality for the Subject Line in Tasks, to further increase the amount of reading space for our users.