mobile apps - getting your idea across
TRANSCRIPT
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
The brief history of the little tools for everybody’s pocket computer
Let’s talk about apps
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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
Let’s talk about apps
10 billion apps downloaded from the App store
2011
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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
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
The steps for getting your app idea across
How are we doing this?
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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
Getting from app concept to product
Stages of app development
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Stages of app development
CONCEPT
MARKET RESEARCH
Mobile Apps - Getting Your Idea AcrossVenture Cafe
PLAN EXECUTE
RESEARCH
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
Stages of app development
Mobile Apps - Getting Your Idea AcrossVenture Cafe
PLAN EXECUTE
CONCEPTSummarized value proposal
MARKET RESEARCH
What can we learn from the competition?
RESEARCH
Stages of app development
Mobile Apps - Getting Your Idea AcrossVenture Cafe
EXECUTE
CONCEPTSummarized value proposal
MARKET RESEARCH
What can we learn from the competition?
USER STORIES
APP FLOW
PLANRESEARCH
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
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
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
SAVE THIS FOR LATER
FIND INFORMATION
TELL MY FRIENDS
RESEARCH PLAN EXECUTE
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
Stages of app development
CONCEPT
USER STORIES
APP FLOWSummarized 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
Building an app flow
Mobile Apps - Getting Your Idea AcrossVenture Cafe
App FlowVisual resource that showcases the connections between each app section.
RESEARCH PLAN EXECUTE
Building an app flow
Mobile Apps - Getting Your Idea AcrossVenture Cafe
What does Instagram’s app flow look like?
RESEARCH PLAN EXECUTE
Building an app flow
Mobile Apps - Getting Your Idea AcrossVenture Cafe
PHOTO FEED
CAMERA
EDIT PHOTO
WRITE POST
RESEARCH PLAN EXECUTE
Building an app flow
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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
RESEARCH PLAN EXECUTE
Building an app flow
Mobile Apps - Getting Your Idea AcrossVenture Cafe
PHOTO FEED
CAMERA
EDIT PHOTO
WRITE POST
RESEARCH PLAN EXECUTE
Building an app flow
Mobile Apps - Getting Your Idea AcrossVenture Cafe
PHOTO FEED
PROFILENOTIFICATIONSCAMERAEXPLORE
SETTINGSEDIT PHOTO
WRITE POST
SEARCH
RESEARCH PLAN EXECUTE
Stages of app development
CONCEPT
USER STORIES
APP FLOWSummarized 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
WIREFRAMES
EXECUTE
PRODUCTION
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Stages of app development
CONCEPT
USER STORIES
APP FLOWSummarized 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
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
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
Wireframes
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Can be done anywhere!
Image placeholder Text placeholder
RESEARCH PLAN EXECUTE
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
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
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
WIREFRAMES
EXECUTE
PRODUCTION
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Stages of app development
CONCEPT
USER STORIES
APP FLOWSummarized 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
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
WIREFRAMES
EXECUTE
PRODUCTION
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Stages of app development
CONCEPT
USER STORIES
APP FLOWSummarized 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
Resources to get your idea across
Tools and best practices
Mobile Apps - Getting Your Idea AcrossVenture Cafe
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/
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
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
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 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/
Tools and best practices
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Sketch
Content generator
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/
Tools and best practices
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Icons database
Free for commercial use
Iconmonstr
http://iconmonstr.com/
The best way to learn a skill is by doing it
Let’s build an app together!
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Let’s build an app together!
Mobile Apps - Getting Your Idea AcrossVenture Cafe
Who here wants to share their app idea?
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!
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
EXECUTE
Mobile Apps - Getting Your Idea AcrossVenture Cafe
CONCEPTSummarized 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
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
EXECUTE
Mobile Apps - Getting Your Idea AcrossVenture Cafe
CONCEPT
USER STORIES
APP FLOWSummarized 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
Let’s build an app together!
Mobile Apps - Getting Your Idea AcrossVenture Cafe
APP FLOW
How do you get from section to section?
FIRST SCREEN
?
PLAN
EXECUTE
Mobile Apps - Getting Your Idea AcrossVenture Cafe
CONCEPT
USER STORIES
APP FLOWSummarized 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
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.
WIREFRAMES
EXECUTE
PRODUCTION
Mobile Apps - Getting Your Idea AcrossVenture Cafe
CONCEPT
USER STORIES
APP FLOWSummarized 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!
Any questions?
Thank You!
Mobile Apps - Getting Your Idea AcrossVenture Cafe
@guischmitt
You can find me on
BLOG blog.guilhermeschmitt.com