Design Journey: Texts

In July 2021, I was delighted to take on a side role with Texts, an incredibly powerful app that allows users to consolidate messages from different chat platforms into a single inbox.

When I started, Texts’ overall UX wasn't bad, flows were quite linear…

But I didn’t think the same about user interface.

The UI

The UX was good, however, I noticed some room for improvement in the UI design.

Icons

The first thing that jumped out at me while browsing through Texts.com was the lack of visual consistency across the UI elements, particularly the icons.

And of course, that’s were we started: giving some consistency to those icons with some 20x20px large, 1.5px tick alternatives.

Obviously those are not the only icons that were replaced, I just picked and showed the ones that used to stand-out negatively at glance.

Colors

You may have noticed that icons aren’t the only difference in the previous screenshot, even app’s background color changed.

Currently, colors aren’t handled that way I expected. By looking at the code I noted that:

• No color shades defined for such complex app

• Too many occurrences of few colors with uncontrolled opacity variants

• Non-existent naming conventions

Beyond color handling, even the look didn’t convince me. For example, the blue-ish gray used on dark appearance didn’t really follow the overall native feel of the app.

It was quite obvious that the app needed an improved (and actually defined) color system refresh.

I had to handle both the color system creation and its application inside code. So I needed a way to design, test and apply colors in a frictionless way.

The approach

I ended up going with design tokens — My primary goal was a design system when I started, so I wanted to build the foundations for it.

But let’s go deeper…

I created a file (library) for every context:

• Styles - Light for light appearance

• Styles - Dark for dark appearance

• Styles - Common for styles used on both appearances

Base tokens

Base tokens is where everything start from, they aren’t used directly but they are the origins of every other color that will be created.

Common (and component-specific) tokens

Create common (and component-specific tokens) tokens and connect those to base tokens using Figma Theemo.

From design to code

Seamless color tokens export from Figma to code with a custom script, in just a few of seconds:

1. Run yarn tokens inside project directory

2. Done. Colors are ready to be applied, tested and… committed.

This approach not only allows a frictionless design-to-code transition, but it even grants great usability in Figma.

By having light and dark colors split into different Figma files, colors can be bi-directionally tested: not only in code, but even in Figma thanks to the Swap Library feature.

In fact, designing the new platform authentication flows has been flawless.

Features

Chat-bar

During these months, I haven’t only refined the user interface. I contributed on shipping new and redesigned features as well, such as the one (partially) contained in the previous video and such as the **redesigned chat-bar**.

Before the redesign, it seemed that chat bar buttons were equally important, but it’s quite evident that they should not:

• Would user attach GIFs or Files with the same frequency with which he would send text-only messages?

• How many times would user schedule a message (the “clock” icon) instead of sending it instantly?

With the redesigned chat-bar we improved buttons not only by changing their positions and order, but even by changing their prominence.

• “Attach a file” and “Attach a GIF” buttons are weaker than “Send” button and they have been put on the left of the textarea.

• “Send later” has been placed inside the dropdown you’d open by clicking on the arrow (chevron) on the right of the “Send” button.

Misc