UX UI Design

WTF Is More Important than You Imagine in UX…

UX design user flowchat

When it comes to designing digital products, UX design is unquestionably one of the essential process for developing better products.

Of the many stages of the UX design process, defining the end-users’ goals, actions, and expectations via user flowchart is a crucial step in determining the functions and features of the product from the perspective of a user (remember User-Centered Design?).

Just imagine a potential customer trying to purchase a product from an online store and is required to register for a user account even though the user beliefs it will be a one-time purchase. The additional and unnecessary steps it will require the user to set up the account before he/she can proceed to purchase the item may very well drive the customer away.

For that reason, defining What’s the Flow (abbreviated as WTF in the title) from a user’s perspective, figuring out a step by-step user flow before any actual UI design is created will ensure that the product being developed will offer the right functions for the right users at the right time.

User flows are:

  • a series of steps a user takes to achieve a meaningful goal
  • used to communicate the intended flow of a user through various pages and actions in an app or website
  • visual diagrams with description of what happens at each step

Benefits of Drawing User Flow Chart

  1. Ease of Presentation and Communication
    Provide a step-by-step view of how the interface is intended to work (e.g. purchase, log in, sign up, etc.). Allowing product owner or teammates to visualize the user flow in the most efficient form.
UX design user flowchat
Visualizing the user login flow, making steps easy to understand
  1. Evaluate Task Flow for Improvement
    Enhance the ease of flow by evaluating and eliminating unnecessary steps, thereby improving efficiency of the interface and enhancing user conversion rate (e.g. registering an account or purchasing a product).
UX design user flowchat
Validating an email address and password can be done in one step
  1. Create an Intuitive Interface for Users
    Helps to identify weaknesses in the user flow and see what options are available to help user accomplish a task innately and without wasting time.
UX design user flowchat
Should login fail be directed to a Reset Password page? Or is there another appropriate option?

Stages of User Flow Chart Development

Stages of User Flow Chart Development
  1. User Stories: Short and simple descriptions of a feature told from the perspective of the product user
  2. Task flow: A single flow that focuses on how users perform a specific task
  3. Wire flow: Convey the page-to-page sequence with individual page layout
  4. User flow: Convey all the pathways with process and individual page layout

Elements of a User Flow Chart

Each node in the flowchart is represented by different shapes, and each shape indicates a particular process:

Elements of a User Flow Chart
Most used elements of a flow chat

Best Practices for Creating Flow Chart

  1. Use Even Sizes and Spacing
    Consider making all flowchart symbols the same height and width (does not apply to symbols that is intentionally smaller). Try to maintain even spacing both horizontally and vertically between symbols.
UX design user flowchat
  1. Consistent Flow Direction
    Flowchart should be top-to-bottom or left-to-right (or right-to-left for RTL languages). Avoid mixing top-to-bottom and left-to-right flows in the same flowchart.
UX design user flowchat
  1. Consistent Branch Direction for Decision Symbol
    Use consistent flow direction for the “Yes” (e.g. right from the Decision symbols) and “No” (e.g. bottom from the Decision symbols) condition.
Consistent Branch Direction for Decision Symbol
  1. Merge Flow Lines to Simplified Visual
    A page may often have more than one subsequent flow line. Improve readability by merging flow lines so that they convey a sense of hierarchy and sequence.
Merge Flow Lines to Simplified Visual
  1. Use Sub-flows or Connector Nodes
    If the user flow is running exceedingly off the page because it’s too long, use a Sub-flow or Connector Nodes (labeled circles) that serve as jump points from one part of the process to another.
Use Sub-flows or Connector Nodes
  1. Use Colors Wisely
    Using too many colors can be noisy and may distract your reader. Use colors to help reader identify and group resources, and highlight important user actions.
Use Colors Wisely
  1. Avoid Confusion in User Flow
    Avoid any confusions by using hop-lines or rounded corner connectors to links between screens and actions.
Avoid Confusion in User Flow
Avoid Confusion in User Flow
Rounded corner connectors
  1. Include Symbol Legend
    Include a flowchart key to describe the meaning of symbols, shapes and colors if you use more than the usual basic ones (process, terminator, decision, document).
Include Symbol Legend

There are many online tools available for designing user flowcharts.  Furthermore, most of them support remote collaborative feature to encourage team collaboration or allow for client/team co-creation.  The following are a few examples of online tools which provides a decent amount of features for creating user flowchart at no-cost to get you started.

  1. Draw.io
UX design user flowchat
  1. FlowMapp.com
UX design user flowchat
  1. Lucidchart.com
UX design user flowchat

This post was inspired by Alexander Handley’s article from Medium.com and references has been taken from it.   Visit course section to check out our Certificate in Business Design course. This course enables you to upgrade your UX skills by learning the practical concept and technique of UX design and designing user flowcharts.

Related Workshop and Course:

Hong Kong Movie Design Case Study

Minimum Viable Product (MVP) by Hong Kong Movie

by Hanson Cheung, Hong Kong Movie

All good product design teams are good at rapid prototyping and skills like minimum viable product (MVP) development. These are crucial skills because startups are all about survival. We need to quickly come up with products that the market can see, the market can experience so as to help up to find the product market fit as soon as possible.

For those of you who are not familiar with the startup jargons, a minimum viable product (MVP) is a concept from Lean Startup that stresses the impact of learning in new product development. Eric Ries, defined an MVP as that version of a new product which allows a team to collect the maximum amount of validated learning about customers with the least effort.

A diagram representation will be something like this:

Minimum Viable Product MVP
Source: Codobux

Product/market fit means being in a good market with a product that can satisfy that market. Many people interpret product/market fit as creating a minimum viable product that addresses and solves a problem or need that exists.

In this article, we have invited the product manager of Hong Kong Movie, Hanson Cheung, to share with us the process he goes through to come up with MVP ideas, quickly develop and launch it, and measure if this is a worthy product idea to go ahead.

A Quick Introduction of Hong Kong Movie

Hong Kong Movie


  • start from 2009
  • tools for people to find movie information, showtime, seat plan status
  • Over 3 million downloads
  • Monthly active users over 800k
  • Key features: rating, discussion about movie


  • In 2014, we’ve launched the app in Japan, as Eigaland
  • Japan version of HKM
  • over 1 Million download

Although Hong Kong Movie is profitable and self-sustaining with a team of over 10. But when we look at the current business model of Hong Kong Movie, we found 2 concerns: (1) over half of our revenue comes from advertising. It is an extremely high concentration of revenue sources. And (2) most advertisers are movie distributors, which makes us heavily dependent on the cinema industry cycle and also passive when it comes to the swinging movie seasons and also movie lineup.

To increase our topline, we could increase the frequency of advertising but this will hurt our user experience badly, while it still not solving the problem that our user traffic and our attractiveness still depend on the cinema industry. So it’s always our top priority to figure out how we could diversify our revenue source.

1. Ideation Phase

So we have come up 4 major directions:

1. Gaming: movie related game

  • This goes beyond our movie knowledge
  • We also don’t have the necessary know-how to publish and distribute games
  • Hence we quickly rule this option out

2. Movie distribution

  • This conflicts the interest of our existing advertising clients
  • Also the revenue is not stable
  • It requires strong sense of movie and marketing, and like how venture capitalists investing startup, following the 20/80 portfolio as most movies are losing money
  • This is capital intensive, high risk exposure, not fitting our mandate. Hence we also quickly rule this out as well

3. Operating our own cinema

  • We of course know the high investment capital due to rental, site renovation, maintenance and staffing
  • But what if we make a no-staff, completely automated intelligent cinema to reduce cost?
  • It maybe worth exploring and understanding the cost structure of operating theatres

4. VoD video on demand

  • In a way, we see VoD as an online cinema
  • It is highly related to our current business and there maybe high overlapping of our existing users’ interests
  • Extending to VoD may help to increase the lifetime value and stickiness of our users on HKM platform
  • So we’re very motivated to know how big the VoD market is in Hong Kong and how many people will purchase / rent movie online

2. Research Phase

Cinema Research

So how big is the cinema market and how many competitors are there?

I made a quick association of the cinema box office with the total addressable market, which means the maximum cap of this market and the number of cinemas shows how intense the competition is.

Cinema Research

I will usually look at the annual report of listed companies, which you could have a brief idea of the market and also the operating situation. Especially useful is when a company goes public in the stock market, they will file some IPO documents which introduce the company business and industry overview. These research are conducted by professional consulting firms, which usually are very costly and difficult to obtain but provide lots of insights.

Golden Harvest, MCL and Cinema City are listed companies in HK. Cinemas differ in scale which means some cinemas have more screens (house) than others. So specifically we want to find out what is the average earning per screen. By studying their annual reports, we know the average revenue for each screen per month is around $1 million. However, it took them years to attain breakeven, let alone if they will ever become profitable.

Cinema Research
Annual Report of China 3D

So we move our research focus on to VoD.

Netflix, HMVOD (Anyplex), HBO, Now are the players of VoD market in HK. I recall that China 3D acquired HMVOD earlier, so I looked for the annual report of China 3D and found the company disclosed some details about the acquisition. And now we know the operating situation of HMVOD over that time: revenue is $3 million and operating loss is $7.2 million, the company has 12,000 users.

Netflix, HMVOD, Anyplex, HBO, vod

We could also find the news about the acquisition, which gives us more information and estimation by the company. It mentioned that when reaching 50,000 users, the business will be breakeven. So 50000 x $88 x 12= $52.8 million per year, the breakeven point is around $53 million. However it is just rough guess, the exact number should be smaller due to HMVOD providing different plan with mobile operators and we are unsure of how wide the pricing distribution is.

Netflix, HMVOD, Anyplex, HBO, vod

As a comparison study, we also use AppAnnie and Similar Web to check the usage and traffic of the app and website of HMVOD, which gives us another rough benchmark how the trend is going.

Netflix, HMVOD, Anyplex, HBO, vod

Finally, we talked with several industry experts, to understand the cost breakdown and the operation of a VoD business.

A VoD business consists of 4 pillars:

  1. Paying license fee to movie distributor to provide content
  2. Find laboratory to handle format conversion and subtitle, which fits for streaming
  3. Network & streaming company to provide stream technology
  4. HKM could be responsible for frontend distribution, maintenance, customer support, user acquisition

3. Experiment Phase

However, starting a basic VoD business would cost at least 7 to 8 figures. So we need to build a MVP to test how many people will likely purchase / rent movies through Hong Kong Movie’s VoD.

Indeed, Apple’s iTunes provides affiliate program for people who will receive commission when others purchase apps, movies or music through the mechanism of referral link. So we reckoned we could make use of the affiliate program to develop and launch our VoD.

apple TV
apple TV

We ended up building an Apple TV app, providing all available iTunes movie with HKM data like rating and comment.

Meanwhile, we also update the UI design of HKM mobile app to provide one additional list called ‘租戲睇’, with latest available iTunes movies. Users will be redirected to iTunes after clicking the price button in HKM.

4. Tracking and Data Analysis

Data Analysis

Many product owners mistakenly think tracking and data analysis come after the product is developed and launched. This is absolutely wrong. It’s a very important task for product managers to consider what metrics and conversion we need before the development, during the UX design phase because we will need to communicate with engineers what tracking tags we need to implement together with the actual programming.

In this case, I have listed the following as key metrics I will be tracking:

  1. the conversion of purchase
  2. how many users browser the new ‘租戲睇’ list
  3. how many users click the movie or even the price button

We monitor these metrics to define if this MVP works to give us a better idea how many people will likely purchase / rent VoD movies.

During the experiment period, 180 purchases were made via HKM, amounting a total of $7,000.


The result is not as encouraging as we would hope for but we did notice that quite a lot of users did browse the list and land on iTunes movies.

Before jumping to the data interpretation and drawing a conclusion, we need to make a remark that the tracking is not complete:

  1. The affiliate tracking is not complete, if the user did land on an iTunes movie but he/she didn’t make that purchase right away, but go back to iTunes later to make a purchase, we would then miss that record. In this regard, this is a missing link between one acquisition with one conversion.
  2. iOS platform is limited. Although we also provide the additional ‘租戲睇’ list on our Android app and our website, we won’t be able to direct them to iTunes movies. The indirect onboarding flow means a high percentage of conversion loss is inevitable.
Google Data Studio

For tracking, I use Google’s Data Studio as a portal to track all the performance from apps, website and social media. It is one single place to show me key metrics like number of active users, app download, ranking, facebook post engagement, etc.

I simply use Google Sheet as my database, which synchronizes data for Data Studio. The configuration requires very minimal coding and not limited to Google Studio, I can integrate data from other tracking tools.

5. Follow Up Actions

Although the MVP experiment was conducted in a very brief period of time, we did obtain insights into our users’ behavior. Our original suspicion is that users will have absolutely no interest in our VoD offer because there are already major players in the market. However when we place the VoD trigger in different places, we observed there is an indication that we could influence the users’ decision to rent or purchase a movie. This already is an encouraging first step to us.

Since the time of the documented MVP experiment, we have made the following enhancements:

  1. We have expanded our affiliate program and increase movie rental/purchase selection, like Google Play Movie, Netflix
  2. We have pulled back archived reviews and ratings from our movie database to enrich the contents of the movie rental/ purchase section
  3. On social media, we actively facilitate conversation around blacklist movie titles to encourage more interest towards that movie

Learn more about rapid prototyping in our Certificate in Business Design course.

UX UI Design

界面設計師 必需知道「扁平化設計」和「實感設計」的微妙關係

相信從事手機應用程式或者有參與網頁界面設計的 界面設計師 ,都必定會接觸過扁平化設計和質感設計。兩種設計類型看起來非常相似,一般人大抵不能清楚抽述到兩者的分別,但兩者之間確實存在微妙並且關鍵的分野。



扁平化設計(Flat Design)從2014年開始普及於網頁、系統與裝置介面,泛指一種完全以平面化來呈現視覺元素,使每一部分看起來都像是平躺在一個平面上。


界面設計師 windows 10 UI

而實感設計(Material Design)是新興並由Google定義的一種「品牌化」設計風格,所有準則受明確規定,被認為是由扁平化設計應運而生的革新。

Flat design vs material design


界面設計師 Flat design vs Skeuomorphism



 一直以來, Google 長處於產品與介面混亂的困境 ── Android 系統附載在各式不同尺寸的電子裝置上,旗下產品又繁不勝數、介面整合困難,體驗破碎的問題嚴重,難以體現Google的品牌風格和形象。對於開發人員而言,使應用程式在多個設備上具有相似的外觀是一項艱鉅的任務,而推出一套嚴謹的指引就可以確保跨裝置的界面設計標準,統一了不同Android裝置上的外觀。

界面設計師 flat design UI pros and cons
界面設計師 Skeuomorphism design UI pros and cons



實感設計的主要原則之一是模仿事物在現實世界中的形態,但以完全簡化的方式呈現。僅使用現實主義作為一種工具,使我們的大腦更熟悉界面的運作方式。 但同時,不要使其看起來過於寫實。例如按鈕不再需要閃閃發亮的效果,表格欄目不需要內部陰影亦可讓用戶清楚了解當中的指意。




想修讀有關界面設計嘅知識?可了解我們的Adobe XD UX/UI 設計初階課程 。