App 3.0

HK01 · 2018 – 2019

Background

HK01 (香港01), a renowned local media company and news provider, has been operating its news app platform since the inception of the business. This revamp project involves upgrading the previous version (app 2.0) that was launched in March 2018.

1.8M+

Registered members on the app

1M+

Downloads on Google Play

Free news app by downloads in Hong Kong

My Role

Design lead for the app 3.0 revamp — architecture, flows, and UI across the app
Owned complex system logic, e.g. the expanded account-merge flow
Established the design library and guideline that HK01 kept using well beyond this project
Made structural/IA calls backed by data, e.g. the app/web menu-sync decision below

App 3.0 — home, article, reply, photo stories, prompts, and in-app notifications.

Challenge

A tight timeline is certainly the first challenge that comes to mind, as this version was initiated only a few months after the previous version was launched. Consequently, there were overlaps between the two versions, resulting in an increased workload with tasks and design work being duplicated.

App 2.0 — still live in the market while 3.0 was already being built alongside it.

The most challenging aspects often arise from human factors, such as collaborating and negotiating with external parties to adopt new branding visual elements and striking a balance between promotional items and content. In addition to UI and collaboration concerns, another challenging aspect involves dealing with complex system logic and managing flow handling.

The account-related functions have undergone significant expansion in app 3.0 compared to app 2.0. Here is an example use case of the account merge flow.

Design Library & Guideline

The revamp project serves as a starting point for me and the team to establish standardized practices for building UI, communication, and design-opts. This practice has been ongoing and extends to other digital products within HK01, becoming a long-lasting practice.

Pages from the design library — colours, typography, grid, and component specs like article-listing cells. HK01 kept using this long after the revamp shipped.

Study Case//

Judging the requirement for synchronizing the menu (channel) structure for both web and app

Background

Content on HK01 is grouped into ‘channels’ based on topics, while a ‘zone’ represents a collection of channels with similar themes. The web’s index menu typically displayed the hierarchical structure of zones and channels, whereas the app menu blended the two since it was designed as a customized shortcut to user-selected channels.

In mid-2018, stakeholders proposed synchronizing the content menu (news channels/categories) between the app and web platforms.

The app’s original menu — a flat, user-reorderable shortcut list to selected channels, not a zone/channel hierarchy.

On the web platform, the mega menu serves as an index function, providing users with an organized and hierarchical view of the content. It prominently displays the hierarchy between zones and channels, allowing users to navigate through different sections of the website with ease.

Analysis

There is no absolute answer to the task as both “to do” and “not to do” approaches are reasonable. My role is to assess how this change would impact users and performance from a UX/UI perspective. The judgment is based on the following considerations:

Content accessibility
While the product team aims to synchronize the menu of the app and web, it increases the complexity of app navigation and reduces content exposure. Furthermore, this change also decreases the visibility of individual channels. Does this have an impact?

Two of the arguments against syncing — a hierarchy adds a memorisation task users didn’t have before, and it’s worth asking whether that structure is even necessary on a shortcut-driven surface like the app.

Context & PV
A zone page serves as a summary of all its channels, and typically, the total page views (PV) of the channels would not exceed that of the zone they belong to. However, data shows that some channels have higher PV than their respective zones. One possible explanation is that these channels have specific content that attracts readers to directly access them, rather than scanning the broader zone.

For instance, readers may visit the ‘News’ zone to get a general overview of daily news, but for channels with specific topics like ‘travel’ or ‘pets’, they might prefer to directly access those channels rather than staying within the ‘Life’ zone. Therefore, synchronizing the menu could potentially hide these channels, impacting their page views.

App shortcut menu next to the web’s zone/channel hierarchy — the two structures a sync would have to reconcile.

By comparing the PV of the channel landing pages, it becomes evident that certain channels outperform their respective parent zones in terms of popularity. One hypothesis is that these channels possess a specific theme or topic that attracts readers who prefer to delve deeper into the content rather than obtaining a superficial understanding from the broader zone.

Assumption and suggestion

Despite the potential benefits of aligning the channel structure through synchronization between the web and app platforms, it is important to consider the potential consequences that may arise from this change,

Hiding content
The menu bar’s support for multi-levels can result in a thicker UI component, which in turn reduces the amount of content that can be displayed on the screen.

Learning curve raised
The introduction of additional hierarchy can make it more challenging for users to associate specific channels with their corresponding zones. This unfamiliarity may arise due to the extra effort required to navigate and understand the relationship between channels and zones.

PV of specific channels may decrease
Due to the synchronization of the menu and the introduction of additional hierarchy, users may no longer have direct access to specific channels through the shortcut menu. This is because the desired channel may be hidden within the second level of the menu, requiring users to navigate through multiple levels to reach their desired content.

The above assumptions suggest that it would be preferable for the menu to remain unchanged unless both zones and channels can be selected and displayed on the same level.

Outcome

The recommendation held for about a year. I moved on to lead CMS and ICON, handed the app to a colleague, and the menu was eventually synced anyway — today’s live version groups channels under two-level segments, the structure I’d argued against. I called it the way the data read at the time; once I left, I had no visibility into how the change actually performed, so I can’t say whether it proved me right or wrong.