This is Session 2 in a four-session series, covering product management basics, and developed for students at xlab, Tsinghua University. This session focuses on product design.

1. Product Management @ Mobile
Internet Start-up
Yue Zhuge
Co-Founder/CEO Ivy Gallery
March 20, 2014
Session 2
3/20/2014 Yue Zhuge 1

2. A Four-session Series for Students at
xlab, Tsinghua University
Session 1:
• Product management basics and skills
Session 2:
• From customer needs to quality product: requirements
and design
Session 3:
• Project management and execution
Session 4:
• Product management at a start-up company
3/20/2014 Yue Zhuge 2

3. Four Major Product Functions
Product
Specification
User
Understanding
Market
Understanding
Product Design
3/20/2014 Yue Zhuge 3

4. Three Inter-related Areas
Functions
UXUI
3/20/2014 Yue Zhuge 4

5. 3/20/2014 Yue Zhuge 5
Do not Listen to Your Customers:
User Requirements to Product
Function

6. Product Function Must Be
Valuable Usable
Feasible
3/20/2014 Yue Zhuge 6

7. Product Function Example:
Ivy Auto-Grouping
3/20/2014 Yue Zhuge 7

8. Product Function Example
• Why valuable?
– Auto-grouping from multiple sources saves time for
organizing large amount of photos
– It groups images naturally according to daily events
just like user would have done it manually
• Why usable?
– Auto-grouping needs no user actions
– User can later label auto-grouped events
• Why feasible?
– Can provide seamless experience within 5 sec of start
time with ≤50k photos on the cloud
3/20/2014 Yue Zhuge 8

9. Spell out the Function in Details
• You may use a list of sentences start with “the
user should be able to …” to spell out all the
user facing changes due to this function
• Be aware of the impact to existing features
3/20/2014 Yue Zhuge 9

10. Function Detail Example: Search
• The user should be able to search photos
according to its labeling information
– Date, location, event name, photo meta-data
• The search results will show up as a shrinking
list with thumbnails while the user type
• The user should be able to jump the photo
location in the dashboard from the search
result
3/20/2014 Yue Zhuge 10

11. Develop Multiple Functions for
Product Releases
Follow a
theme, or
Complete a
user story
3/20/2014 Yue Zhuge 11
• MVP (Minimum Viable Product) to start with
• Then, each release

12. You do not Want a Headline Like This
“Citibank Releases Major App Update v6.0, and
It’s a Mixed Bag”
3/20/2014 Yue Zhuge 12

13. What’s in a Release Note
• Fab v6.4:
– Added the ability to view videos
– Added ability to see product full-screen
• Tango v 3.5.7
– Comment on friend’s photos
– Re-share pictures from the Newsfeed
• Prismatic v2.1
– Save stories to read later
3/20/2014 Yue Zhuge 13

14. Four Major Product Functions
Product Design
User
Understanding
Market
Understanding
Product
Specification
3/20/2014 Yue Zhuge 14

15. Design Tools for PM
Wireframe
• Illustrate the
structure and
components
Mockup
• Draft visual
design to
illustrate the
effect
Prototype
• Semi-
functional
product that
demonstrates
the major
functions and
flow
3/20/2014 Yue Zhuge 15

16. Example Wireframe
3/20/2014 Yue Zhuge 16
Courtesy of sixrevisions.com

17. Example Mockup
3/20/2014 Yue Zhuge 17
Courtesy of jantipuesto.com

18. Example Prototype
3/20/2014 Yue Zhuge 18
Courtesy of smashingmagazine.com

19. UX and UI
• Follow iOS HIG (Human Interface Guidelines)
– https://developer.apple.com/library/ios/documen
tation/userexperience/conceptual/MobileHIG/ind
ex.html
• Follow Android Design Guidelines
– https://developer.android.com/design/get-
started/principles.html
3/20/2014 Yue Zhuge 19

20. HIG has Many Good Suggestions
3/20/2014 Yue Zhuge 20
More important
Less important

21. UX/UI Thinking #1: Audience
• Demographic
• Device
• Time spent
• …
• What do they care
most: Speed? Fun?
Rich content?
Privacy?
3/20/2014 Yue Zhuge 21

22. Example: Design for the Details: Device
3/20/2014 Yue Zhuge 22

23. UX/UI Thinking #2: App Focus
• (e.g., banking, commerce)
• Simple, light-weight design
Function focused
• (e.g., game)
• Visually impressive
Leisure focused
• (e.g., news, photos)
• Performance and content quality
Content focused
• (e.g., SNS)
• Emphasis on people
Communication
focused
• (e.g., contacts, to-do list)
• Ease of use
Tools
3/20/2014 Yue Zhuge 23

24. UX/UI Thinking #3: Structure
• Example: weather, diaryFlat
• Example: news by categoriesList/Tree
• Example: bankingTab
• Example: image browsing, gossipNet
• Example: e-commerceFlow
• Example: local business searchContent Driven
3/20/2014 Yue Zhuge 24

25. How to Validate?
Method 1: User Study
Method 2: Data Analysis
3/20/2014 Yue Zhuge 25

26. Break and User Study Exercise
3/20/2014 Yue Zhuge 26

27. Simple User Study
Select a partner
Find an app on your
phone that is okay to
see by your
partner, but unfamiliar
to him.
• Login if needed.
Let him play with the
app for five minutes
• You cannot help him with
anything
• Observe without
interruption even if you
think he is making
mistakes
Answer the following
questions
• What is the first button he
pressed?
• How long did it take him
to spot the most
important function in your
mind?
• Is there a good function
that he did not discover?
• Did he make any mistakes?
• Was he confused at some
point?
3/20/2014 Yue Zhuge 27

28. Data Analysis Example: People’s Action
in Edit Mode
3/20/2014 Yue Zhuge 28
Delete Redo Move
to
Share
Is this what you intended?

29. Thank You!
• Email: yue@ivy.ag
• Twitter: @yuezhuge
• Weibo: @诸葛越Yue
3/20/2014 Yue Zhuge 29