SeaTalk Features

SeaTalk is a business communication and managing platform developed by Sea Labs. It facilitates all of Sea employees’ communications.

Sea Talk has also been offered to merchants on Shopee and other SMEs in Southeast Asia

Company

Sea

Role

UI Designer (Desktop)
Graphic Designer

Features Designed

Independent Media Viewer
Developer Mode
My Calls (unreleased)

Features Participated

Contact Card
Leave Status
Group Settings

SeaTalk’s design language emphasises simplicity. It combines conventional component design, minimalistic style, and well-experimented layout. The interface streamlines a rich set of features, making it easy to use SeaTalk.

Independent Media Viewer

Project Background

Media viewing experience on SeaTalk was unpleasant. The viewing lightbox completely overlapped the SeaTalk window and must be dismissed before users can continue with other tasks. SeaTalk users often need to chat with others while looking at a picture, but the original viewer made it impossible to do so.

Requirements

To provide interface design and guidelines for a separate media viewing window. It must be compact, robust and cohesive with the existing design of SeaTalk app.

Pre-design

Competitor Analysis

We took screenshot of the media viewer of SeaTalk’s competitors (Lark, Ding, WhatsApp, WeChat, etc.). From there, we identified conventional design patterns, helpful features and areas to improve.

Original Design

Identifying Challenges

We studied the original design, the UX document and competitors to set out the requirements for the new UI design. They are:

To verify the priorities of menu items, and to position/hide them accordingly
To provide consistent and meaningful icon designs
To formularise the appearance of thumbnails for circumstances when the media file has expired, or the thumbnail has expired, or both
To set a guideline for the default, quick-zoom, maximum and minimum zoom level

First Design & Testing

Acknowledging Assumptions

The first UI design for the MVP closely followed the UX documents and existing UI guidelines. There are assumptions made, which need to be verified at a later stage. The assumptions are:

That the most used media tools are zoom in, zoom out, actual size, and clockwise rotate.
That users often need to access gallery, find media in chat, forward and download.
That users want to view the carousel most of the time and actively use it to switch between media files.
That it’s important to know when and by whom the media file was sent.

Feedback

Feedback from active users indicated that the title bar and toolbar took up too much space. As the most common use case is picture viewing, the picture must be as big as possible within the viewport, and unobstructed.

The feedback also pointed out that users don’t need to know the sender and timestamp of a media file. Furthermore, it’s unnecessary to display the information as majority of SeaTalk conversations are done one-to-one.

Survey

We conducted a survey to verify whether people could understand the icons.

Most users couldn’t understand the icon for Actual Size. Furthermore, the users didn’t even expect to have this feature. They would enlarge a picture to their desired level should they find it too small, and not concerned about whether a picture is at its actual size or not.

Following this discovery, Actual Size was swopped for Fit.

Analytics

We measured how frequently a button was interacted with. The results indicated that instead of using the carousel to jump between media, users just use the arrow keys. They also rarely forward a picture or click Find in Chat.

On the other hand, many people pressed right-click instinctively. However, such interaction returned nothing. After realising its significance, a right-click menu was added in. We selected the menu items based on convention and relation with the current media file.

Final Release

Verified Assumptions

Many assumptions from the original design were disproven. In reality, users expect SeaTalk media viewer to be very compact, rather than advanced.

As a results, the redesign is clutter-free. The title bar and toolbar were combined. The sender and time information were removed. Low-priority tools were hidden away, and the carousel was collapsed by default.

Final Delivery

The final Independent Media Viewer that is compact, robust and cohesive. It has just the features that users need, neatly organised, and well adhered to SeaTalk UI guidelines.
With this viewer, users can see a picture or video while using other SeaTalk features. Or they can just forget about it and get back to working immediately.

SeaTalk’s Independent Media Viewer was finalised in October 2020. It is used daily by all SeaTalk users since then.

My Calls

Coming Soon

Developers Zone

Coming Soon

SeaTalk

SeaTalk is a business communication and managing platform, originally developed by Sea Labs. It facilitates all of Sea employees’ communications. Sea Talk has also been offered to merchants on Shopee and other SMEs in Southeast Asia

FEATURE DESIGNS

SeaTalk’s design language emphasises on simplicity. Its interface makes a rich set of features simple, sets itself apart from several competitors on the market. It combines conventional component design, minimal design style, and well-experimented layout. A great deal of competitor researches and try-outs were carried out for UX and UI design of every feature.

GRAPHIC DESIGNS

SeaTalk’s tone of voice is young, fun and smart. When applied to graphic designs, it is also fine-tuned depending on the medium, audience and message. Being an essential part of the brand and interface, SeaTalk’s graphics must also conform to SeaTalk’s design language, to ensure a cohesive look & feel for the product.

MOTION GRAPHICS

Animations and pop-ups designed for SeaTalk follows its graphic design language. The same elements from the static graphics were made alive by applying meticulous physical effects like bouncing, gravity, pull-back and micro-animations.

As of 2021, SeaTalk has been used by more than 22,000 users across 14 countries in Southeast Asia, East Asia and Latin America. The app has also been downloaded more than 100,000 times from Google Play.
Learn more about SeaTalk here

Sea Hackathon

Sea Hackathon is the biggest annual innovation event organised by Sea Labs. Despite being a signature of Sea Labs, the event has never have a clear visual identity.

OBSERVATION ANALYSIS

It was unclear whether a holistic visual identity is necessary, and how should it be done. Visual designs for similar events from biggest tech companies in the world were analysed to identify the common practice. The results were categorised into several design directions and levels of effort-consumption.
It is reasonable to assume that the more important an event is, the more high-effort the design will be. As Hackathon’s significance is high, the two most low-effort options were eliminated.

BRAND POSITIONING

The design directions were also ranked in terms of design consistency and customisability. While higher consistency enforces identities, customisability provides the room for themes and messages. As Hackathon requires a clear identity and medium flexibility, the Adaptive Logo direction was chosen as a result.

DESIGN RESEARCH

Three main goals for the logo design were set out. The logo must be derivable, distinctive to Sea, and closely linked with Hackathon’s nature. Keywords related to the goals were listed out, and a secondary research was conducted to gather the elements that respond to each keyword.

PENCIL SKETCHES

From 9 main categories of logo designs, unfit options were eliminated. All potential keyword combinations for the feasible categories, as well as their associated elements, were listed out as a basis of the pencil sketches.

DIGITAL DRAFTS

Three sketches were picked out for digitisation, with symmetry and signature elements kept in mind. Besides, the final drafts also require a logical construction that is easy for reproduction.

The final candidates were then applied into graphic representation. Their flexibility and identity strength were carefully evaluated.

CONVERGENCE

Combining letter H with the idea of teamwork and programming, this option carries large positive and negative space, with very strong central gravity. Its complex geometry, however, may limit possibilities.

INTERSECTION

This option carries large positive, with strong central gravity and simple geometry.

CUBE

This option carries very large positive space and little negative space. Its isometric design and off-centred focal point may reduce the number of potential composition.

Intersection was selected, for it is simple, stable and flexible. The most matured key visual was also chosen to catch up with the imminent production timeline.

CREDIT

The pencil sketch stage and web design were partially assisted by Wen Yiran, Senior UI Designer, Labs

Ladon

We Bridge Language Barriers

When people immigrate into the United States, they have difficulties communicating and understanding, which prevents them from assimilating to the new country. Ladon is a solution to provide them with passionate translators who strive to bridge not only language barriers but also cultural gaps.

The project has won the Social Venture Challenge in CGI University 2016 and First prize in Social Entrepreneurship Challenge Lab by UC Berkeley. Ladon’s service has been launched in California and San Francisco in five languages.

WELCOME TO LADON

In order to compete with other services already existing, Ladon positioned themselves in a unique place — between personal machine translation like Google Translate and traditional translation companies. Ladon is a modern on-demand service, and still remains the core of having human touch which make them reliable and relatable.

DESIGN LANGUAGE

The key factor to Ladon’s success is the ability to spot a gap, and how to fill that gap with design.

As Ladon’s clients come from different backgrounds: from elderly people, social workers to organisations and businesses, the design language was made a flexible combination of flat design — which focuses on content — and depth — which enhances legibility. It looks friendly yet professional at the same time.

Ladon’s fundamental philosophy of being friendly, caring and human-run is translated into a warm and bright shade of blue — the colour of hope and peace — that we call “Ladon Blue” and a system of cartoon characters as the guides for our web pages.

LADON APP

The mobile application is an even more sophisticated representation of the design language. It has to combine the distinctive Ladon visual with the operating system’s assets, and at the same time, looks refreshing and action-nudging. This results in a series of elements — shapes, patterns, colours and animations — that can transmit information, and at a deeper level, the brand’s friendliness and human-feeling.

The available language assistants are grouped into a pseudo-3D shade that let users know how many assistants are available, as well as their call settings at a glance, and expanded upon users’ interaction to reveal detailed information about an assistant’s background, passion and history.

EXPERIENCE RESEARCH

In order to expand the business, Ladon has spread its service to organisations and businesses. Interviews and observation tests were conducted to discover the pain points during non-English speaking consumer-to-business transactions, and test them against a portal/marketplace wireframe, where we bridge the language barriers between consumers and businesses.

One year after its pilot study, Ladon has expanded its service to more than 190 registered clients across the U.S., and recruited a network of more than 100 empowered immigrants as language assistant.