DESIGN | DEVELOP | DISTRIBUTE

App Workshop – Hebe Foundation

What is an app?

“A mobile application (or mobile app) is a software application designed to run on smartphones, tablet computers and other mobile devices.”

Operating Systems

iOS Android

Blackberry Windows

There’s an app for that…

800,000900,000

70,000,000,000Expected app downloads in 2013

Total Apps Total Apps

Who uses apps?

In the UK 1 in 2 people aged between 15-55 own a smartphone capable of

installing apps.

Some stats

Users spend an average of 158 minutes each and every day on smartphones and tablets.

Apps are personal

64% of people fall asleep next to

their phones

An Multipurpose Tool

Apps turn a mobile phone into a multipurpose tool

Mobile Toolkit

TEXT PICTURE MESSAGE EMAIL MOBILE WEB

BLUETOOTH PAYMENTS QR CODES GPS

@

£

ACCELEROMETER AUDIO TOOLS CAMERA TOUCH

What makes a good app

What makes a good app

Discover, explore and share more music, TV shows and ads you love.

What makes a good app

What makes a good app

Apartments for Sale in Augmented Reality

Components of an app

DESIGN | DEVELOP | DISTRIBUTE

Creating a Mobile App

The Process

DEVELOPMENT TESTING RELEASE MARKETING

THE IDEA FUNCTIONALITY WIREFRAME DESIGN

The Idea

What does the app do?

Why is it different from other apps?

What is the main purpose of the app?

The best ideas tend to be the most simple ones. An app that tries to do one thing well is better than something that does a lot of things badly.

The Functionality

Now you know the purpose of the app what does it need to do to be able to achieve it?

What phone features will it use?

What must a user need to be able to do?

What is the main purpose of the app?

The Wireframe

An App wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the structure and flow of an app. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.

Details on how every single page of the app link together

Demonstrates how the app works and what a user can do

The Design

USER EXPERIENCE

THE BRAND UI DESIGN

Brand

Colour Schemes / Style

SeriousProfessionalTrustworthyCleanInformative

Colours

Keywords

Colour Schemes / Style

FunColourfulGameChild FriendlyEntertaining

Colours

Keywords

User Experience

User Experience

User Interface Design

Colours, style & layout should be an extension of the brand and purpose

DESIGN | DEVELOP | DISTRIBUTE

“Gamestacker” Example

The idea of Gamestacker

Gamestacker is a location based, peer-to-peer game trading app designed to help gamers discover

2nd-hand games nearby.

What it does?

SCANSEARCHAbility to search for

games for trade based on your location

MESSAGEAbility to scan the

barcode of your game to add it to your stack

Ability to message users to set up trades

and purchases

Target Audience

Gamestacker is for anyone who has a stack of games they want to get rid of.

Typically 16-30 year old gamers.

The Wireframe

Log in flow

This flow shows the users the first connection to the app

Browse games flow

This flow shows the user’s searching and selecting a game

Add a game flow

This flow shows the user adding a game to their “Stack”

The Brand

The App Design

The App Design

DESIGN | DEVELOP | DISTRIBUTE

And now its your turn…