3. Copyright Palapple (Hong Kong) Limited 2015 | 3 www.palapple.com
05
• China mobile market at a glance
• Introduction to China app stores
• Mobile Apps Design for China
• Mobile Apps Development Life Cycle
• Best Practices for China apps development
• O2O and Online Payment
• Case Studies: successful apps in China
• Cross Platform Mobile Apps Development
• Promotion and Marketing
• Reporting and Analytics
26. Copyright Palapple (Hong Kong) Limited 2015 | 26 www.palapple.com
05
• Roles and Responsibilities of a Mobile App Project
TeamTeam Member Roles and Responsibilities
Project Manager Coordination and communication
Information Architect Compiling user requirements and an overall
planning
User Experience (UX) Designer Transforming features into interaction flows
User Interface (UI) Designer Realizing the UX plan into affective looks and
feels
Developer Front and back end program logic
Content Specialist Editor and copywriting, including rich media
content
QA Tester Coordinating testing including functional and
usability tests
Server Administrator Setting up testing and production environments,
as well as monitoring usage and traffic
27. Copyright Palapple (Hong Kong) Limited 2015 | 27 www.palapple.com
05
• Mobile app is a small and portable
solution, interfacing with human
frequently and closely.
• Switching barrier is very low
• The app has to work, be quick
and responsive and have better
good-looking interface.
• The design process must start
with identifying user needs
• Ensure the core objective is
justified and sound
• Testing starts from visual
29. Copyright Palapple (Hong Kong) Limited 2015 | 29 www.palapple.com
05
• Concept and Requirement analysis
– Research and brainstorming for ideas.
– Assess if there’s a clear local / national need for
such solution and perform competitor analysis
– Assess if native mobile app is the best solution
– Come up with the final concept of the user
requirement and technical feasible issue.
31. Copyright Palapple (Hong Kong) Limited 2015 | 31 www.palapple.com
05
• Visual Design Fundamentals
• Characteristics for different mobile platforms
• Mobile UI Design Principles
• Best Practices in Mobile UI Design
32. Copyright Palapple (Hong Kong) Limited 2015 | 32 www.palapple.com
05
• Mobile Design Patterns
– Timelines, sidebars, splash screens, popovers etc.
– Reference to the common UI elements from well-
known applications
– iPhone and Android carry different design
patterns, driven by and leading to different user
behaviors
– References:
• http://www.mobile-patterns.com/iphone/recently-added
• http://mobiledesignpatterngallery.com/mobile-patterns.php
• http://inspired-ui.com/
• http://pttrns.com/
33. Copyright Palapple (Hong Kong) Limited 2015 | 33 www.palapple.com
05
• Responsive Design
– Web design approach aimed at crafting sites to
provide an optimal viewing experience—easy
reading and navigation with a minimum of resizing,
panning, and scrolling—across a wide range of
devices (from desktop computer monitors to
mobile phones).
• Fluid grid concept, floatable blocks or size in
percentage
• Flexible images with variable sizes
• Server side component to detect mobile
queries, rendering light-weight response to
reduce network usage
35. Copyright Palapple (Hong Kong) Limited 2015 | 35 www.palapple.com
05
The Good:
• Clear theme color
• High color contrast
• Consistent with offline
branding
• Separation of text and
graphics
• Remove excessive aqua style
• App series style design
36. Copyright Palapple (Hong Kong) Limited 2015 | 36 www.palapple.com
05
The Bad:
• Too complicate
• Insufficient color contrast
• Wrong visual elements
positioning
• Visual element spacing and
margins
• Inconsistent style
• Metaphors may jeopardize
uniqueness and make the
icon less memorizable
37. Copyright Palapple (Hong Kong) Limited 2015 | 37 www.palapple.com
05
• Single
theme
color is
recommende
d to assist in
branding and
create an
emotional
impression
with users.
38. Copyright Palapple (Hong Kong) Limited 2015 | 38 www.palapple.com
05
By observation:
Red, Orange, Pink, Light Green more widely used
39. Copyright Palapple (Hong Kong) Limited 2015 | 39 www.palapple.com
05
Hong Kong and mainland
chinese sees color and
typography in very different
perspectives.
40. Copyright Palapple (Hong Kong) Limited 2015 | 40 www.palapple.com
05
• Flat design advocates simplicity, clarity and
honesty, which reduces shadows, gradient and
materials textures. It is an opposition to
skeuomorphic design approach which advocates 3D
and texture look and feel
42. Copyright Palapple (Hong Kong) Limited 2015 | 42 www.palapple.com
05
• http://www.google.com/design/
• https://developer.android.com/preview/material/index.html
• Set of design principles from Google aims to create a
unified experience across platforms and screen sizes
• Compatible to concepts of flat and responsible design
• Emphasis placed on motion, transition, typography,
imagery etc.
• Specifically for Android L (Lollipop)
43. Copyright Palapple (Hong Kong) Limited 2015 | 43 www.palapple.com
05
Sample on
the left
demonstrate
s a consistent
use of
gradient and
shadows.
Speculation:
“Design by
Committee”
leads to a
lack of design
focus.
44. Copyright Palapple (Hong Kong) Limited 2015 | 44 www.palapple.com
05
• User experience improvement
• San Francisco system font
• https://developer.apple.com/videos/wwdc/2015/
45. Copyright Palapple (Hong Kong) Limited 2015 | 45 www.palapple.com
05
Adopted flat design styles with mainland
chinese user behavior
46. Copyright Palapple (Hong Kong) Limited 2015 | 46 www.palapple.com
05
• UI Design Paradigms
– Controls should look tappable (finger tip size)
– App structure should be clean and easy to
navigate
– User feedback should be subtle, but clear
• Universal apps should run well on tablets
– Mold the UI to be tablet compatible
– Adapt art to screen size
• Subtle Animation to Communicate
– Use animation consistently throughout an app
– Screen transition matching logical expectations
48. Copyright Palapple (Hong Kong) Limited 2015 | 48 www.palapple.com
05
• What is User Experience Design
• Differences between UI and UX Design
• Human Interface Principles for UX Design
• Best Practices in UX Design
49. Copyright Palapple (Hong Kong) Limited 2015 | 49 www.palapple.com
05
User experience
design (UXD or
UED) is any aspects
of a user's experience
with a given system,
including the interface,
graphics, industrial
design, physical
interaction, and the
manual. In most cases,
User Experience
Design fully
encompasses
traditional Human-
Computer Interaction
(HCI) design, and
extends it by
addressing all aspects
of a product or service
as perceived by users.
50. Copyright Palapple (Hong Kong) Limited 2015 | 50 www.palapple.com
05
• User centric design, putting users’ demand and
expectation as the objective of mobile design
• It is the process that requires constant monitoring,
iteration and evolution
• Good opportunity to integrate business goals and
marketing tactics into the product
• Can be coordinated by UX designer, but requires
teams’ collective input to achieve optimal results
51. Copyright Palapple (Hong Kong) Limited 2015 | 51 www.palapple.com
05
Instagram: the billion dollar UX
52. Copyright Palapple (Hong Kong) Limited 2015 | 52 www.palapple.com
05
• UI Visual design represents the aesthetics or “look
and feel” of the front end of any user interface.
• UX involves a broader scope of study and analysis
including information architecture, interaction,
usability and accessibility.
53. Copyright Palapple (Hong Kong) Limited 2015 | 53 www.palapple.com
05
• User input
– Comfort first approach
– How do we hold the device? (eg. left/right hand,
one hand / both hands)
– Keyboard auto focus, bring up the correct
keyboard type (english / number etc.)
– In most cases, use checkbox / selection menu to
minimize typing
60. Copyright Palapple (Hong Kong) Limited 2015 | 60 www.palapple.com
05
• Needs and Requirements
– Abstract, big picture goals
• Target user population and demographics
• Conduct user research
• Focus on problem
61. Copyright Palapple (Hong Kong) Limited 2015 | 61 www.palapple.com
05
• Specifications
– What the product is, in one line
– List of key features with priorities
– Match solutions with problems
– Compare with competitors, what is missing in the
market
62. Copyright Palapple (Hong Kong) Limited 2015 | 62 www.palapple.com
05
• Information Architecture
– Structure diagram (similar to sitemap)
• A display of all key pages with hierarchical
relations
63. Copyright Palapple (Hong Kong) Limited 2015 | 63 www.palapple.com
05
• Interactions Design
– User flows between the pages
• Process flowchart
• Wireframe sketches
• Paper prototypes
• Clickable prototypes
64. Copyright Palapple (Hong Kong) Limited 2015 | 64 www.palapple.com
05
• Wireframe
– Show the UI skeleton of the app
– Low fidelity: quick mock-up, easy to produce (eg.
rough sketches on whiteboard)
– High fidelity: with higher level of details and
discussions over screen transitions and animation
(eg. Paper / clickable prototypes)
– Common tools: gomockingbird, axure, MockFlow,
LucidChart
66. Copyright Palapple (Hong Kong) Limited 2015 | 66 www.palapple.com
05
• Paper prototyping
– Throwaway prototyping
– Traditional, but widely adopted in the industry due
to its ease of establishment. It facilitates team
communication and visualizes the concept at an
early stage of development
– The first step in rapid prototyping
68. Copyright Palapple (Hong Kong) Limited 2015 | 68 www.palapple.com
05
• Clickable prototypes
– Mock up all screens with brief designs and inter
screen linkages
– Show the flow instead of individual UI
– High fidelity and easy communication with
management and customers
– Common tool: popapp.in , solidifyapp
69. Copyright Palapple (Hong Kong) Limited 2015 | 69 www.palapple.com
05
• Visual Design
– Mere beauty is not enough
– Good visual designs convey a nice first impression
to the users.
– Have direct impact to branding and marketing
exertions
– As detail as a button clicking effect, animation of
progress bar etc. may influence the feeling of
users.
70. Copyright Palapple (Hong Kong) Limited 2015 | 70 www.palapple.com
05
• Usability Test
– can start from low fidelity, be conducted at paper
prototype stage
– Screen recorder: record user interaction as well
as their facial expression when using the app
• Magitest can work with mobile app
• UX Recorder can work with mobile web and
clickable prototypes (eg. Solidifyapp)
– Using a sled. The thing you use to mount a
camera onto your mobile device in a usability
testing session. To capture and record the finger
gestures during the test.
72. Copyright Palapple (Hong Kong) Limited 2015 | 72 www.palapple.com
05
• Usability Test (Con’t)
– Ensure testing context and environment close to
the reality
• Testers’ own devices
• On and off network environment
• Crowded public place
– Interview testers with appropriate questions
75. Copyright Palapple (Hong Kong) Limited 2015 | 75 www.palapple.com
05
• Constraints of mobile
– Network latency
– Input mechanism
– Memory
– Computational power
– Battery life
– Screen size
76. Copyright Palapple (Hong Kong) Limited 2015 | 76 www.palapple.com
05
• Reduce power-hungry device function: GPS,
camera, accelerometer and other sensors, turn off
functions when they are no longer required.
• Avoid waking the smartphone regularly to check the
server for updates, new content, mail and
messages, or to report back on user activity or
location.
• Reduce rich-media advertisement, which typically
consumes >1% of users’ data plan
• Verify all push notification to be necessary
• Apps that don’t behave will end up consuming the
data allowance, potentially leading to costly bills,
when the user reach the data limit/cap, and
particularly when the user is roaming.
79. Copyright Palapple (Hong Kong) Limited 2015 | 79 www.palapple.com
05
• Downsize the packets to be transferred back and
forth the servers.
– Compress and cropping images to minimal size
– Remove unnecessary elements in XML / JSON
segments
• Reduce the frequency of server connection.
Preferred local processing within the app and
communicate with server in batch.
• Asynchronized upload, detect network traffic
condition and upload multi-media content later.
81. Copyright Palapple (Hong Kong) Limited 2015 | 81 www.palapple.com
05
• Big battery killers: LTE, Wi-Fi, Bluetooth, Camera,
Flashlight, GPS
• Close such instances whenever necessary
• Resize the image file with properly resolution, beware to
use the high resolution pictures
• Big photos / videos transfer will consume much power,
resize / optimize data file size before going through
network
• Performance tuning is required to limit the data stored in
cache. Long term storage can be achieved by local
database or server-side storage (require network
connection)
• Recommend package size <20MB
82. Copyright Palapple (Hong Kong) Limited 2015 | 82 www.palapple.com
05
• Auto expand and repositioning of visual elements
92. Copyright Palapple (Hong Kong) Limited 2015 | 92 www.palapple.com
05
Battle of mobile payment
•Aggressive integration with physical industries ( 出嘀嘀
行 and 快的打車 )
•Integration with traditional small amount payment (red
packet)
•O2O and short range payment ( 微支付)
93. Copyright Palapple (Hong Kong) Limited 2015 | 93 www.palapple.com
05
Between Hong Kong and China
•PayDollar 傳款易 http://www.paydollar.com/tchi/
china.html
•UPOP 銀聯在線支付 http://www.sme.gig.hk/upop/
•八達通 x 支付宝
https://cshall.alipay.com/lab/help_detail.htm?help_id=
395641
– Support NFC enabled
devices
95. Copyright Palapple (Hong Kong) Limited 2015 | 95 www.palapple.com
05
O2O Exercises in China
•Substitution of traditional POS system
•Make presences in multiple online store platforms (eg.
Tmall , JD etc.)
•Loyalty programme, debit card and delivery
integration
•App UX optimization
•Flexibility in various discount calculation (eg. Different
cities, different seasons, online and in-store discount
merging etc.)
100. Copyright Palapple (Hong Kong) Limited 2015 | 100 www.palapple.com
05
Ultrasonic Communications
•Using speakers and microphones to achieve device to
device communication.
•Human audible frequency range is approximately
20Hz to 20kHz. Mobile apps can generate sound
beyond such range to make the signals inaudible.
•Possible substitution of Bluetooth or NFC
•Application: Indoor Positioning, Mobile Payment,
Touchpoint marketing etc.
107. Copyright Palapple (Hong Kong) Limited 2015 | 107 www.palapple.com
05
General observations
•Many app stores in the market, from device brands, ISP and big
corporations, with different practices according to the brand of device
•Apple app store remains the official channel for iOS app distribution
•Android phone comes by default with ‘unknown source’ switched on for
3rd
party channel installation
•Google Play is not regarded as official channel, some brands even
blocked its presence unless for rooted devices
•Android app is commonly regarded as free download
•In app purchases are common however, especially in games, mostly
small amount payments
•Payments are most commonly achieved by Alipay 支付宝, transfer
between accounts is free for both users and merchants
110. Copyright Palapple (Hong Kong) Limited 2015 | 110 www.palapple.com
05
• Bejewels, Temple run, 三國 styles are most popular
• Almost the only category that can achieve direct
profit from mobile app, without other business model
behind
• In app purchases are common for buying coins,
tools, weapons etc. for getting to the next level
• Purchases are commonly achieved by Alipay, usually
very small or insignificant amount
125. Copyright Palapple (Hong Kong) Limited 2015 | 125 www.palapple.com
05
• iOS app link to iTunes official download
• Android app direct apk download
• PC version ‘assistant’ software for 1-click install
• Support multiple platforms (iOS, Android, Windows
etc.)
• Support multiple devices (phone, tablets, TV etc.)
• Some provide altered app .ipa files for jailbroken
phone (Cydia) installation
• Each platform carries different profit sharing scheme
126. Copyright Palapple (Hong Kong) Limited 2015 | 126 www.palapple.com
05
• 合格的 Android 智慧型手機必須經過 CTS 與 GMS 認證 . 不
過 , 坊間白牌或山寨品牌 Android 智慧型手機往往不是完全沒
認證 , 就是只有 CTS 認證但無 GMS 認證 . CTS 與 GMS 認證
兩者有何差異 ? 就用途上 , Android 裝置通過 CTS 認證才能
使用 Google Play 的服務 , 通過 GMS 認證才可使用 Google
授權服務(如 Gmail 、 Google Talk 、 Google Map 等)
• Android Compatibility Test Suite (CTS)
• Google Mobile Service (GMS)
• http://tu0925399900.pixnet.net/blog/post/163926191-android-
%E8%A3%9D%E7%BD%AEcts%E8%88%87gms%E8%AA
%8D%E8%AD%89%E5%B7%AE%E7%95%B0
128. Copyright Palapple (Hong Kong) Limited 2015 | 128 www.palapple.com
05
• Cross-platform development tools are available for developing multiple
mobile native applications with single source code.
• Use web standards for development while some need to use
proprietary programming languages.
• TWO approaches for development tools using web standards
– Generate the codes as embedded web content within the mobile
native application (e.g. PhoneGap).
– Recompile the web codes into native codes (e.g. Titanium Mobile)
129. Copyright Palapple (Hong Kong) Limited 2015 | 129 www.palapple.com
05
• Common limitations:
– Most of the tools cannot support all common mobile OS
platforms.
– Although web standards are used by some of these tools,
some advanced features like AJAX are not supported by tools
like MotherApp.
– Performance of mobile native applications developed by these
tools may not as good as those developed by native
programming language.
– Most of the tools do not provide API for interfacing with
Bluetooth and video capture.
130. Copyright Palapple (Hong Kong) Limited 2015 | 130 www.palapple.com
05
PhoneGap Titanium Mobile MotherApp Rhodes Corona
Company Nitobi Appcelerator MotherApp Rhomobile Ansca
Product Type Open Source Open Source Proprietary Open Source Proprietar
y
Programming
Language
HTML, CSS,
JavaScript
HTML, CSS,
JavaScript
MotherAPP, HTML HTML, CSS,
JavaScript, Ruby
Lua
Online Conversion
Service
Yes No Yes No No
Development Kit Nil Titanium Studio Nil RhoStudio Corona
SDK
Supported Platforms
iOS Yes Yes Yes Yes Yes
Android Yes Yes Yes Yes Yes
BlackBerry Yes Yes(beta) Yes Yes No
Windows Mobile Yes No No Yes No
Windows Phone No No No Yes No
Others WebOS Nil Nil WebOS Nil
131. Copyright Palapple (Hong Kong) Limited 2015 | 131 www.palapple.com
05
• HTML5 or cross-platform applications are commonly
less responsive than native applications
• But it is more common for corporates to adopt
cross-platform apps for business scenarios
Source:
http://venturebeat.com/2013/11/20/html5-vs-native-vs-hybrid-mobile-apps-3500-developers-say-all-three-please/#vb-gallery:1:862919
138. Copyright Palapple (Hong Kong) Limited 2015 | 138 www.palapple.com
05
• Analytics
- Google Analytics : The App Analytics reports are aggregated into
the App Overview, the default report.
- Individual App Analytics Reports are organized into four
categories, each containing a dedicated set of reports:
◦ Acquisitions: Find out how often your app is downloaded and
installed.
◦ Users: Get to know the people using your app - where they are,
how often and long they use an app, and what devices are
popular with your visitors.
◦ Engagement: Track in detail the ways users interact with your
app. Find out which screens are viewed in a typical visit.
Technical exceptions and crashes are also included in this set of
reports.
◦ Outcomes: Know the real value of your app.
139. Copyright Palapple (Hong Kong) Limited 2015 | 139 www.palapple.com
05
• Google Analytics SDK for mobile apps
– https://developers.google.com/analytics/devguid
es/collection/ios/
– https://developers.google.com/analytics/devguid
es/collection/android/
145. Copyright Palapple (Hong Kong) Limited 2015 | 145 www.palapple.com
05
The Wholly Foreign Owned Enterprise (WFOE) is a limited liability company and wholly owned
by the foreign investor(s). In China, In China, WFOEs were originally conceived for encouraged
manufacturing activities that were either export oriented or introduced advanced technology.
After China’s entry into the WTO, WFOE is increasingly being used for service providers such
as a variety of consulting and management services, software development and trading as
well. The registered capital of a WFOE should be subscribed and contributed solely by the
foreign investor(s). The requirements and information about setup a WFOE are shown as
below :-
1. BUSINESS SCOPE
Business scope needs to be defined that the WFOE can only conduct business within its
approved business scope, which ultimately appears on the business license. Any
amendments to the business scope require further application and approval.
2. REGISTERED AND PAID UP CAPITAL
Registered Capital : USD$140,000 is a decent investment capital for WFOE’s manufacturing or
factory business. (with USD$140,000 investment it’s easy to get approved). Initial paid-up
could be 20% of the registered capital, with the balance being remitted within 2 years (not
applicable for Shenzhen).
The amount of registered capital needed is also dependent upon factors like scope of
business, location and its business scale. For trading company, the min. registered capital is
RMB500,000 ~ RMB1 million (Approx. USD$75,000 – USD$140,000). For consultancy or
agency company, the min. registered capital is RMB100,000.
146. Copyright Palapple (Hong Kong) Limited 2015 | 146 www.palapple.com
05
3. PHYSICAL OFFICE IN CHINA
The WFOE must have a physical office in China. The rental certificate of the office must be
obtained from China government authority, and needs to submit to China Companies Registry
together with the statutory incorporation form of WFOE. In recently, the address of business
centre also is allowed in China for establishment of WFOE. We could introduce the business
centre service provider to you if necessary.
4. SOCIAL SECURITY IN CHINA
With effect from 15 October 2011, a new rule of foreign employee’s social security has been
launched. It is said that if a company hires a foreign or local employee, the company shall
register this employee with the local social security authority within 30 days of the employee
receiving their work permit. The min. rate of social security is 22% -32%, which is depends on
the local.
5. GENERAL TAX INFORMATION
The China’s new corporate rates range from 15% to 25%, the rate depends on the places
where the company is registered and the industry that a company engaged. For more details,
please visit our website (http://www.conpak.com/Wholly-Foreign-owned-Enterprise.html).
6. ANNUAL AUDIT REPORT
Any limited companies in China should summit annual audit report to the relevant authorities.
The annual cost should be around RMB6,000. Any company will be subject be to a fine if the
Annual Audit Report is not submitted a timely manner.
149. Copyright Palapple (Hong Kong) Limited 2015 | 149 www.palapple.com
05
Qian Hai Shenzhen-Hongkong Youth Innovation and
Entrepreneur Hub
http://ehub.hkfyg.org.hk
150. Copyright Palapple (Hong Kong) Limited 2015 | 150 www.palapple.com
05
• No particular way to prevent being copied
• Market leaders may also copy from others (esp. startups)
• Grow fast and cautious, get investments
• Serve niche market (small community or company)
• Careful UX design, increase stickiness
• Address privacy issues
152. Copyright Palapple (Hong Kong) Limited 2015 | 152 www.palapple.com
05
Typical concerns:
Native vs Cross-platform
Functionality
Integration with backend
systems
http://writeapphowmuch.hk
Provides a direct and easier
way to estimate the rough
ballpark development cost