Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building an app from idea to launch (tools and best practices)

1,092 views

Published on

The 3 primary stages of creating an app: design, development, delivery. This presentation deck will walk you through the process and deliverables within each stage.

Company bio:
Oursky is an app dev studio based in Hong Kong and Taipei. We've been designing and developing apps for startups and big corps such as Jamn Player, ASOS, and Thomson Reuters since 2008.

Our flagship product Skygear.io is a serverless framework that helps app developers build better apps faster.

Published in: Software

Building an app from idea to launch (tools and best practices)

  1. 1. Building an App from Idea to Launch Tools and Best Practices David Ng, Product & Growth at Oursky
  2. 2. Building an idea into an app requires hours of dedication to design and development
  3. 3. Where do you start?
  4. 4. Don’t find an engineer… yet.
  5. 5. The Big picture Design Develop Deliver
  6. 6. The Big picture Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  7. 7. The Big picture Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  8. 8. User story
  9. 9. The Big picture Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  10. 10. Wireframe
  11. 11. Wireframe • What elements should be on the page • Why they should be there • Where you should place them • How they should function
  12. 12. Wireframe - Best Practices Styling introduces distraction Image: http://uxmovement.com/products/wireframe-patterns-design-at-a-pro-level-with-ease/
  13. 13. Wireframe - Best Practices • Visual clarity is important • No style is needed
  14. 14. The Big picture Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  15. 15. Design
  16. 16. Design - Best Practices • Follow the Design Guidelines • iOS Human Interface Guidelines. • Android Material Design Guildlines • Avoid using the same UI/UX for multiple platforms
  17. 17. Design - Best Practices http://www.phonedog.com/sites/phonedog.com/files/styles/blog_entry/public/blog/main_image/2015/04/ twittertrendsiphoneandroid.png?itok=sIydLGDN
  18. 18. Design - Best Practices (Con’t) • Be consistent • Simplify users’ life • Amaze users
  19. 19. The Big picture Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  20. 20. Interactive Prototype video: http://blog.flinto.com/flinto-2-introducing-the-behavior-designer.html
  21. 21. Interactive Prototype • Preview your app on device • Show interaction / animation when user interacts with it • Integrate with user testing • You can test your app without a real app
  22. 22. The Big picture Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  23. 23. Usability Test • We are asking: How well people can use your app? • Method: Observe how people actually use your app • Hallway Testing • Remote usability testing
  24. 24. The Big picture Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  25. 25. The Big picture Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  26. 26. Define resources • Major resources to consider: • Time • Budget • Affects: • App features and polish • Number of supported platforms • Manpower
  27. 27. The Big picture Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  28. 28. In-house / Out-source Development options: • Build your in-house development team • Outsource your project • (Some people do hybrid)
  29. 29. Build a development team • 1st option: Find a technical partner to recruit a team • 2nd option: recruit a team (don’t just rely on 1 “full-stack” developer) • Considerations: your tech lead / CTO will determine your technical architecture
  30. 30. Approaches to development • Use ready-made components to build faster • Open source libraries • Free / Paid services • Backend-less approach
  31. 31. Outsource your project • how to pick a vendor if you opt to outsource • Quality - reference their past projects • Cost • Availability
  32. 32. The Big picture Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  33. 33. Tech Architecture Android App App Server iOS App Web App Database
  34. 34. The Big picture Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  35. 35. QA • To assure the app quality after implementation • Types: • Functional Test • Stress Test • Usability Test
  36. 36. The Big picture Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  37. 37. Publishing
  38. 38. Publishing • iOS App on App Store • Upload via iTunes Connect • Android App on Play Store • Upload via Google Play Developer Console
  39. 39. The Big picture Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  40. 40. Analytics • How many users using your app? • How users use your app? • How many people did a specific action? (e.g. sharing)
  41. 41. Analytics
  42. 42. Analytics - best practices • Identify your KPI (Key Performance Indicators) • Always collect as much raw data as you could
  43. 43. Analytics - growth funnel
  44. 44. The Big picture Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  45. 45. Debugging "Debugging is twice as hard as writing the code in the first place.” - Brian Kernighan
  46. 46. Error tracking • Tracking errors from the real users to help you debugging. • Get as much useful info as possible
  47. 47. Error tracking • Sentry
  48. 48. From idea to reality Design Develop Deliver • User Story • Wireframe • Design • Interactive Prototype • Usability Test • Define resources • In-house/out-source • Tech architecture • QA • Publishing • Analytics • Error Tracking
  49. 49. Conclusion Design Develop Deliver
  50. 50. Please feel free to ask any question. Thank you
  51. 51. A B O U T U S Wespecialiseincreatingdigitalproductswithgreatexperiences 2008 founded in 40 talented designers and developers 2 studios in Hong Kong and Taipei
  52. 52. Apple featured our apps LabelboxGif.cam Spentable
  53. 53. Featured by Appstore LabelboxS p i c e u p y o u r p h o t o s w i t h b e a u t i f u l l a b e l s a n d s t a m p s . Users >3M Unique Labels & Stamps 300 Challenge With thousands of competitors on the market. We continue using analytics to experiment and implement new strategies to improve the app’s monetisation and user retention. Technologies Used iOS (Objective-C)
  54. 54. Wireframe - Tools • Sketch • Illustrator • Hand-drawn
  55. 55. Design - Tools • Sketch • Photoshop • Adobe XD
  56. 56. Prototype - Tools • Google Pixate (Shut down on 31Oct) • Flinto • Facebook Origami • InVision • Collect feedback
  57. 57. Usability Test - Tools • UserTesting.com
  58. 58. Analytics - tools • Google Analytics • Mixpanel • Apsalar • Facebook Analytics • segment.io • Raw Data in your database

×