How We Designed the New Viki Homepage

Maximizing Content Discovery and Reducing Bounce Rates

Title: How the new Viki homepage leads to better content discovery and decreased bounce rates

Creating a thoughtful user experience centers on a seamless customer experience, but also focuses on effectively addressing the company’s business objectives. Although the homepage may not be the most important page on Viki, most users still visit Viki through its home first. Hence, from a business perspective, we cannot deny that the home is still the most valuable real estate on Viki. In this post, I’ll go into details about how to we ideated and redesigned the Viki homepage in late 2016.

Content 📝

Part 1: Goals & Strategy
Part 2: Design Process
Part 3: Results
Part 4: Learnings
Part 5: Next Steps ?

We asked ourselves, what is Viki hoping to achieve with this new homepage?

Part 1: Goals & Strategy 📊

Business Goals

• Drive content discoverability
  Identified more interesting content for both new users and active fans (e.g., personalized recommendations or top trending shows).
• Decrease bounce rates
  Removed underperforming sections from the page and focused on displaying more meaningful information for the users.
• Promote the Viki community (a.k.a value proposition)
  Viki is not just another video viewing product. We are different from the rest because we have a big subtitling community that makes TV shows accessible to viewers around the world. We wanted to highlight this unique and amazing feature to new visitors.

Design Goals

• Better content presentation
  We needed to ensure that the new homepage would allow users to spend less amount of effort and time to discover and watch shows they like.
• Simplify (reduce unnecessary information)
  Simplifying or realigning content for users was key to the design process. In other words, we needed to remove sections that showed low engagement.
• Update our new look
  An updated feel and vibe was necessary to amplify the Viki brand, and a new UI design guideline was introduced for better flexibility, control, and ease of maintenance.

Technology Goals

• Smarter personalization
  Our goal was to deliver personalized content that felt genuine and accurate. We realized that our users did not want to be confronted with the same blocks of information(shows) they’ve already seen. They wanted a quick and easy way to look for content that catered to their taste.
• Apply new web style guide
  Style guides can increase understanding, encourage cooperation and boost maintainability. This was an important exercise because it amplified the team’s ability to communicate consistently across all key pages and channels.

Part 2: Design Process ✏️ 📐

Primary: ‘In-and-Out User’
Secondary: ‘Active Fan’

Old Viki personas.

The next step was to get in touch with the users and gather data (qualitative and quantitative). In order to understand their general thoughts about Viki, needs, and frustrations, we conducted a few Skype conferences and online intercept surveys. These studies allowed us to build empathy and uncover the hidden needs and insights that we may not have previously identified.

One of the initial survey questions we asked our users. “Help us improve. What do you like and dislike about our homepage, and what can we improve on?”

The following includes the questions we asked ourselves:

• Why do users visit the Viki platform?
• What are the problems they are facing now with the homepage?
• What do they expect to see on the homepage?
• How would users compare Viki to x,y,z ? In what aspects?
• If Viki is _________. What would it be?
• What would the users do if there were no Viki?
• How do viewers decide what to watch on Viki? (Through Viki’s recommendations, friends, external sites?)
• Why do users access dramas on Viki when there are other sites that offer the same service?

“Data and analytics only tell you the what. But talking to people reveals the why.” — Sarah Doody

Web Analytics Analysis
Previous homepage lacked contrast and hierarchy, and all sub-sections felt overwhelming for the users to browse. We needed to analyze the performance of each section on the page.

Through data, we identified some of the top engagement sections like: Search, Continue Watching and Popular Shows. These sections contributed to more than 60% of the overall clicks on the page.

Highest clicks sections: Search, Continue Watching and Popular Shows.

Split tests using Optimizely to find out the performance of each section. (Celebrities, Countries etc)

Conversely, we also identified some underperforming content on the landing page, such as “Worth a Watch”, “Breaking News”, and “Top Clips”.

Ideation (Sketch-storming)
Group sketching is a good way to bring non-designers into the design process. We invited six cross-functional members of designers, web developers and project managers into the room. We kicked things off by sharing a problem statement with the team.

Then, we encouraged the group to develop as many ideas as possible! We were looking for quantity here, and not quality. All ideas were welcome, given that they focused on the problem statement at hand.

Here is the problem statement that we framed and printed on a piece of paper. “In what ways might we design a highly engaging homepage that helps our users to discover content?”

Go wild and differ in judgment: Project Managers, Designers, Researcher, and Developers come together to ideate and share their ideas. There are no rock stars here, everyone was encouraged to contribute and voice their opinion as many times as possible! (Picture by Borrys Hasian)

There’s no such thing as bad ideas. Sketch-storming is a good way to bring the whole team together. Everyone gets to express their thoughts out on paper and have fun discussing them. (Picture by Borrys Hasian)

Lean UX Ideation: Here are some results of sketching ideas and concepts with a cross-functional teams. These ideation activities can be as short as an hour or 30 mins.

IA and prototyping

We also did an an IA exercise to organize and label the content that best suited the needs of the end user. This is an important stage, because poor information organization can ruin the overall experience and leave them frustrated.

Defined and grouped the sections. This exercise also enabled us to get a deeper familiarity with the website’s content.

More in-depth IA: This is a very important process, as poor content organization can ruin a user’s experience and leave them lost and confused.

More Participatory Design sessions: “In what ways might we designed an emotionally connected homepage that helps users to find content that interest them quickly” (Pic taken on Oct 5, 2015)

Online inspirations (Always building on the work of others’ ideas)

For the layout inspirations, we went on and looked at some heavy content sites. We then mixed-and-matched some of their ideas into our own. :)

Always building on the work of others’ ideas. For the layout design, we got inspired by these websites’ look-and-feel. We mixed-and-matched some of it to fit into our own ideas.

Prototyping (Low to high fidelity)

We set out to make our new homepage to look and feel more:

1. Fun & exploratory
2. Global
3. Collaborative (Community presence)

Making use of the card UI for displaying content. Inspired from the Google Material Design guidelines.

Gradient colors? Card design approach. One of the early design ideas. In this layout, you can see that we were exploring gradient colors.

Layout ideas from the divergent process. We clocked 45 min to come out with each design option. We tried not to spend too much time on the details. General rule of thum is to get the ideas out for discussion first. The details can wait.

Animation: We also explored some motion idea for the UIs.

And … the Final Design!

Click here to view the project `New Homepage`

Part 3: Results (Analytics and user feedback)

We launched the new Viki homepage on December 15th, 2016, and the overall results were very positive. Check out the following breakdown of results from our internal measuring tool and Google Analytics.

• Bounce Rate decreased from around 19% in early December 2016 (pre-launch) to around 12% in April/May 2017. which is a+7 points uplift. (Google Analytics)
• Average Session Duration increased from around 46min in early December 2016 to around 53min in April/May 2017, which is a +15% improvement. (Google Analytics)
• Homepage CTR to Show Page increased from around 32% in early December 2016 to around 43% in April/May 2017, which is about +11 points uplift.

Now, let’s look at the feedback that we gathered from our users.

Post-launch survey: The survey focuses on how well our users can learn and use the new homepage to achieve their goals. It also refers to how satisfied users are with that process.

User feedback

A lot of Viki users are hardcore Asian drama fans; some are known for their incredible contributions in subtitling shows, while others are excellent leaders in managing their community teams. But more than that, they’re an awesome group of fans who enjoy sharing their love of dramas with other viewers around the world. Here are some of their responses from the post-launch survey.

What do you like best about the new changes on the new Beta Homepage?

Feedback on the Community Widget. “I love the fact that you put it here. I think it’ll motivate volunteers”

Question: “What do you like best about the new homepage?”

“I like your homepage. Especially the top banner that shows recent shows or whatever. That’s a +. But, Scrolling downwards, It just seems a little cluttered to me.” — A Viki user

“I really like the top volunteers corner, volunteers need to get more recognition for what they’re doing, people who watch shows on Viki often don’t understand how hard is their work…” — A Viki user

“This is great in both encouraging and recruiting volunteer” — A Viki user

“I’d also love to see the links to thumbnails/titles go to the Container. It’s a frustrating flow that is mentioned over and over again, even in the office as we use the site.” — A Viki user

Part 4: Learnings

Learning is perhaps one of the most important steps in the design process. Here are some of the key things that we learned from the new layout design.

Learnings #1: From our Google Analytics, we discovered that ‘Trending Now’ card has the highest clicks while the “Begin your drama journey” card and community card both got the lowest clicks.

Learnings #2: 3-column layout flaws, we also learned that most users will be seeing the landing page with loads of whites paces. They kept telling us that because of the white spaces, the pages looked like they were not fully loaded.

Part 5: Next Steps?

After the launch, we did more changes to the layouts based heavily on both internal and external feedback. As a principle, we believe that iteration should continue long after the product is out in the wild. Having said that, we have gone through quite a few updates since we first released it in the 2016. The current live homepage layout has changed significantly since then.

Lastly, shipping this big project was not without many hurdles. It would not have been possible without the vibrant office culture and strong collaboration from the very beginning. I am very fortunate to have been able to work with a team of talented and dedicated individuals. Cheers to my teammates, Jonathan Wong, Ching Yong, Borrys Hasian, Aysha Anggraini, and Esther Fan & a huge thank you to all of our stakeholders.

See you on Viki,
Teo Choong Ching