Mobile Apps - Getting Your Idea Across

Mobile AppsGetting Your Idea Across

Venture Cafe Guilherme Schmitt

Who is this guy?

Hi, I’m Guilherme Schmitt

Mobile Apps - Getting Your Idea AcrossVenture Cafe

Hi, I’m Guilherme Schmitt

Undergrad Visual Design Universidade Federal do Rio Grande do Sul, Porto Alegre, Brazil

New Media Design Exchange student at Rochester Institute of Technology

Joined Intrepid Pursuits App design and development company from Boston

2009

2013

2014


The brief history of the little tools for everybody’s pocket computer

Let’s talk about apps



Apple unveils the iPhone Bringing the smartphones to the mass consumer market

Google releases the Android OS A more open approach to mobile platforms

2007

2008



10 billion apps downloaded from the App store

2011



App Store has 1 million apps available

Android reaches 1 billion devices

2013

2014



Mobile app market revenue estimation U$ 100 billion

2015

Congratulations! It’s a great time to be working with apps!

Source: http://www.developereconomics.com/reports/app-economy-forecasts-2013-2016/


http://www.developereconomics.com/reports/app-economy-forecasts-2013-2016/

The steps for getting your app idea across

How are we doing this?


How are we doing this?

Overlook of the development phases Tools, resources and best practices

Building an app concept together

INFO

ACTIVITY


Getting from app concept to product

Stages of app development



RESEARCH PLAN EXECUTE



CONCEPT

MARKET RESEARCH


PLAN EXECUTE

RESEARCH


CONCEPTMARKET RESEARCH

What is the problem that we want to solve with our app?

What will our users get from using our app?

What would be the competitors for your app be?

Which apps do a similar function?


RESEARCH



PLAN EXECUTE

CONCEPTSummarized value proposal

MARKET RESEARCH

What can we learn from the competition?

RESEARCH



EXECUTE


MARKET RESEARCH


USER STORIES

APP FLOW

PLANRESEARCH

Writing user stories


A sentence that defines an app feature from someone's perspective.


User Story



User Story

A sentence that defines an app feature from someone's perspective.

“As a <persona> I want to <action>, so that I can <function>"





USER

DEVELOPER

COMPANY

TAKE A PICTURE

SEARCH

WRITE A POST

SAVE THIS FOR LATER

FIND INFORMATION

TELL MY FRIENDS




Every feature gets its own user story.

They are compiled in a single document, grouped by app sections. (home screen, profile, etc.)

This is a living, constantly revised document. image from http://requirements.seilevel.com/blog/

2014/03/the-anatomy-of-a-user-story.html


http://requirements.seilevel.com/blog/2014/03/the-anatomy-of-a-user-story.html


CONCEPT

USER STORIES

APP FLOWSummarized value proposal

Understanding what the users want / expect from each screen

MARKET RESEARCH


RESEARCH PLAN


EXECUTE

Building an app flow


App FlowVisual resource that showcases the connections between each app section.




What does Instagram’s app flow look like?




PHOTO FEED

CAMERA

EDIT PHOTO

WRITE POST




PHOTO FEED

CAMERA

EDIT PHOTO

WRITE POST

Like other people’s photos Write comments See the timestamp

Chose front facing / back camera Turn flash on / off

Select a photo filter Make photo adjustments

Write a title for the photo Pick a location Tag friends Choose to share on other social media




PHOTO FEED

CAMERA

EDIT PHOTO

WRITE POST




PHOTO FEED

PROFILENOTIFICATIONSCAMERAEXPLORE

SETTINGSEDIT PHOTO

WRITE POST

SEARCH



Mobile Apps - Getting Your Idea AcrossVenture Cafe RESEARCH PLAN EXECUTE


CONCEPT

USER STORIES



Determine how you can get from each section

MARKET RESEARCH


RESEARCH PLAN

EXECUTE


WIREFRAMES

EXECUTE

PRODUCTION



CONCEPT

USER STORIES




MARKET RESEARCH


RESEARCH PLAN

Wireframes


Stripped down visual representation on “how it works” not “how it looks”.

Interactions are explained with annotations.

Simple shapes, no colors, no images, no custom fonts.


Wireframes


Wireframes


Wireframes


Wireframes


Wireframes


Simple look keeps you focused on the actual user experience iteration.

Easy to change and adapt.

Why make these?

Image by Virgil Pana - Dribbble


https://dribbble.com/shots/842675-iPhone-timeline?list=searches&tag=wireframes&offset=39

Wireframes


Can be done anywhere!

Image placeholder Text placeholder


Wireframes


Apply user stories to the wireframe

"…browse the photo feed so I can see what my friends are doing"

“…check my profile so I can see my pictures.”

“… check my notifications so I can know who liked my photos.”

“… search for people to follow so I can get more interesting photos on my feed.”

“… take pictures so I can share them with my friends”

"As a user, I want to…


Wireframes


Annotate your wireframe and explain the interactions

2

The user can tap on a user name to go to their profile and see all their pictures

1

1

By double tapping on an image, the user can easily “like" a photo

2

3

By tapping on the number of likes, the user can see a list of everyone that liked that photo

3


Wireframes


Wireframes with annotations use all your previous research.

They should be enough to explain how the app works to someone that’s completely unfamiliar with it.

CONCEPT

WIREFRAMES

USER STORIES APP FLOW

MARKET RESEARCH

PRODUCTION

Client feedback Adjustments / Iteration

Development / coding


WIREFRAMES

EXECUTE

PRODUCTION



CONCEPT

USER STORIES




MARKET RESEARCH


RESEARCH PLAN

Transforming the user needs into a visual format

Production


With our completed wireframes, app design tools are now used to explore different look & feel options


WIREFRAMES

EXECUTE

PRODUCTION



CONCEPT

USER STORIES




MARKET RESEARCH


RESEARCH PLAN


Visual and technical development begins

Resources to get your idea across

Tools and best practices




Helps on drawing boxes needed for wireframes.

Gridded paper

Phone size paper templates

Correct proportions with a predefined mobile phone frame.

http://www.interfacesketch.com/



Free on Macs (bought after 2013, if not, US$ 10)

Easy to use with nice alignment tools

Great for wireframes - you don’t get stuck on details

Keynote



Mac app specifically created for designing user interfaces

Can also be used for wireframes

Great support from the design community

15 day free trial, $99 license

Sketch



Sketch Status Bars Cells Views

Bars

Elements

Sketch iOS UI Design Template – Version 2.0 This is a collection of symbols and text styles at 1x scale (375pt) for quickly mocking up iPhone apps, created by Bohemian Coding, and released under the MIT license

Sketch 9:41 AM 100%

Sketch 9:41 AM 100%

Back EditTitle

Back EditTitle

Back

First Second Edit

Search

Search

Music Films TV Shows Search More

Sketch

Amsterdam

Rotterdam

The Hague

Utrecht

Brian Ingram YesterdayIt was great to see you again earlier. Let’s definitely get that coffee sometime next week…

Label

Label Value

Label

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

123 space return

I The I’m

Wed 7 Oct 17 00

OKDon’t Allow

Notifications may include alerts,sounds and icon badges. These can be

configured in Settings.

“An App” Would Like to SendYou Notifications

Cancel

AirDrop. Tap to turn on Wi-Fi and Bluetooth toshare with AirDrop.

Message Mail More

More

First Second Third

Hello BackSelect Select All Paste

Delete1

Comes with some of iOS and Android UI templates

Free plugins can extend Sketch’s functionality

Sketch Toolboxhttp://sketchtoolbox.com/

http://sketchtoolbox.com/



Sketch

Content generator



Icons database

Great for placeholder elements Most icons are free with creator reference

The Noun Project

http://thenounproject.com/

http://thenounproject.com/



Icons database

Free for commercial use

Iconmonstr

http://iconmonstr.com/

http://iconmonstr.com/

The best way to learn a skill is by doing it

Let’s build an app together!




Who here wants to share their app idea?

WIREFRAMES

EXECUTE

PRODUCTION


CONCEPT

USER STORIES

APP FLOW

MARKET RESEARCH

RESEARCH PLAN




CONCEPTMARKET RESEARCH

What is the problem that we want to solve with our app?

What will our users get from using our app?

What would be the competitors for your app be?

Which apps do a similar function?

RESEARCH

EXECUTE



MARKET RESEARCH


RESEARCH PLAN


WIREFRAMES

PRODUCTION

USER STORIES

APP FLOW



USER STORIES


PLAN

EXECUTE


CONCEPT

USER STORIES



MARKET RESEARCH


RESEARCH PLAN


WIREFRAMES

PRODUCTION



APP FLOW

How do you get from section to section?

FIRST SCREEN

?

PLAN

EXECUTE


CONCEPT

USER STORIES




MARKET RESEARCH


RESEARCH PLAN


WIREFRAMES

PRODUCTION



WIREFRAMES

EXECUTE

Taking the user stories and applying it to a visual form.

WIREFRAMES

EXECUTE

PRODUCTION


CONCEPT

USER STORIES




MARKET RESEARCH


RESEARCH PLAN


Visual and technical development begins


Any questions?

Thank You!


@guischmitt

You can find me on

TWITTER

BLOG blog.guilhermeschmitt.com

http://blog.guilhermeschmitt.com

Mobile Apps - Getting Your Idea Across

Design

idea acrossventure cafelets

idea acrossventure cafehi

idea acrossventure cafegetting

idea acrossventure cafehow

idea acrossventure cafeas

app idea acrosshow

appsmobile apps

boston200920132014mobile