prototyping workshop - wireframes, mockups, prototypes
Post on 01-Jul-2015
912 Views
Preview:
DESCRIPTION
TRANSCRIPT
Application Prototyping Marta Soncodi
marta@latticera.com
What is this presentation about?
We will talk about:● Application development process● Requirements definition● Product lifecycle● Wireframes, mockups, prototypes● Tools
Wireframes, mockups, prototypes...
??
?
Photo source: Google Images
Photo source: Google Images
What we will cover1. Discussion ← You need to know what prototype
means in the context of your projecta. Termsb. Process and development aspects
2. Demo: Balsamiq interactive wireframes
3. Demo: Webflow landing page
4. Walkthrough: Functional prototype vs. production SW
Discussion
Terms - Product vs. Service● Product is “produced”
○ It’s tangible - “make”○ Ex: app; electronic book; a website
● Service is a relationship○ It’s intangible - “do”○ Ex: customer support; SW updates
● Products are often accompanied by services○ 70%+ of company revenue from services, even for OEM○ What about SaaS? → It's both product and service
Terms - Product vs. Service (cont.)● We will use product and service interchangeably
● We will focus on “SW products”, even if data collected
from hw devices, ex. barcode scanner, sensor data
● We will talk about apps, SaaS, graphic artifacts,
functional code prototypes and call them all "products"
Dev Aspects - Lifecycle starting pointBuilt from scratch vs adding/updating functionality● Different challenges● Refer existing documents and functionality● Have initial complexity to start with● Built incrementally● Refer to specific parts and scenarios
○ Vertical prototyping: deep but only parts/subsystems modeled for mature products
Dev Aspects - ScalingConsumer is End-user vs Enterprise or Carrier● Product size
○ Consumer products can be small - thousands LOC○ Carrier SW can be tens of millions LOC
● Process - scope and scale of what you're building determines process, approach and tools
Dev Aspects - ScopeFront-end vs back-end vs full-stack● Object of prototyping is mostly related to front-end design
○ Mockups, wireframes, prototypes are a lot about “looks” and user interaction
○ Back-end is implied and hidden - scenarios and markup can add detail
● Full-stack dev covers all areas of functionality○ May include devops - installation, upgrade, maintenance○ Full-stack developers are good to have but are rare and
expensive!
Dev Aspects - Team structure
The Site Development Teamhttp://webstyleguide.com/wsg3/1-process/2-development-team.html
Large team? One-person?
Dev Aspects - Team size● One-person team can start work directly using a tool● Teams work faster from post-it notes and paper models
○ useful in rapid prototyping○ low on effort, cost and emotional investment
Photo source: Google Images
Me
Dev Aspects - Process typeLifecycle process● Classifications: Waterfall, phased, iterative, incremental, agile● “Fail fast and cheap. Fail often. Fail in a way that doesn’t kill you” -
Seth Godin● Rapid prototyping - build a model and test it; PDCA
Photo source: Google ImagesPhoto source: Google Images
Apps vs SaaS cloud solutions● An app is contained, much easier to model
○ Can be mobile or web○ Web app can be launched in mobile browser
● SaaS means interaction - state management○ Needs DB, data backup/sync○ Interaction and sync issues (race conditions)○ Between users (social)
Ex: Evernote/Kindle across devices
Dev Aspects - App type
Photo source: Google Images
Mockup vs wireframe vs prototype● They all model the product - at different extent, level, cost, effort ● Mockups use graphics, styling guide; look like the end product● Wireframes model layout, behavior and interactions
→ Wireframes and mockups can be worked in parallel● Prototypes build upon mockups and/or wireframes - they are
closer approximations of the product● Functional prototype - aka code prototype; behaves like the real
product but may have limited or faked functionalityNote: A functional prototype may be required for demo/funding
Prototypes - Model type What’s in a prototype? What shall
we build?
Wireframing, Prototyping, Mockuping – What’s the Difference?http://designmodo.com/wireframing-prototyping-mockuping/
Prototypes - Attributes What’s in a prototype? What shall
we build?
Make things visible, bring them to life
A Prototyping approach How will we build it?
1 2 3
4Photo source: Google Images
Photo source: Google Images
Photo source: Google Images
Do not optimize too early!
The Prototyping process
http://www.uxmatters.com/mt/archives/2010/05/sketches-and-wireframes-and-prototypes-oh-my-creating-your-own-magical-wizard-experience.php
Fast Slow
Photo source: Google Images
Lean Startup Methodologyhttp://theleanstartup.com/principles
The question is not "Can this product be built?" Instead,
the questions are "Should this product be built?" and "Can
we build a sustainable business around this set of products
and services?"
But... Should this product be built?To build or not to build?
Context: You have an idea● Want to see it with your own eyes; want to get buy-in or funding
Action*: Proof-of-concept mockup/wireframe/prototypes ● To clarify requirements and explore alternatives → risk reduction ● To build incrementally
○ have working prototype as deliverable at each phase○ recognize when they are throwaway or evolutionary
*Assumption is you have you done your Market Research, looked at what competition has done so far
But... Should this product be built? To build or not to build?
● Customer requirements● Business requirements - business unit● Functional requirements - engineering/development org.● Quality requirements - non-functional or “-ility” requirements
○ availability, usability, reliability, scalability, recoverability, etc.● Security requirements● System requirements - deployment, upgrade, back compatibility...● Performance requirements● Constraints● Etc. - may be grouped and called by other names
Requirement TypesLooks like I need requirements
Old problem, still exists:● “No other part of the work so cripples the resulting system if done
wrong” (Frederick Brooks, 1987).
● “Requirements rework often consumes 30 to 50 percent of your total development cost”
● “Requirements errors can account for 70 to 85 percent of rework cost”
Best book on Sw Requirements !!!Software Requirements, Third Edition, Karl E Wiegers, Joy Beatty
Getting Requirements Right
“MyLib” - Identify Your MVP Source: Spotify dev team
[MVP*] is a concise summary of the smallest possible group of features that will work as a stand-alone product while still solving at least the “core” problem and demonstrating the product’s value.
-Steve Blank
*MVP = Minimum Viable Product
“MyLib” - MVP Vehicles
Decide the “shape” of your MVP
Example: We will build1. Interactive wireframes in Balsamiq2. Landing page in Webflow3. Functional Prototype using HTML/CSS, javascript,
node.js
● There are hundreds of tools and recommendations!● Common ones:
The SW Tools
I mostly use the highlighted ones
● My tools of choice for prototyping:○ Balsamiq → quick and easy to use, interactive, flexible,
inexpensive, has online collab version, lo/hi fidelity, excellent documentation and support
○ Webflow → good if you know know html/css, hi-fi, can publish and run, inexpensive, excellent documentation and support
● Recommendation○ Select a few tools and learn them well○ Corollary: use tools you understand
The SW Tools
Sample Project: Personal library manager ● Goal: Manage physical books in my house● Address these needs:
○ “Books I read in the past 10 years”○ “My Top 3 recommendation from books I read last year”○ “Keep notes on books as I’m reading them”○ “Don’t even know if I have this book...”○ “What are all books by this author and which ones do I have?”
● “BTW, I need something easy to use and which I can run on mobile devices.”
So... what are we building? We shall build it. Code name:“MyLib”
Sample Project: Personal library manager ● Goal: Manage physical books in my house● Address these needs:
○ “Books I read in the past 10 years”○ “My Top 3 recommendation from books I read last year”○ “Keep notes on books as I’m reading them”○ “Don’t even know if I have this book...”○ “What are all books by this author and which ones do I have?”
● “BTW, I need something easy to use and which I can run on my mobile devices.”
“MyLib” - Customer Requirements
Usability Requirements
Customer Statement
Core RequirementsCR.1
CR.2
CR.3
CR.4
CR.5
CR.6
“MyLib” - Ex. Developing Requirements
Value
Roadmap
Future
Core/MVP
Prune the list down to only MVP requirements
“MyLib” - MVP Requirements
Note: CRUD is the acronym for Create, Read, Update, Delete. These are the four basic operations for persistent storage.
● Depends on development methodology. Ex: Requirements Use Cases Scenarios
Test Script Test Case User Tasks
● Use Cases (UC)○ Written○ Diagrams
“MyLib” - Requirements Mapping to Use Cases
Examples of Use Case diagram● UML = Unified Modeling Language
● gliffy.com
● Google diagram tool
“MyLib” - Requirements Mapping to UCs (cont.)
Photo source: Google Images
Photo source: Google Images
Plan page layout and how they address Customer Requirements
“MyLib” - Requirements and App Pages
“MyLib” - Requirements and App Pages (cont.)
“Verifying Requirements Traceability”● cross-reference requirements and app pages
No empty cells here!
“MyLib” - Mapping Req, UCs, App PagesKeep verifying via Use Cases...
Rinse &
Repeat
Balsamiq Interactive Wireframes
Strengths:● Easy to learn● Flexible - templates; links; symbols; export to .pdf● Supports team collaboration
Use for:● Interactive wireframes and mockups
Balsamiq Mockups Actual tool name
Example: Notes for “Now Reading” page1. List books I’m reading - Author, Title2. Add Rating3. Make this the Home page4. Navigation Buttons: Search, Add and My Books
“MyLib” as Balsamiq Wireframes
Now Reading
Author | Title | Rating
Search Add All Books
These can be my PostIt notes
“MyLib” - Balsamiq Use Cases and Scenarios
Use Case Scenario
1. Book Details 1.1 Book Details Updated
2. Add Book2.1 Add Book Canceled
2.2 Add Book Completed
3. Delete Book3.1 Delete Book Canceled
3.2 Delete Book Completed
“MyLib” in Balsamiq - Drag WidgetsDrag widgets on page, ex. image widget in Media section
Widgets can be linked to pages - this provides interactivity
“MyLib” in Balsamiq - Page Linking
“MyLib” in Balsamiq - File Structure● Create project folder to hold your wireframes● Wireframes are .bmml files in project folder
Assets Folder
Media● Store your project media in the “assets” folder
Templates● Store project templates in the “assets” folder
“MyLib” in Balsamiq - Assets folder
“MyLib” in Balsamiq - TemplatesTemplate types● Site templates are .bmml files stored in system folder
○ Ex: My Documents > Balsamiq Mockups > assets○ Accessible in all projects
● Project templates are .bmml files in the “assets” folder○ They are accessible in files in that project
Note: Search for online templates and download/use them for your project. Examples:
https://mockupstogo.mybalsamiq.com/projects/android/grid → Android page https://mockupstogo.mybalsamiq.com/projects/ios/story → iOS page
“MyLib” in Balsamiq - Symbols● Widgets can be grouped● Groups can be named● Symbols are named groups in template files - .bmml
files in the “assets” folder○ They show as individual widgets in the “Projects Assets” or
“Site Assets” sections
“MyLib” in Balsamiq - Symbols
Symbols
Media
“MyLib” in Balsamiq - PDF Export● Several options to generate PDF from all wireframes
currently open - convenient for demos
“MyLib” ArtifactsSample interactive .pdf exports:
1. https://dl.dropboxusercontent.com/u/11778491/mylib%201%20annotated.pdf2. https://dl.dropboxusercontent.com/u/11778491/mylib%202%20annotated%20linkinghints.pdf3. https://dl.dropboxusercontent.com/u/11778491/mylib%203%20linkinghints.pdf4. https://dl.dropboxusercontent.com/u/11778491/mylib%204%20skinwireframe%20icon.pdf5. https://dl.dropboxusercontent.com/u/11778491/mylib%206%20nochrome%20skinwireframe.pdf
Shared online project → feel free to updatehttps://mylib.mybalsamiq.com/projects/mobilib/grid
“MyLib” Balsamiq Demo1. Building: Interactive wireframes
○ Download desktop version at balsamiq.com○ Online version is mybalsamiq.com
2. Presenting: Demo mode and Wireframe export to pdf○ Markup, linking hints - for peer review ○ Wireframe skin, nochrome - for demos○ TeamViewer demo (free version teamviewer.com)
Note: Interactive Balsamiq mockups may be called “prototypes”
Spending ~10 min on this demo
Webflow Landing Page
Strengths: ● Supports responsive design (RWD)
○ Prototypes can be published and presented on any device● Generates “cleaner” HTML/CSS, may be reusable by Developers
Use for:● Front-end product design, Ex. “MyLib”, needs back-end code● Landing Pages to
○ Present and advertise your product○ Check interest○ Increase conversion rates
Web Page Design in Webflow
Drag widgets on page, ex. Section widget
“MyLib” in Webflow - Drag Widgets
Reposition widgets as needed in hierarchy view
“MyLib” in Webflow - Widget Hierarchy
Give widgets class names to style individually(vs default, inherited)
“MyLib” in Webflow - Widget Styling
Download .zip files and work offline, no return thoughIMPORTANT: If you make any manual changes to the generated HTML or CSS, some Webflow components (e.g. forms) may not work properly
“MyLib” in Webflow - Download Code
Check and style for each form factor ● Start with Desktop media query selector, work your way down...
“MyLib” in Webflow - Media Queries
Publish and host on Webflow, get feedback or demo it...
“MyLib” in Webflow - Publish and Test
1. Building: Responsive web pages○ Available as online version webflow.com
2. Presenting: MyLib as web app; a Landing Page○ Tabs: Style, Navigator, Assets○ Page copy and linking○ Symbols○ Media queries and styling○ Code export○ Publish and view on laptop, tablet, phone
“MyLib” Webflow Demo Spending ~10 min on this demo
Walkthrough: Functional prototype vs. production SW
Functional PrototypesNo code demo during walkthrough!
Consider these:● MVP - “minimum” and “viable” are at odds
○ What if “viable” means 1 Dev, 3 mo to MVP? Server-side? DB?● There are numerous programming languages, libraries, frameworks
○ It is a personal choice - consider expertise, funding, risk● Tools exist for front-end development
○ They help avoid writing HTML/CSS directly○ Can writing code be avoided? Are server-side tools coming soon?
Photo source: Google Images
Wireframes, Mockups vs MVP● Phase 1:
○ Use wireframes and mockups for PoC (proof-of-concept) and to get quick value
● Phase 2○ Develop the MVP (Minimum Viable Product)
A Functional Prototype Walkthrough
TMApp - For Toastmasters Secretaries● A business process automation example● Why needed?
1. Reduce pain of entering member names and speech projects2. Avoid typing static, recurrent data - meeting template
● Phases1. Phase 1: Functional prototype2. Phase 2: Production web app - MVP status
Spending ~10 min on this walkthrough
TMApp Phase 1 - LimitationsPhase 1 - Stated requirements met but...● Limited data persistence - using browser local storage to store
meeting data○ Security issue○ Member data stored in app files; updates not persisted
● User authentication limitation○ hardcoded passwords○ 24-hr login expiration; using local auth tokens
● Deployment not scalable○ Initial Member list manually set up; updates not persisted○ Cost and privacy issues for user authentication
Limited Reqs; PoC only
TMApp Phase 2 - Feature IncrementPhase 2 - Resolved limitations; added new features● Robust user authentication - use email link to register● Using MongoDB for data persistence
○ Meeting data also backed up on Amazon S3○ Can run reports and trends
● Responsive design (RWD)○ tested on popular browsers and mobile platforms
● Added emailing minutes option● Can integrate with other platforms, ex: TM International sites/pages
Current status: MVPPlanning more features
Thank you for attending!
About Us
● Latticera specializes in custom business applications● We develop product requirements, prototypes,
production SW
Marta Soncodimarta@latticera.com
top related