Building an App from Idea to Launch

Tools and Best Practices

David Ng, Product & Growth at Oursky

Building an idea into an apprequires hours of dedication to design and

development

Where do you start?

Don’t find an engineer…yet.

The Big picture

Design Develop Deliver

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

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

User story

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

Wireframe

Wireframe

• What elements should be on the page

• Why they should be there

• Where you should place them

• How they should function

Wireframe - Best Practices

Styling introduces distractionImage: http://uxmovement.com/products/wireframe-patterns-design-at-a-pro-level-with-ease/

Wireframe - Best Practices

• Visual clarity is important

• No style is needed

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

Design

Design - Best Practices

• Follow the Design Guidelines

• iOS Human Interface Guidelines.

• Android Material Design Guildlines

• Avoid using the same UI/UX for multiple platforms

Design - Best Practices

http://www.phonedog.com/sites/phonedog.com/files/styles/blog_entry/public/blog/main_image/2015/04/twittertrendsiphoneandroid.png?itok=sIydLGDN

Design - Best Practices (Con’t)

• Be consistent

• Simplify users’ life

• Amaze users

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

Interactive Prototype

video: http://blog.flinto.com/flinto-2-introducing-the-behavior-designer.html

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

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

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

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

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

Define resources• Major resources to consider:

• Time

• Budget

• Affects:

• App features and polish

• Number of supported platforms

• Manpower

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

In-house / Out-source

Development options:

• Build your in-house development team

• Outsource your project

• (Some people do hybrid)

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

Approaches to development

• Use ready-made components to build faster

• Open source libraries

• Free / Paid services

• Backend-less approach

Outsource your project

• how to pick a vendor if you opt to outsource

• Quality - reference their past projects

• Cost

• Availability

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

Tech Architecture

Android App

App Server

iOS App Web App

Database

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

QA

• To assure the app quality after implementation

• Types:

• Functional Test

• Stress Test

• Usability Test

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

Publishing

Publishing

• iOS App on App Store

• Upload via iTunes Connect

• Android App on Play Store

• Upload via Google Play Developer Console

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

Analytics

• How many users using your app?

• How users use your app?

• How many people did a specific action? (e.g. sharing)

Analytics

Analytics - best practices

• Identify your KPI (Key Performance Indicators)

• Always collect as much raw data as you could

Analytics - growth funnel

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

Debugging"Debugging is twice as hard as writing the code in

the first place.”

- Brian Kernighan

Error tracking

• Tracking errors from the real users to help you debugging.

• Get as much useful info as possible

Error tracking• Sentry

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

Conclusion

Design Develop Deliver

Please feel free to ask any question.

Thank you

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

Apple featured our apps

LabelboxGif.cam Spentable

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)

Wireframe - Tools

• Sketch

• Illustrator

• Hand-drawn

Design - Tools

• Sketch

• Photoshop

• Adobe XD

Prototype - Tools

• Google Pixate (Shut down on 31Oct)

• Flinto

• Facebook Origami

• InVision

• Collect feedback

Usability Test - Tools• UserTesting.com

Analytics - tools• Google Analytics

• Mixpanel

• Apsalar

• Facebook Analytics

• segment.io

• Raw Data in your database