building an app from idea to launch (tools and best practices)
TRANSCRIPT
![Page 1: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/1.jpg)
Building an App from Idea to Launch
Tools and Best Practices
David Ng, Product & Growth at Oursky
![Page 2: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/2.jpg)
![Page 3: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/3.jpg)
Building an idea into an apprequires hours of dedication to design and
development
![Page 4: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/4.jpg)
Where do you start?
![Page 5: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/5.jpg)
Don’t find an engineer…yet.
![Page 6: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/6.jpg)
The Big picture
Design Develop Deliver
![Page 7: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/7.jpg)
The Big pictureDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 8: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/8.jpg)
The Big pictureDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 9: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/9.jpg)
User story
![Page 10: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/10.jpg)
The Big pictureDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 11: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/11.jpg)
Wireframe
![Page 12: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/12.jpg)
Wireframe
• What elements should be on the page
• Why they should be there
• Where you should place them
• How they should function
![Page 13: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/13.jpg)
Wireframe - Best Practices
Styling introduces distractionImage: http://uxmovement.com/products/wireframe-patterns-design-at-a-pro-level-with-ease/
![Page 14: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/14.jpg)
Wireframe - Best Practices
• Visual clarity is important
• No style is needed
![Page 15: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/15.jpg)
The Big pictureDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 16: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/16.jpg)
Design
![Page 17: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/17.jpg)
![Page 18: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/18.jpg)
![Page 19: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/19.jpg)
Design - Best Practices
• Follow the Design Guidelines
• iOS Human Interface Guidelines.
• Android Material Design Guildlines
• Avoid using the same UI/UX for multiple platforms
![Page 20: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/20.jpg)
Design - Best Practices
http://www.phonedog.com/sites/phonedog.com/files/styles/blog_entry/public/blog/main_image/2015/04/twittertrendsiphoneandroid.png?itok=sIydLGDN
![Page 21: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/21.jpg)
Design - Best Practices (Con’t)
• Be consistent
• Simplify users’ life
• Amaze users
![Page 22: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/22.jpg)
The Big pictureDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 23: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/23.jpg)
Interactive Prototype
video: http://blog.flinto.com/flinto-2-introducing-the-behavior-designer.html
![Page 24: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/24.jpg)
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
![Page 25: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/25.jpg)
The Big pictureDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 26: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/26.jpg)
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
![Page 27: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/27.jpg)
The Big pictureDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 28: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/28.jpg)
The Big pictureDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 29: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/29.jpg)
Define resources• Major resources to consider:
• Time
• Budget
• Affects:
• App features and polish
• Number of supported platforms
• Manpower
![Page 30: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/30.jpg)
The Big pictureDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 31: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/31.jpg)
In-house / Out-source
Development options:
• Build your in-house development team
• Outsource your project
• (Some people do hybrid)
![Page 32: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/32.jpg)
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
![Page 33: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/33.jpg)
Approaches to development
• Use ready-made components to build faster
• Open source libraries
• Free / Paid services
• Backend-less approach
![Page 34: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/34.jpg)
Outsource your project
• how to pick a vendor if you opt to outsource
• Quality - reference their past projects
• Cost
• Availability
![Page 35: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/35.jpg)
The Big pictureDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 36: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/36.jpg)
Tech Architecture
Android App
App Server
iOS App Web App
Database
![Page 37: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/37.jpg)
The Big pictureDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 38: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/38.jpg)
QA
• To assure the app quality after implementation
• Types:
• Functional Test
• Stress Test
• Usability Test
![Page 39: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/39.jpg)
The Big pictureDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 40: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/40.jpg)
Publishing
![Page 41: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/41.jpg)
Publishing
• iOS App on App Store
• Upload via iTunes Connect
• Android App on Play Store
• Upload via Google Play Developer Console
![Page 42: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/42.jpg)
The Big pictureDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 43: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/43.jpg)
Analytics
• How many users using your app?
• How users use your app?
• How many people did a specific action? (e.g. sharing)
![Page 44: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/44.jpg)
Analytics
![Page 45: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/45.jpg)
Analytics - best practices
• Identify your KPI (Key Performance Indicators)
• Always collect as much raw data as you could
![Page 46: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/46.jpg)
Analytics - growth funnel
![Page 47: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/47.jpg)
The Big pictureDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 48: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/48.jpg)
Debugging"Debugging is twice as hard as writing the code in
the first place.”
- Brian Kernighan
![Page 49: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/49.jpg)
Error tracking
• Tracking errors from the real users to help you debugging.
• Get as much useful info as possible
![Page 50: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/50.jpg)
Error tracking• Sentry
![Page 51: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/51.jpg)
From idea to realityDesign Develop Deliver
• User Story
• Wireframe
• Design
• Interactive Prototype
• Usability Test
• Define resources
• In-house/out-source
• Tech architecture
• QA
• Publishing
• Analytics
• Error Tracking
![Page 52: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/52.jpg)
Conclusion
Design Develop Deliver
![Page 53: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/53.jpg)
Please feel free to ask any question.
Thank you
![Page 54: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/54.jpg)
A B O U T U S
We specialise in creating digital products with great experiences
2 0 0 8f o u n d e d i n
4 0t a l e n t e d d e s i g n e r s a n d d e v e l o p e r s
2s t u d i o s i n H o n g K o n g a n d Ta i p e i
![Page 55: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/55.jpg)
![Page 56: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/56.jpg)
Apple featured our apps
LabelboxGif.cam Spentable
![Page 57: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/57.jpg)
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
>3MUnique 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)
![Page 58: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/58.jpg)
Wireframe - Tools
• Sketch
• Illustrator
• Hand-drawn
![Page 59: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/59.jpg)
Design - Tools
• Sketch
• Photoshop
• Adobe XD
![Page 60: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/60.jpg)
Prototype - Tools
• Google Pixate (Shut down on 31Oct)
• Flinto
• Facebook Origami
• InVision
• Collect feedback
![Page 61: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/61.jpg)
Usability Test - Tools• UserTesting.com
![Page 62: Building an app from idea to launch (tools and best practices)](https://reader031.vdocuments.us/reader031/viewer/2022022203/58767ea61a28ab1b158b54cf/html5/thumbnails/62.jpg)
Analytics - tools• Google Analytics
• Mixpanel
• Apsalar
• Facebook Analytics
• segment.io
• Raw Data in your database