Info

HK01 (香港01), a well-known local media company and news provider, had launched her news app platform since the business started. This is a revamp project of the previous version (app 2.0), which was launched in Mar 2018.

(PS, The current app version had been revamped to v4 )
UI at the initial stage of the revamp.

App v3.0

App revamp project from v2 to v3
My role
Pioneer and the "UXUI in charge" of the v3 revamp include product structure, flow, UI, design opts, etc. (I am also in charge of the app revamp from v1 to v2 as well)

Challenge

A tight timeline is definitely the first challenge that came into my mind, as this version had been kick-started just a few months after the previous version launched. Therefore, there were overlaps between the two versions, which means tasks and design works were doubled.
The most challenging thing always come from human factors - cooperate and negotiate with external parties, such as adopting new branding visual elements, balancing the proportion between promotion items and contents. Besides the UI and cooperation matters, and another challenging part is to cope with difficult system logic and flow handling.
Account-related function had expended a lot in app 3.0 compared with app 2.0. Here is one of the use cases of account merge flow. Before drafting the flow, as a designer, we had a really clear understanding of the logic and limitation, such as "which account will be the dominion?", "When will exceptional case happen".
App v2

Design library and guideline

The revamp project is the starting point for me and the team to build up a standardized practice on building UI, communication, and design-opts. This practice had been continued and a long-lasting practice to other digital products in HK01.
Guideline for app 3.0. After the launch of dark mode, the concept of elevation had been included in the guideline as well.

Case //

Judgment on the requirement about synchronising the menu (channel) structure for both web and app

Background

Content of HK01 are grouped into "channels" according to the topic. And a "zone" is the unit that contains channels that shared similar themes. The index menu on the web was typically showing the mentioned hierarchy of "zone" and "channel", while these two were mixed in the app menu because the menu was designed as a customised shortcut to channels that users had picked.

In mid-2018, stakeholders had suggested synchronising the content (news channels/ category) menu between app and web.

App menu is designed for customized shortcut, which serves different purpose to the menu of the web.

Mega menu on the web is serving as an index function, the hierarchy between zones and channels had been clearly displayed out.

  • Context

    A zone page is the summary of all its channels, the sum of channels page view (PV) most likely would not higher than that of the zone they belong to. However, according to the data, some channels have higher PV than the zone they belong to. A possible reason is the channel nature may specific means that readers would prefer to drill into it directly instead of having a generic scan on the zone.

    For example, a reader would go "News" zone to have a brief idea about daily news, but for channels with specific topics like "travel" or "pets", they may drill into the channel directly instead of stay on "Life" zone. Therefore, the synchronisation would hide the channels which is an impact to their PV.

Once the synchronization is adopted, some consequences would happen.

By comparing the PV of the channel landings, it is obvious that some of the channels are more outstanding than the zone (parent channel) they belong to. One of the hypotheses is that they have a specific theme that readers tend to stick into the channel rather than grasp a fragile idea from the zone.

Process

There is no absolute answer on the task as both “Do” or “Not to do” are reasonable. My job is to judge how this change would affect users and performance on the UXUI aspect. The judgment based on the following considerations,
  • Content accessibility
    While the product side wishes to synchronize the menu of app and web, it increases the complexity of app navigation and lowers down content exposure. Furthermore, the change lowers down the exposure of channels, does this matter?

Assumption and suggestion

Despite the channel structure could be aligned via synchronization between web and app, consequences would be caused,
  • Hiding content
    the menu bar supports multi-levels, which thickens the UI component and lesser content may display on the screen.
  • Learning curve raise
    As additional hierarchy had been introduced. Users are not familiar with that due to extra effort to associate a particular channel to a particular zone.
  • Page view of a particular channel may drop
    Users can no longer head to the channel directly through the shortcut menu as the channel may be hidden in the second level of the menu.
The above assumptions suggest that the menu better keep no change unless both zone and channel could be picked and displayed on the same level.

The new HK01 app (4.0) had come over the problem as the app menu is now available for pinning both zone and channel on the same level.

However, the top menu structure is complicated in this version (4.0), in which the menu is no longer serve as short cut only, but also included editorial feeds and an "optional feed", which cause to misunderstanding, and non-necessary information, and potential reason of the dropped page view of channels.

Copyright © All rights reserved.