Mobile Prototyping Masterclass

About Me

Matthew Ho

● We make innovative apps● Digital Producer background● Worked online for 7 years● Next Digital, Deloitte, Airbnb● Twitter: @inspiredworlds

Head of Product Development at Tapmint

1. A prototype is an early model or release of a product built to test a concept or process.

2. Not final product 3. Distinct to MVP 4. Everything prior to MVP is

prototyping

What is a Prototype?

Why Use Prototypes?

● What are we trying to achieve?● Process: hypothesis - evaluate - test

● Customer feedback

● Test a process

● Cost – Less cost

● Risk – test our assumptions

Case Study 1: LP Strategy App

1. We had a hypothesis that we could win using cheats in the Letterpress game

2. Initial version ran from local computer3. We tested it over several days with

developer running the LP Strategy prototype vs actual user (me)

4. We refined it & tested against real competition

Case Study 1: LP Strategy App

1. We developed it into an app by the end of the 1st week

2. We improved design 3. Refined for 1 more week4. Submitted to app store in two

weeks (MVP)

Case Study: LP Strategy App

1. Constant iteration based on feedback.

2. Weekly release cycles: design, development, and marketing

3. 10,000 downloads. 4. #5 ranked app for “Letterpress” in

AU, #8 in US in a competitive category.

Case Study 2: Fun Social App

● Hackathon - half a day● Purpose: foster teamwork,

showcase our skills● Output: create a fun social app

Friend Select Screen

Initial idea Collaboration

Uploading a File

1. We decided to email attachment 2. Easier and less effort to email it via

mandrill 3. Alternative: setup AWS, create a bucket,

connect servers. Takes more time.

How We Prototype

1. Use tools & technology that you can be most productive in2. We have cross disciplinary skills 3. Mobile/web experience (made 12 products together)4. Immediately move towards working software

How We Prototype

1. We can go from sketch to development/design. 2. Build/design as fast as specs are written3. Developed our own framework and libraries4. Cross platform app development tools 5. We don’t worry about scaling and final live version6. Aim: to get working software in the hands of users

Popapp: turns sketch into interactive prototype

https://popapp.in/

Mobile App Prototyping Tools

● Wireframing tools○ Moqups: wireframes for main screens and write user stories○ Balsamiq, Axure

Mobile App Prototyping Tools

Mobile App Prototyping Tools

● Turn designs into interactive prototype○ Appgyver prototyper○ Flinto○ Invision

Mobile App Prototyping Tools

Mobile App Prototyping Tools

Appendix: Web Prototyping

Web Prototyping Tools● Landing pages: unbounce, strikingly, lead pages ● No graphic designer required: twitter bootstrap http://getbootstrap.com/ ● Themes for bootstrap: https://wrapbootstrap.com/ ● Services to help you get a colour scheme

http://www.pictaculous.com/http://www.cssdrive.com/imagepalette/

What if I don’t have a developer or designer?

Summary

1. The process of creating prototype is similar to MVP2. Hypothesis, experiment, test3. Not final product4. Use technology and tools that we think we can be most

productive5. Team make up can dictate approach and tools

About Us - Tapmint

● Native Tongue - First winning team in Startup Weekend in Australia

● 4 language game apps, 400,000 downloads

● Prototypes: finance, social, word games, productivity.

● Innovation, rapid experimentation, complete solutions

● Twitter: @tapmint ● Website: tapmint.com