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

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

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

Transcript

1. Hello!
2. How we build product and team by Richard Lee Photo by Oxfam International on Flickr
3. Richard Lee — Co-founder & CTO — Inside — Polydice Ѫྉཧ — Startup since 2010
4. What we’ve done? Photo by Oxfam International on Flickr
5. iCook Ѫྉཧ The leading recipe sharing platform in Taiwan — Social recipe playform — Cafe — Blog — Market — Videos, books and others
9. How we build product? Photo by Oxfam International on Flickr
10. Our product team — We have 12 people in web team — 4 planners — 4 web developers — 2 designers — 1 DevOps
11. Our project life cycle — Planning — Designing — Developing — Releasing
12. 1. Deliver internally as often as possible Photo by Oxfam International on Flickr
13. Deliverables in different cycle — Planning — Plan (on Quip) — Wireframe (on Moqups) — Designing — Mockups (on InVision) — Probably prototype (by HTML)
15. Wireframe — Low fidelity but updating is cheap — Do consider as much edge cases as possible
18. Mockups Our designer start drawing mockups only after plan & wireframe have been discussed and confirmed. Be open-minded and accept changes
21. In our company, every stage of our discussion involve almost everyone. Photo by Oxfam International on Flickr
22. 2. Deliver externally as quick as possible Photo by Oxfam International on Flickr
23. Delivering techniques — Developing — Feature flagging — Beta testing groups — Releasing — Feature flagging — Staged release
24. Staging website is old fashion, use feature flagging Photo by Oxfam International on Flickr
25. 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
27. 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
28. 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
29. 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
30. 3. Product without monitoring is not on production yet Photo by Oxfam International on Flickr
31. Key metrics What do you expect to see this as successful? — Acquisition — Activation — Retention — Referral — Revenue
32. 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.
33. Fly slower is better than fly blindly Photo by Oxfam International on Flickr
34. 4. Everyone do product support
35. Make user easy to access 1. Put support form link or button everywhere — Footers / Main navigation 2. Hook you Email systems with support system — hi@icook.tw / contact@polydice.com / etc 3. Facebook fan page could be a nice way as well
36. 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
39. 5. Write plans as your roadmap Photo by Oxfam International on Flickr
40. Our plan structure 1. Overview 2. Product experience 3. Product support 4. Others
41. 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?
43. Product experience 1. Use cases — Who? — Your feature — Why? 2. Edge cases — Outliers 3. Wireframes / Mockups
45. 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
46. Others 1. Open questions 2. Meeting notes
47. Recap Photo by Oxfam International on Flickr
48. Our project life cycle — Planning — Designing — Developing — Releasing We keep iterating within stages, and only proceed to next cycle if great
49. Final thoughts Photo by Oxfam International on Flickr
50. Since your resource are limited, so please spend wisely.
51. Thank you for coming. Photo by Oxfam International on Flickr
52. Q&A