August Nguyen

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