Upgrade to Pro — share decks privately, control downloads, hide ads and more …

【Modern Web 2015】愛料理如何打造產品及技術團隊

【Modern Web 2015】愛料理如何打造產品及技術團隊

愛料理是目前全台灣最受歡迎的女性網站之一,以使用者上傳的七萬多道食譜為主,每個月吸引了超過 300 萬的不重複訪客,也衍伸了包含市集、影片以及討論區等相關功能。我將分享愛料理團隊是如何設計、規劃出這些產品,並在功能上線後是如何從使用者端得到重要的意見,並且持續的改進產品。

錄影:https://www.youtube.com/watch?v=yuimkUWfmkE

Richard Lee

May 16, 2015
Tweet

More Decks by Richard Lee

Other Decks in Programming

Transcript

  1. How we build product and
    team
    by Richard Lee
    Photo by Oxfam International on Flickr

    View full-size slide

  2. Richard Lee
    — Co-founder & CTO
    — Inside
    — Polydice Ѫྉཧ
    — Startup since 2010

    View full-size slide

  3. What we’ve done?
    Photo by Oxfam International on Flickr

    View full-size slide

  4. iCook Ѫྉཧ
    The leading recipe sharing
    platform in Taiwan
    — Social recipe playform
    — Cafe
    — Blog
    — Market
    — Videos, books and
    others

    View full-size slide

  5. How we build product?
    Photo by Oxfam International on Flickr

    View full-size slide

  6. Our product team
    — We have 12 people in web team
    — 4 planners
    — 4 web developers
    — 2 designers
    — 1 DevOps

    View full-size slide

  7. Our project life cycle
    — Planning
    — Designing
    — Developing
    — Releasing

    View full-size slide

  8. 1. Deliver internally as
    often as possible
    Photo by Oxfam International on Flickr

    View full-size slide

  9. Deliverables in different cycle
    — Planning
    — Plan (on Quip)
    — Wireframe (on Moqups)
    — Designing
    — Mockups (on InVision)
    — Probably prototype (by HTML)

    View full-size slide

  10. Wireframe
    — Low fidelity but updating is cheap
    — Do consider as much edge cases as
    possible

    View full-size slide

  11. Mockups
    Our designer start drawing mockups only
    after plan & wireframe have been discussed
    and confirmed.
    Be open-minded and accept changes

    View full-size slide

  12. In our company, every
    stage of our discussion
    involve almost everyone.
    Photo by Oxfam International on Flickr

    View full-size slide

  13. 2. Deliver externally as
    quick as possible
    Photo by Oxfam International on Flickr

    View full-size slide

  14. Delivering techniques
    — Developing
    — Feature flagging
    — Beta testing groups
    — Releasing
    — Feature flagging
    — Staged release

    View full-size slide

  15. Staging website is old
    fashion, use feature
    flagging
    Photo by Oxfam International on Flickr

    View full-size slide

  16. What is feature flagging?
    You use simple if-else logic to release codes
    to only part of users.
    if user.is_admin? || user.recipes_count > 10
    # new feature for *admin* / *frequent user*
    else
    # old feature
    end

    View full-size slide

  17. Benefit
    By feature flagging,
    1. You have new & old codes for test & code
    reviewing
    2. You can switch (rollback) fast
    3. You can do A/B testing

    View full-size slide

  18. Beta testing group
    Based on feature flagging,
    you select part of user to
    join.
    1. Use an online form to
    do survey
    2. Ask them to add to
    Facebook group at the
    end
    3. Write release notes
    when you want to test
    something

    View full-size slide

  19. Staged release
    Release new feature to only part of users
    based on feature flagging.
    if user.id % 10 == 1
    # new feature for *10% of users*
    else
    # old feature
    end

    View full-size slide

  20. 3. Product without
    monitoring is not on
    production yet
    Photo by Oxfam International on Flickr

    View full-size slide

  21. Key metrics
    What do you expect to see
    this as successful?
    — Acquisition
    — Activation
    — Retention
    — Referral
    — Revenue

    View full-size slide

  22. Tools
    It might be a bit of hard for non-technical
    people to add analytics.
    1. Google Tag Manager
    — Free & Tons of tutorial
    2. Segment.com
    — Tracking plan is highly recommended
    Both provide simple adapters for analytics.

    View full-size slide

  23. Fly slower is better
    than fly blindly
    Photo by Oxfam International on Flickr

    View full-size slide

  24. 4. Everyone do
    product support

    View full-size slide

  25. Make user easy to access
    1. Put support form link or button
    everywhere
    — Footers / Main navigation
    2. Hook you Email systems with support
    system
    [email protected] / [email protected] /
    etc
    3. Facebook fan page could be a nice way as
    well

    View full-size slide

  26. Make team easy to access
    1. Pipe notifications into Slack chatroom
    2. Also other passive channels
    — App Store review
    — Twitter / other social media search
    results

    View full-size slide

  27. 5. Write plans as your
    roadmap
    Photo by Oxfam International on Flickr

    View full-size slide

  28. Our plan structure
    1. Overview
    2. Product experience
    3. Product support
    4. Others

    View full-size slide

  29. Project overview
    1. Purpose
    — Why you need this?
    2. Description
    — Any context or supporting data?
    3. Key metrics
    — How do you consider this feature
    successful?

    View full-size slide

  30. Product experience
    1. Use cases
    — Who?
    — Your feature
    — Why?
    2. Edge cases
    — Outliers
    3. Wireframes / Mockups

    View full-size slide

  31. Product support
    1. Analytics
    — What kind of instrumentation you
    need for metrics
    2. Marketing
    — Marketing campaign or something
    3. Customer support
    — Template response or product F&Q

    View full-size slide

  32. Others
    1. Open questions
    2. Meeting notes

    View full-size slide

  33. Recap
    Photo by Oxfam International on Flickr

    View full-size slide

  34. Our project life cycle
    — Planning
    — Designing
    — Developing
    — Releasing
    We keep iterating within stages, and only
    proceed to next cycle if great

    View full-size slide

  35. Final thoughts
    Photo by Oxfam International on Flickr

    View full-size slide

  36. Since your resource
    are limited, so please
    spend wisely.

    View full-size slide

  37. Thank you for coming.
    Photo by Oxfam International on Flickr

    View full-size slide