When Flexibility Comes into PLAY

Leonardy Tjan
Tokopedia Design
Published in
7 min readMay 21, 2019

How long does your digital product last? A year? Two years? Or three years from now? I assume many of us have once ended up doing a revamp project a little bit too much. From my experience working with my team, developing a product with sustainable design is possible — and that product is Tokopedia Play.

When It Started

May 2018 marks the debut of Tokopedia Group Chat (TGC). It was developed in the same year as Ramadan Ekstra — Tokopedia’s campaign that took Indonesia by storm.

The peak of the celebration took place a week before Eid Al-Fitr, a period where people usually spend their time together with their families at home. While watching TV at home, viewers can shake their Tokopedia apps to join the group chat and interact with others, participate in quizzes, and spend their yearly Ramadan bonus on flash sales.

The initial concept of Tokopedia Group Chat (TGC) (2018)

However, you might raise a question, does the idea of creating a group chat in e-commerce platform confuse you? Here’s a background story: According to a survey by Hootsuite on Indonesia’s 2018 digital landscape, the country’s internet penetration scope was still relatively low. The survey shows that Indonesia’s internet penetration only hits 50% from the total population of 265.4 million, lower from its neighboring country Singapore and Malaysia which hit 75.1% and 61.0% respectively. At that time, only around one-fourth of Indonesians are using Tokopedia. Thus, this got us thinking.

How could Tokopedia as a technology company acquire new users from the rest of the percentage?

Research by Nielsen about media penetration in Indonesia

The answer is indeed television — the magic box that we see almost every day. A study by Nielsen concluded that TV has the highest penetration in Indonesia, with 96% of penetration.

It goes without saying that Indonesians have a strong sense of community — they, or rather we enjoy commenting communally while watching the trendiest shows, sports matches, and even the live coverage of local celebrities giving birth on TV. Let’s just admit it: every TV program gets more exciting when we watch & discuss it together with other viewers.

However, there wasn’t any dedicated platform in which TV audience could seamlessly interact with what happens on TV. Imagine how many phone calls one had to make to answer a question on a live quiz and ended up empty-handed, or when you stared blankly at the screen without someone to share the fun with?

This was where Tokopedia wanted to tap in. We believe that there is a lot of potential in this social aspect of TV and that group chat might be our long lost answer to approach TV viewers. By developing TGC, we hope to digitize the communication between TV and its audience where people could interact with each other easily. Ultimately, we hope that TGC could provide additional values for non-Tokopedia users to use the app for the very first time.

By developing TGC, we hope to digitize the communication between TV and its audience where people could interact with each other easily. Ultimately, we hope that TGC could provide additional values for non-Tokopedia users to use the app for the very first time.

Redefining Product Goal & Positioning

In 2019, I was assigned to improve TGC design so it could cater to several potential use cases in the future. With only three weeks of design, I started the project by analyzing the research findings, additional data, and the previous version. Then, together with the product manager, we gathered all the stakeholders involved to discuss and brainstorm on potential improvements as well as TGC’s future roadmap. From the session, we discovered that TGC’s positioning and performance were weak.

Function-wise, there was nothing wrong with the product. The previous user acceptance test for TGC was satisfying, showing positive feedback with a high success rate from our users. However, despite its great performance during the 2018 Ramadan Ekstra campaign, the following performance started to lose its shine and direction, even after the partnership with NET.TV. Among the issues we faced were:

  • The constantly decreasing traffic of the TGC, alongside a high bounce rate.
  • The inflexible tabbing style that made it hard for us to explore new use cases.
  • The inability to add a vertical video viewing experience while maintaining the consistency of existing tab — whereas in this mobile-first era, vertical video is something mandatory in any streaming platform.
The initial design showing the tabbing style
  • The tabbing style that didn’t simplify the production process. Developing the contents inside it was technically constraining and highly depend on app release that takes time and budget — a certain feature take ages to develop, or in extreme cases, some only ended up on the drawing board.

Ultimately, we realized that there’s a need to revamp TGC’s positioning and design in order to cater to broader use cases and gain a clearer positioning. More than a group chat, we wanted TGC to be a social commerce platform where users can interact, shop, discover, and get inspired by anything through the dual screen experience (TV and Tokopedia app).

The New Face

In order to carry that visionary positioning, we built a new identity for TGC and rebranded it as Tokopedia PLAY.

The new identity: Tokopedia PLAY

We then conducted a design sprint session and came up with new feasible design ideas. Afterwards, we built a prototype and validated it through quick usability testing. According to its roadmap, we defined three main components of Tokopedia PLAY: chat, video (horizontal and vertical), and content (gamification, flash sale, article, etc.).

To keep the design sustainable, each component has to be modular (easily attached and detached from each other), and applicable with any use cases. As a result, the new Tokopedia PLAY design was finally built:

Tokopedia PLAY modular layout

Given that Tokopedia PLAY is a dynamic product with infinite potential use cases, we need to measure and iterate the design after each release. In order to counter this limitation, we came up with a solution that the content should be easily modified within our own product design team. We developed a bottom sheet with HTML5 so we could freely modify and personalize the content with each TV program and event.

Tokopedia PLAY bottom sheets

To create an open-end design(where possibilities are unlimited), we added dynamic buttons at the bottom of the interface (plus one floating button in the right side of the interface) alongside the bottom sheets. Every button (except the chat area) is changeable depending on Tokopedia’s business needs, such as flash sale, affiliation, quiz, gamification, or any other content, and others.

In the end, all Tokopedia PLAY components could be seen as follows:

The Redesign Outcome

After going through a long redesign process, Tokopedia PLAY was finally launched for our Semarak Maret Mantap (SMM) campaign. SMM is a one-hour TV program of music and comedy broadcasted in three major TV channels. Some of the use cases we utilized during the event were for users to:

  1. Vote and create the storyline of the live sitcom through Tokopedia PLAY
  2. Use promo code that we exclusively launched through Tokopedia PLAY
  3. Have fun with trivia games
  4. Check a leaderboard with prizes to encourage them to better engage with Tokopedia PLAY

Throughout the event, over 230.000 users visited Tokopedia PLAY with zero downtime (kudos to our tech team!). The new feature and design generated remarkably 86.5% engagement rate, which means viewers were engaged in various activities through the platform, which include chat, vote, shop, and many others.

The final revamp result: TGC(before)vs Tokopedia PLAY(after)

Ultimately, this project has taught me that designing a great product means that the design has to be scalable & sustainable. In Tokopedia PLAY, the new modular layout is able to cater to future needs such as vertical and horizontal videos, or simply chat room. Moreover, HTML5 on our bottom sheet is our ace card – it is easily customisable without the dependency of the new version adoption rate and the time-consuming app development. In addition, our business team can also explore business potentials with any TV programs and match the needs of its audience.

Imagine having a blank canvas where we could put anything on it. Want to watch a singing audition? We made a feature for users to vote. Want to play a fun game? We have that too and we definitely plan for more exciting features in the future!

Last but not least, Tokopedia PLAY would not be possible without the help of the amazing people behind the scene; Product Managers (Irwanto Widyatri and Rendi Meliala), Product Design Lead (Farrah Nurul Fatimah), UI Designers (Shinta Tamara and Ryan Adenata), and UX Engineers (Ichsan Indra Wahyudi and Fajar Maulana).

--

--

Leonardy Tjan
Tokopedia Design

A grumpy designer in a pursuit of designing for the real world