Prototyping Mobile Application with Adobe FireWorks - By Linus Lim for VOX LAB

Brainstorming mobile applications

Mobile Applications vs Mobile Websites

Mobile Websites

-Needed internet connection-Provide on the go content-Provide same experience as app but not

Mobile Websites

-Alter website to look on mobile

CNN provide a clean strip-down for mobile devices

Mobile Apps

-Faster than mobile site-Not constrained by internet connection-Provide advanced features-Niche and help do a specific task

Starbucks Mobile Card App

-Simplicity-Enhanced the brand-Provide advanced features-Store customer info and credit card in secure private account

http://www.starbucks.com/coffeehouse/mobile-apps/starbucks-card-mobile

Starbucks Mobile Card - Weakness

-Only people use iphone will use this app

-Not many people will be in store

-Need computer in order to receive orders

Starbucks Mobile Card - Strength

-No long queues

- Option of paying with the app

- Efficient

Starbucks Mobile Card

Goals & Objectives

- Promote Starbucks

- Beat out other competitors

- No.1 source of coffee for customers on the move


Opportunities

- More business- Less stressing on staff- More revenues


Business ConceptThe whole concept is for anyoneto get their favourite coffee any time of the day

FREE

What makes a mobile app tick?

Application Development

What’s the process of building an app

-Goal of the app-Design-Development-Submission-Support

Features

Push Notification

Motion SensorsMedia

Contacts

API Integration

Maps Integration

GPS

Advertising

Social Sharing

Photos / Videos

App Store

Approval Process

-iTunes in 7-14 days-Android in 1 hour

Unique Selling Preposition - Paid

-Provide Value or Function to user-Get all app updates for free-Updates improve performance-Add features

Unique Selling Preposition - Free

In-app Purchase Mobile Commerce-Extend promotional-Add new contents

- Go to online store- Simple purchase on the go

Ad Revenue App

-iAds-AdMob-Sponsored Ads

Some Ideas

evernote -Note-taking app

-Save notes, photos andVoice memos

- Access notes from computer or phone

Some Ideas

The Daily -Newspaper app

-Advertisment, videos, animated effects

- Interactive contents

Some Ideas

Slidepad - Presentation app

- Login to SlideShare

- View featured, top-ratedand recent

- Social Sharing

- Advanced Search

Some Ideas

Gilt - Retail Shopping app

- Animated Models

-Interactive Shopping Cart

- Advanced Search

- Secured Credit Card and fast shopping

Some Ideas

USA Today - News app

- Photo gallery

- Weather forcasts

- Latest sports scores

Get Started

http://developer.apple.com/devcenter/ios

Interface Design Guidelines

Navigation Bar- Make sure it’s easy to read the text in the navigation bar- Avoid crowding with additional controls- Avoid altering the back button’s appearance or behaviour


Buttons and Icons- Use them according to their meaning- Design own icons sets to suit your app design needs


Search Bar- When the search field is tapped, a keyboard is showed- Provide a “X” icon to allow erase contents in search field- Bookmark icon provide quick access to info. E.g. locations / recent searches


Action Sheet- Provide alternate ways a task can be completed- Get confirmation before perform a task- Provide a cancel button to allow cancellation of task- Use red button for destructive actions- Avoid making users scroll through the action sheet list


Tab Bar- Should be accessible from every location in the application- When a tab selected, it is highlighted- Do not use tab bar to control elements within the screen- Design own tab bar icons for application needs

Iphone Prototyping in Fireworks

Prototyping Mobile Application with Adobe FireWorks - By Linus Lim for VOX LAB

Education

Transcript of Prototyping Mobile Application with Adobe FireWorks - By Linus Lim for VOX LAB