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

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

Mekong, 2100

“Mekong, 2100” narrates a peculiar tour along the Mekong that takes the readers across time and space. Every aspect of the author’s affection, memories, concerns and predictions for the river — which associates with his identity — will be unfolded through a series of four picture books.
Read the full process report here.

FROM LANCANG TO CUU LONG

Being born and raised in Can Tho, the surrounding Mekong river has always been a substantial part of my identity. 20 years of my life have been fed by the rice, the fish, the fruit, and everything else grown on the enriched and fruitful Mekong Delta.

Not only is she important to me, but so is she to more than 70 million other people directly rely on her for livelihood. More than 15% of rice in the world comes from here, feeding about 300 million people worldwide. Most if not the entire land of Mekong Delta depends on the nutrient-rich sediment carried down from the upstream, which also make up for the coastal erosion.

The Mekong River Basin also houses a remarkable nature and human diversity. Coming from Tibetan deserted glaciers to the vast and peaceful Mekong Delta, Mekong — or Zaqu, Lancang, Mae Nam Khong, depending on where she is — has been nurturing countless lives and witnessing more than two millennia of culture.

FROM 1995 TO 2100

Things are always changing. However, some changes are uncalled for.

The Mekong has been heavily dammed for decades, the first ones being built no later than 1995, when few would think about how serious the consequences could get. They might not have expected there would be more than 50 dams at different scales operating in one same river system. The Mekong might be able to survive a few, but as more and more dams being built — the plan goes on until 2030 — some signs of what to come cannot get more obvious.

But that doesn’t stop Mekong from being the fastest growing river basin in the world in terms of hydropower construction. Someday, maybe as late as 2100, while most of the sediment building the delta has been trapped upstream, a one-meter rise of the sea-level can flood more than a quarter of the delta, overwhelm the home of five million who have nowhere to go.

FROM STATUS QUO TO MOTIVATIONS

I want to bring a voice to the table and fill in a gap that has little been touched. While the existing projects focus more on depicting the momentary beauty or fearfulness of the Mekong, “Mekong, 2100” aims to explore the original characteristics of the river and the devastation of human’s actions.

The Mekong culture has certain distinctive features, where what seem frightening like floods are essential to lives, and what deemed as trivial as a 0.5°C increase might be detrimental. As misinterpretation from outsider is inevitable, what further differentiates this project is the perspective of a local resident.

Targeting at foreign tourists in Mekong Delta, the work is executed in a narrative format of a tour across time and space, translated into a Southeast Asian-styled illustration series, with the ultimate goal to spread the awareness and communicate the moral of respecting nature.

 

NARRATIVE DEVELOPMENT

Dividing the narrative was taken seriously, as it affects all aspect of the final product, content-wise and appearance-wise. In order to have the weight equally distributed and honour the final goals at the same time, options like topic-based, or country-based were considered, before a time-based story was chosen. Besides being the optimal way to distribute the weight equally, it highlights the biggest motivation of the project: how the Delta is projected to change in 2100. The target audience — another important part of the brief — also took part in this decision as well.

The final option is a time-based approach that has a touch of everything. While travelling across time, the readers take a tour through countries as well. At the same time, each book will focus on one specific topic.

Read more here.

VISUAL DEVELOPMENT

“Southeast Asian” is the keyword for the visuals, from inspirations to the final artworks.

The first inspiration for this series, “Malayan Life” by Seah Kim Joo, was the major influence for the first phase of the project. As a mural, the painting looks magnificent for its even depth and rich of details. Adapting the style into the story was a large part of style exploration (‘before’ sketches), and it turned out that this style didn’t fit my work due to differences in genre and size. There needs to be an increase in depth and decrease in the level of details to compensate the smaller scale. Moreover, the visual flows were also adjusted to be more dynamic and make room for text.

The final illustrations (‘after’ sketches) is a combination of the findings during the style studies, a new inspiration palette, and suggestions from ADM faculties. The different colouring styles resulting from the experiments got unified in a larger canvas, with organic textures and motifs as found on Asian folk paintings in a more contemporary set of compositions.

Read more here.








MEKONG, 1995

As the year of 1995 witnessed the foundation of the Mekong River Commission, an effort to reserve and develop the Mekong toward sustainability, the first part of the series is about the river’s history and nature in its early days.

(Optimised for digital view. Some pages were omitted)





MEKONG, 2100

The last and most important component of the series voice out an alarming projection of a dystopian future of the river and the long-gone Mekong Delta, where all the consequences of the dams are irreversible and unrecoverable.

(Optimised for digital view. Some pages were omitted)



…AND MORE TO COME

Besides “Mekong, 1995” and “Mekong, 2100” set to be completed first for ADM Show 2018, “Mekong, 2018” — which features the cultures in the Mekong river basin — and “Mekong, 2030” — which discusses the dams and climate change after the last dam is expected to be completed — will also be released in the future.

“Mekong, 2100” was exhibited in ADM Show 2018 and was nominated for the Sustainability Award 2018.

CREDIT

  • Project supervised by Asst. Prof. Ng Woon Lam
  • Mekong by Vinh Vuong
  • Kaisho by August Nguyen
  • Sounds by the Economist