On February 19th I had this presentation at Venture Café in Boston to help people get their mobile app idea across by going through each of the mobile app development phases - from problem definition to creating wireframes. With simple and free tools like Keynote you can materialize your idea into something visual to test it and share it with the world. This presentation is all about how you can be efficient using research and how to iterate on the user experience before trying to come up with a solution on the look and feel aspect - saving money and effort in the long run.

1. Mobile Apps
GettingYour Idea Across
Venture Cafe Guilherme Schmitt

2. Who is this guy?
Hi,I’m Guilherme Schmitt
Mobile Apps - Getting Your Idea AcrossVenture Cafe

3. 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
Mobile Apps - Getting Your Idea AcrossVenture Cafe

4. The brief history of the little tools for everybody’s pocket computer
Let’s talk about apps
Mobile Apps - Getting Your Idea AcrossVenture Cafe

5. 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
Mobile Apps - Getting Your Idea AcrossVenture Cafe

6. Let’s talk about apps
10 billion apps
downloaded from the
App store
2011
Mobile Apps - Getting Your Idea AcrossVenture Cafe

7. Let’s talk about apps
App Store has 1 million
apps available
Android reaches 1
billion devices
2013
2014
Mobile Apps - Getting Your Idea AcrossVenture Cafe

8. Let’s talk about apps
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/
Mobile Apps - Getting Your Idea AcrossVenture Cafe

9. The steps for getting your app idea across
How are we doing this?
Mobile Apps - Getting Your Idea AcrossVenture Cafe

10. How are we doing this?
Overlook of the development phases
Tools,resources and best practices
Building an app concept together
INFO
ACTIVITY
Mobile Apps - Getting Your Idea AcrossVenture Cafe

11. Getting from app concept to product
Stages of app development
Mobile Apps - Getting Your Idea AcrossVenture Cafe

12. Stages of app development
RESEARCH PLAN EXECUTE
Mobile Apps - Getting Your Idea AcrossVenture Cafe

13. Stages of app development
CONCEPT
MARKET
RESEARCH
Mobile Apps - Getting Your Idea AcrossVenture Cafe
PLAN EXECUTE
RESEARCH

14. Mobile Apps - Getting Your Idea AcrossVenture Cafe
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?
Stages of app development
RESEARCH

15. Stages of app development
Mobile Apps - Getting Your Idea AcrossVenture Cafe
PLAN EXECUTE
CONCEPT
Summarized value
proposal
MARKET
RESEARCH
What can we learn
from the competition?
RESEARCH

16. Stages of app development
Mobile Apps - Getting Your Idea AcrossVenture Cafe
EXECUTE
CONCEPT
Summarized value
proposal
MARKET
RESEARCH
What can we learn
from the competition?
USER STORIES
APP FLOW
PLANRESEARCH

17. Writing user stories
Mobile Apps - Getting Your Idea AcrossVenture Cafe
A sentence that defines an app
feature from someone's perspective.
RESEARCH PLAN EXECUTE
User Story

18. Writing user stories
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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>"
RESEARCH PLAN EXECUTE

19. Writing user stories
Mobile Apps - Getting Your Idea AcrossVenture Cafe
“As a <persona> I want to <action>,so that I can <function>"
USER
DEVELOPER
COMPANY
TAKE A PICTURE
SEARCH
WRITE A POST
SAVETHIS FOR LATER
FIND INFORMATION
TELLMYFRIENDS
RESEARCH PLAN EXECUTE

20. Writing user stories
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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
RESEARCH PLAN EXECUTE

21. Stages of app development
CONCEPT
USER STORIES
APP FLOW
Summarized value
proposal
Understanding what the
users want / expect from
each screen
MARKET
RESEARCH
What can we learn
from the competition?
RESEARCH PLAN
Mobile Apps - Getting Your Idea AcrossVenture Cafe
EXECUTE

22. Building an app flow
Mobile Apps - Getting Your Idea AcrossVenture Cafe
App Flow
Visual resource that
showcases the connections
between each app section.
RESEARCH PLAN EXECUTE

23. Building an app flow
Mobile Apps - Getting Your Idea AcrossVenture Cafe
What does Instagram’s app flow
look like?
RESEARCH PLAN EXECUTE

24. Building an app flow
Mobile Apps - Getting Your Idea AcrossVenture Cafe
PHOTO FEED
CAMERA
EDITPHOTO
WRITE POST
RESEARCH PLAN EXECUTE

25. Building an app flow
Mobile Apps - Getting Your Idea AcrossVenture Cafe
PHOTO FEED
CAMERA
EDITPHOTO
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
RESEARCH PLAN EXECUTE

26. Building an app flow
Mobile Apps - Getting Your Idea AcrossVenture Cafe
PHOTO FEED
CAMERA
EDITPHOTO
WRITE POST
RESEARCH PLAN EXECUTE

27. Building an app flow
Mobile Apps - Getting Your Idea AcrossVenture Cafe
PHOTO FEED
PROFILENOTIFICATIONSCAMERAEXPLORE
SETTINGSEDITPHOTO
WRITE POST
SEARCH
RESEARCH PLAN EXECUTE

28. Building an app flow
Mobile Apps - Getting Your Idea AcrossVenture Cafe RESEARCH PLAN EXECUTE

29. Stages of app development
CONCEPT
USER STORIES
APP FLOW
Summarized value
proposal
Understanding what the
users want / expect from
each screen
Determine how you can
get from each section
MARKET
RESEARCH
What can we learn
from the competition?
RESEARCH PLAN
EXECUTE
Mobile Apps - Getting Your Idea AcrossVenture Cafe

30. WIREFRAMES
EXECUTE
PRODUCTION
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Stages of app development
CONCEPT
USER STORIES
APP FLOW
Summarized value
proposal
Understanding what the
users want / expect from
each screen
Determine how you can
get from each section
MARKET
RESEARCH
What can we learn
from the competition?
RESEARCH PLAN

31. Wireframes
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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.
RESEARCH PLAN EXECUTE

32. Wireframes
Mobile Apps - Getting Your Idea AcrossVenture Cafe RESEARCH PLAN EXECUTE

33. Wireframes
Mobile Apps - Getting Your Idea AcrossVenture Cafe RESEARCH PLAN EXECUTE

34. Wireframes
Mobile Apps - Getting Your Idea AcrossVenture Cafe RESEARCH PLAN EXECUTE

35. Wireframes
Mobile Apps - Getting Your Idea AcrossVenture Cafe RESEARCH PLAN EXECUTE

36. Wireframes
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Simple look keeps you
focused on the actual user
experience iteration.
Easy to change and adapt.
Why make these?
Image by Virgil Pana - Dribbble
RESEARCH PLAN EXECUTE

37. Wireframes
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Can be done anywhere!
Image placeholder Text placeholder
RESEARCH PLAN EXECUTE

38. Wireframes
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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…
RESEARCH PLAN EXECUTE

39. Wireframes
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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
RESEARCH PLAN EXECUTE

40. Wireframes
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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
RESEARCH PLAN EXECUTE

41. WIREFRAMES
EXECUTE
PRODUCTION
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Stages of app development
CONCEPT
USER STORIES
APP FLOW
Summarized value
proposal
Understanding what the
users want / expect from
each screen
Determine how you can
get from each section
MARKET
RESEARCH
What can we learn
from the competition?
RESEARCH PLAN
Transforming the
user needs into a
visual format

42. Production
Mobile Apps - Getting Your Idea AcrossVenture Cafe
With our completed
wireframes,app design tools
are now used to explore
different look & feel options
RESEARCH PLAN EXECUTE

43. WIREFRAMES
EXECUTE
PRODUCTION
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Stages of app development
CONCEPT
USER STORIES
APP FLOW
Summarized value
proposal
Understanding what the
users want / expect from
each screen
Determine how you can
get from each section
MARKET
RESEARCH
What can we learn
from the competition?
RESEARCH PLAN
Transforming the
user needs into a
visual format
Visual and technical
development begins

44. Resources to get your idea across
Tools and best practices
Mobile Apps - Getting Your Idea AcrossVenture Cafe

45. Tools and best practices
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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/

46. Tools and best practices
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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

47. Tools and best practices
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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

48. Tools and best practices
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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 Yesterday
It 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 Send
You Notifications
Cancel
AirDrop. Tap to turn on Wi-Fi and Bluetooth to
share with AirDrop.
Message Mail More
More
First Second Third
Hello
Back
Select Select All Paste
Delete
1
Comes with some of iOS
and Android UI templates
Free plugins can extend
Sketch’s functionality
SketchToolbox
http://sketchtoolbox.com/

49. Tools and best practices
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Sketch
Content generator

50. Tools and best practices
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Icons database
Great for placeholder
elements
Most icons are free with
creator reference
The Noun Project
http://thenounproject.com/

51. Tools and best practices
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Icons database
Free for commercial use
Iconmonstr
http://iconmonstr.com/

52. The best way to learn a skill is by doing it
Let’s build an app together!
Mobile Apps - Getting Your Idea AcrossVenture Cafe

53. Let’s build an app together!
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Who here wants to
share their app idea?

54. WIREFRAMES
EXECUTE
PRODUCTION
Mobile Apps - Getting Your Idea AcrossVenture Cafe
CONCEPT
USER STORIES
APP FLOW
MARKET
RESEARCH
RESEARCH PLAN
Let’s build an app together!

55. Let’s build an app together!
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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

56. EXECUTE
Mobile Apps - Getting Your Idea AcrossVenture Cafe
CONCEPT
Summarized value
proposal
MARKET
RESEARCH
What can we learn
from the competition?
RESEARCH PLAN
Let’s build an app together!
WIREFRAMES
PRODUCTION
USER STORIES
APP FLOW

57. Let’s build an app together!
Mobile Apps - Getting Your Idea AcrossVenture Cafe
USER STORIES
“As a <persona> I want to <action>,so that I can <function>"
PLAN

58. EXECUTE
Mobile Apps - Getting Your Idea AcrossVenture Cafe
CONCEPT
USER STORIES
APP FLOW
Summarized value
proposal
Understanding what the
users want / expect from
each screen
MARKET
RESEARCH
What can we learn
from the competition?
RESEARCH PLAN
Let’s build an app together!
WIREFRAMES
PRODUCTION

59. Let’s build an app together!
Mobile Apps - Getting Your Idea AcrossVenture Cafe
APP FLOW
How do you get from
section to section?
FIRSTSCREEN
?
PLAN

60. EXECUTE
Mobile Apps - Getting Your Idea AcrossVenture Cafe
CONCEPT
USER STORIES
APP FLOW
Summarized value
proposal
Understanding what the
users want / expect from
each screen
Determine how you can
get from each section
MARKET
RESEARCH
What can we learn
from the competition?
RESEARCH PLAN
Let’s build an app together!
WIREFRAMES
PRODUCTION

61. Let’s build an app together!
Mobile Apps - Getting Your Idea AcrossVenture Cafe
WIREFRAMES
EXECUTE
Taking the user stories and
applying it to a visual form.

62. WIREFRAMES
EXECUTE
PRODUCTION
Mobile Apps - Getting Your Idea AcrossVenture Cafe
CONCEPT
USER STORIES
APP FLOW
Summarized value
proposal
Understanding what the
users want / expect from
each screen
Determine how you can
get from each section
MARKET
RESEARCH
What can we learn
from the competition?
RESEARCH PLAN
Transforming the
user needs into a
visual format
Visual and technical
development begins
Let’s build an app together!

63. Any questions?
ThankYou!
Mobile Apps - Getting Your Idea AcrossVenture Cafe
@guischmitt
You can find me on
TWITTER
BLOG blog.guilhermeschmitt.com