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
Hop-line
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

HKM:

  • 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

Eigaland:

  • 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.

firebase

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年開始普及於網頁、系統與裝置介面,泛指一種完全以平面化來呈現視覺元素,使每一部分看起來都像是平躺在一個平面上。

它的出現某程度上是回應追求過於寫實的設計之下的產物。由於早年Apple的擬真化設計(Skeuomorphism)實在太成功,在硬體裝置和網頁介面設計上引起了一股熱潮,就是將所有按鈕畫得像實物一樣,令用戶完全代入。就這樣,Microsoft開展其改革腳步,提倡扁平化設計,將重心放於呈現按鈕的功能性,省去不必要雕砌的枝節,向Apple宣戰。

界面設計師 windows 10 UI

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

Flat design vs material design

雖然「扁平化設計」和「實感設計」都是「極簡主義」的方法,兩者卻存在微妙並且關鍵的差別:

界面設計師 Flat design vs Skeuomorphism

看到這裏,你可能會問為什麼Google對實感設計下定義並且有嚴格的規定? 

那麼我們首先要了解到手機和平板電腦的盛行,兩者卻也沒有「浮標」設計,用戶容易對頁面上的扁平化資訊感到混淆,隨時連「按鈕」或「輸入文字」的指意也分不清。當然,從擬真到扁平設計的轉型之所以能成功,正是因為使用者的學習經驗已足夠看懂抽象圖示的功能,因此不必要的點綴即使省略也不會易響其功能性。但當智能裝置的應用路徑愈趨複雜時,扁平化設計就不足以切合所有不同適應數碼互動程度的用戶。實感設計將擬真化的原始意圖與數碼世界接軌起來,但又不失簡潔的美感,使設計的溝通能力更進一步。

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

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

有了扁平化設計,設計師不再需要擔心如何讓他們的項目看起來更真實。相反,他們可以專注於其功能和性能。而實感設計回溯擬真化設計,為平面設計增加了動畫,層次和擬態性,使按鈕之類的東西易於區分。

 用Google的話來說,實感就是隱喻。

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

質感設計以平面為基礎,但涉及到更多的互動、顏色系統、佈局和功能,從而創建了一個設計生態系統,用戶可以在許多產品和裝置上熟悉這個生態系統。

 簡單來說,扁平化設計是一種最小化的環境,很大程度上依賴於用戶對總體設計界面的熟悉程度,並且去掉了任何不能滿足功能需求的東西。實感設計嘗試將一些概念從擬真化設計過渡到扁平化設計。這樣提供了一個針對數碼優化的界面,促進了用戶與介面的互動。

實感設計和扁平化設計均各有特色。以上的比較並非鼓勵大家要兩者擇其一。要創建一個真正出色的設計,是要真正了解你的受眾喜好和習慣,做到真正由他們的用戶體驗出發,沒有什麼可以阻止你將兩者結合在一起的。

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