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.

My Calls

Coming Soon

Developers Zone

Coming Soon