Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Application Prototyping 
Marta Soncodi 
marta@latticera.com
What is this presentation about? 
We will talk about: 
● Application development process 
● Requirements definition 
● Pro...
Wireframes, mockups, prototypes... 
? 
? 
? 
Photo source: Google Images 
Photo source: Google Images
What we will cover 
1. Discussion ← You need to know what prototype 
means in the context of your project 
a. Terms 
b. Pr...
Discussion
Terms - Product vs. Service 
● Product is “produced” 
○ It’s tangible - “make” 
○ Ex: app; electronic book; a website 
● S...
Terms - Product vs. Service (cont.) 
● We will use product and service interchangeably 
● We will focus on “SW products”, ...
Dev Aspects - Lifecycle starting point 
Built from scratch vs adding/updating functionality 
● Different challenges 
● Ref...
Dev Aspects - Scaling 
Consumer is End-user vs Enterprise or Carrier 
● Product size 
○ Consumer products can be small - t...
Dev Aspects - Scope 
Front-end vs back-end vs full-stack 
● Object of prototyping is mostly related to front-end design 
○...
Dev Aspects - Team structure 
The Site Development Team 
http://webstyleguide.com/wsg3/1-process/2-development-team.html 
...
Dev Aspects - Team size 
● One-person team can start work directly using a tool 
● Teams work faster from post-it notes an...
Dev Aspects - Process type 
Lifecycle process 
● Classifications: Waterfall, phased, iterative, incremental, agile 
● “Fai...
Dev Aspects - App type 
Apps vs SaaS cloud solutions 
● An app is contained, much easier to model 
○ Can be mobile or web ...
Prototypes - Model type What’s in a 
prototype? What shall 
Mockup vs wireframe vs prototype 
● They all model the product...
Prototypes - Attributes What’s in a 
prototype? What shall 
we build? 
Wireframing, Prototyping, Mockuping – What’s the Di...
A Prototyping approach How will we 
Make things visible, bring them to life 
build it? 
1 2 3 
4 Photo source: Google Imag...
Do not optimize 
too early! 
The Prototyping process 
Fast Slow 
http://www.uxmatters.com/mt/archives/2010/05/sketches-and...
But... Should this product be built? 
Lean Startup Methodology 
To build or 
not to build? 
http://theleanstartup.com/prin...
But... Should this product be built? To build or 
not to build? 
Context: You have an idea 
● Want to see it with your own...
Requirement Types Looks like I need 
requirements 
● Customer requirements 
● Business requirements - business unit 
● Fun...
Getting Requirements Right 
Old problem, still exists: 
● “No other part of the work so cripples the resulting system if d...
“MyLib” - Identify Your MVP Source: Spotify 
dev team 
[MVP*] is a concise summary of 
the smallest possible group of 
fea...
“MyLib” - MVP Vehicles 
Decide the “shape” of your MVP 
Example: We will build 
1. Interactive wireframes in Balsamiq 
2. ...
The SW Tools 
● There are hundreds of tools and recommendations! 
● Common ones: 
I mostly use the 
highlighted ones
The SW Tools 
● My tools of choice for prototyping: 
○ Balsamiq → quick and easy to use, interactive, flexible, 
inexpensi...
So... what are we building? We shall build it. 
Sample Project: Personal library manager 
● Goal: Manage physical books in...
“MyLib” - Customer Requirements 
Sample Project: Personal library manager 
● Goal: Manage physical books in my house 
● Ad...
“MyLib” - Ex. Developing Requirements 
Core/MVP 
Value 
Roadmap 
Future
“MyLib” - MVP Requirements 
Prune the list down to only MVP requirements 
Note: CRUD is the acronym for Create, Read, Upda...
“MyLib” - Requirements Mapping to Use Cases 
● Depends on development methodology. Ex: 
Requirements Use Cases Scenarios 
...
“MyLib” - Requirements Mapping to UCs (cont.) 
Examples of Use Case diagram 
● UML = Unified Modeling Language 
● gliffy.c...
“MyLib” - Requirements and App Pages 
Plan page layout and how they address Customer 
Requirements
“MyLib” - Requirements and App Pages (cont.) 
“Verifying Requirements Traceability” 
● cross-reference requirements and ap...
“MyLib” - Mapping Req, UCs, App Pages 
Keep verifying via Use Cases... 
Rinse 
& 
Repeat
Balsamiq Interactive Wireframes
Balsamiq Mockups Actual tool name 
Strengths: 
● Easy to learn 
● Flexible - templates; links; symbols; export to .pdf 
● ...
“MyLib” as Balsamiq Wireframes 
Example: Notes for “Now Reading” page 
1. List books I’m reading - Author, Title 
2. Add R...
“MyLib” - Balsamiq Use Cases and Scenarios 
Use Case Scenario 
1. Book Details 1.1 Book Details Updated 
2. Add Book 
2.1 ...
“MyLib” in Balsamiq - Drag Widgets 
Drag widgets on page, ex. image widget in Media section
“MyLib” in Balsamiq - Page Linking 
Widgets can be linked to pages - this provides interactivity
“MyLib” in Balsamiq - File Structure 
● Create project folder to hold your wireframes 
● Wireframes are .bmml files in pro...
“MyLib” in Balsamiq - Assets folder 
Media 
● Store your project media in the “assets” folder 
Templates 
● Store project ...
“MyLib” in Balsamiq - Templates 
Template types 
● Site templates are .bmml files stored in system folder 
○ Ex: My Docume...
“MyLib” in Balsamiq - Symbols 
● Widgets can be grouped 
● Groups can be named 
● Symbols are named groups in template fil...
“MyLib” in Balsamiq - Symbols 
Symbols 
Media
“MyLib” in Balsamiq - PDF Export 
● Several options to generate PDF from all wireframes 
currently open - convenient for d...
“MyLib” Artifacts 
Sample interactive .pdf exports: 
1. https://dl.dropboxusercontent.com/u/11778491/mylib%201%20annotated...
“MyLib” Balsamiq Demo 
1. Building: Interactive wireframes 
Spending ~10 min on this demo 
○ Download desktop version at b...
Webflow Landing Page
Web Page Design in Webflow 
Strengths: 
● Supports responsive design (RWD) 
○ Prototypes can be published and presented on...
“MyLib” in Webflow - Drag Widgets 
Drag widgets on page, ex. Section widget
“MyLib” in Webflow - Widget Hierarchy 
Reposition widgets as needed in hierarchy view
“MyLib” in Webflow - Widget Styling 
Give widgets class names to style individually 
(vs default, inherited)
“MyLib” in Webflow - Download Code 
Download .zip files and work offline, no return though 
IMPORTANT: If you make any man...
“MyLib” in Webflow - Media Queries 
Check and style for each form factor 
● Start with Desktop media query selector, work ...
“MyLib” in Webflow - Publish and Test 
Publish and host on Webflow, get feedback or demo it...
“MyLib” Webflow Demo Spending ~10 min on this demo 
1. Building: Responsive web pages 
○ Available as online version webfl...
Walkthrough: Functional 
prototype vs. production SW
Functional Prototypes 
No code demo during walkthrough! 
Consider these: 
● MVP - “minimum” and “viable” are at odds 
Phot...
Wireframes, Mockups vs MVP 
● Phase 1: 
○ Use wireframes and mockups for PoC (proof-of-concept) 
and to get quick value 
●...
A Functional Prototype Walkthrough 
Spending ~10 min on this walkthrough 
TMApp - For Toastmasters Secretaries 
● A busine...
TMApp Phase 1 - Limitations 
Phase 1 - Stated requirements met but... 
● Limited data persistence - using browser local st...
TMApp Phase 2 - Feature Increment 
Phase 2 - Resolved limitations; added new features 
● Robust user authentication - use ...
Thank you for attending!
About Us 
● Latticera specializes in custom business applications 
● We develop product requirements, prototypes, 
product...
Upcoming SlideShare
Loading in …5
×

Prototyping Workshop - Wireframes, Mockups, Prototypes

2,774 views

Published on

Slides for application prototyping workshop on web and mobile application design.
We discussed
- product and project requirements definition
- rationale for wireframes, mockups, prototypes
- functional prototypes vs production sw
- tools: Balsamiq, myBalsamiq, Webflow
- MVP (minimum viable product) implementation in Javascript, HTML/CSS on node.js

Published in: Design
  • Be the first to comment

Prototyping Workshop - Wireframes, Mockups, Prototypes

  1. 1. Application Prototyping Marta Soncodi marta@latticera.com
  2. 2. What is this presentation about? We will talk about: ● Application development process ● Requirements definition ● Product lifecycle ● Wireframes, mockups, prototypes ● Tools
  3. 3. Wireframes, mockups, prototypes... ? ? ? Photo source: Google Images Photo source: Google Images
  4. 4. What we will cover 1. Discussion ← You need to know what prototype means in the context of your project a. Terms b. Process and development aspects 2. Demo: Balsamiq interactive wireframes 3. Demo: Webflow landing page 4. Walkthrough: Functional prototype vs. production SW
  5. 5. Discussion
  6. 6. 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
  7. 7. 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"
  8. 8. Dev Aspects - Lifecycle starting point Built 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
  9. 9. Dev Aspects - Scaling Consumer 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
  10. 10. Dev Aspects - Scope Front-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!
  11. 11. Dev Aspects - Team structure The Site Development Team http://webstyleguide.com/wsg3/1-process/2-development-team.html Large team? One-person?
  12. 12. 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
  13. 13. Dev Aspects - Process type Lifecycle 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 Images Photo source: Google Images
  14. 14. Dev Aspects - App type 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 Photo source: Google Images
  15. 15. Prototypes - Model type What’s in a prototype? What shall 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 functionality Note: A functional prototype may be required for demo/funding we build?
  16. 16. Prototypes - Attributes What’s in a prototype? What shall we build? Wireframing, Prototyping, Mockuping – What’s the Difference? http://designmodo.com/wireframing-prototyping-mockuping/
  17. 17. A Prototyping approach How will we Make things visible, bring them to life build it? 1 2 3 4 Photo source: Google Images Photo source: Google Images Photo source: Google Images
  18. 18. Do not optimize too early! The Prototyping process Fast Slow http://www.uxmatters.com/mt/archives/2010/05/sketches-and-wireframes-and-prototypes-oh-my-creating-your-own-magical-wizard-experience.php Photo source: Google Images
  19. 19. But... Should this product be built? Lean Startup Methodology To build or not to build? http://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?"
  20. 20. 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
  21. 21. Requirement Types Looks like I need requirements ● 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
  22. 22. Getting Requirements Right 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
  23. 23. “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
  24. 24. “MyLib” - MVP Vehicles Decide the “shape” of your MVP Example: We will build 1. Interactive wireframes in Balsamiq 2. Landing page in Webflow 3. Functional Prototype using HTML/CSS, javascript, node.js
  25. 25. The SW Tools ● There are hundreds of tools and recommendations! ● Common ones: I mostly use the highlighted ones
  26. 26. The SW Tools ● 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
  27. 27. So... what are we building? We shall build it. 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.” Code name:“MyLib”
  28. 28. “MyLib” - Customer Requirements Sample Project: Personal library manager ● Goal: Manage physical books in my house ● Address these needs: Customer Statement Core Requirements ○ “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.” Usability Requirements CR.1 CR.2 CR.3 CR.4 CR.5 CR.6
  29. 29. “MyLib” - Ex. Developing Requirements Core/MVP Value Roadmap Future
  30. 30. “MyLib” - MVP Requirements Prune the list down to only MVP requirements Note: CRUD is the acronym for Create, Read, Update, Delete. These are the four basic operations for persistent storage.
  31. 31. “MyLib” - Requirements Mapping to Use Cases ● Depends on development methodology. Ex: Requirements Use Cases Scenarios Test Script Test Case User Tasks ● Use Cases (UC) ○ Written ○ Diagrams
  32. 32. “MyLib” - Requirements Mapping to UCs (cont.) Examples of Use Case diagram ● UML = Unified Modeling Language ● gliffy.com ● Google diagram tool Photo source: Google Images Photo source: Google Images
  33. 33. “MyLib” - Requirements and App Pages Plan page layout and how they address Customer Requirements
  34. 34. “MyLib” - Requirements and App Pages (cont.) “Verifying Requirements Traceability” ● cross-reference requirements and app pages No empty cells here!
  35. 35. “MyLib” - Mapping Req, UCs, App Pages Keep verifying via Use Cases... Rinse & Repeat
  36. 36. Balsamiq Interactive Wireframes
  37. 37. Balsamiq Mockups Actual tool name Strengths: ● Easy to learn ● Flexible - templates; links; symbols; export to .pdf ● Supports team collaboration Use for: ● Interactive wireframes and mockups
  38. 38. “MyLib” as Balsamiq Wireframes Example: Notes for “Now Reading” page 1. List books I’m reading - Author, Title 2. Add Rating 3. Make this the Home page 4. Navigation Buttons: Search, Add and My Books Now Reading Author | Title | Rating Search Add All Books These can be my PostIt notes
  39. 39. “MyLib” - Balsamiq Use Cases and Scenarios Use Case Scenario 1. Book Details 1.1 Book Details Updated 2. Add Book 2.1 Add Book Canceled 2.2 Add Book Completed 3. Delete Book 3.1 Delete Book Canceled 3.2 Delete Book Completed
  40. 40. “MyLib” in Balsamiq - Drag Widgets Drag widgets on page, ex. image widget in Media section
  41. 41. “MyLib” in Balsamiq - Page Linking Widgets can be linked to pages - this provides interactivity
  42. 42. “MyLib” in Balsamiq - File Structure ● Create project folder to hold your wireframes ● Wireframes are .bmml files in project folder Assets Folder
  43. 43. “MyLib” in Balsamiq - Assets folder Media ● Store your project media in the “assets” folder Templates ● Store project templates in the “assets” folder
  44. 44. “MyLib” in Balsamiq - Templates Template 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
  45. 45. “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
  46. 46. “MyLib” in Balsamiq - Symbols Symbols Media
  47. 47. “MyLib” in Balsamiq - PDF Export ● Several options to generate PDF from all wireframes currently open - convenient for demos
  48. 48. “MyLib” Artifacts Sample interactive .pdf exports: 1. https://dl.dropboxusercontent.com/u/11778491/mylib%201%20annotated.pdf 2. https://dl.dropboxusercontent.com/u/11778491/mylib%202%20annotated%20linkinghints.pdf 3. https://dl.dropboxusercontent.com/u/11778491/mylib%203%20linkinghints.pdf 4. https://dl.dropboxusercontent.com/u/11778491/mylib%204%20skinwireframe%20icon.pdf 5. https://dl.dropboxusercontent.com/u/11778491/mylib%206%20nochrome%20skinwireframe.pdf Shared online project → feel free to update https://mylib.mybalsamiq.com/projects/mobilib/grid
  49. 49. “MyLib” Balsamiq Demo 1. Building: Interactive wireframes Spending ~10 min on this demo ○ 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”
  50. 50. Webflow Landing Page
  51. 51. Web Page Design in Webflow 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
  52. 52. “MyLib” in Webflow - Drag Widgets Drag widgets on page, ex. Section widget
  53. 53. “MyLib” in Webflow - Widget Hierarchy Reposition widgets as needed in hierarchy view
  54. 54. “MyLib” in Webflow - Widget Styling Give widgets class names to style individually (vs default, inherited)
  55. 55. “MyLib” in Webflow - Download Code Download .zip files and work offline, no return though IMPORTANT: If you make any manual changes to the generated HTML or CSS, some Webflow components (e.g. forms) may not work properly
  56. 56. “MyLib” in Webflow - Media Queries Check and style for each form factor ● Start with Desktop media query selector, work your way down...
  57. 57. “MyLib” in Webflow - Publish and Test Publish and host on Webflow, get feedback or demo it...
  58. 58. “MyLib” Webflow Demo Spending ~10 min on this demo 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
  59. 59. Walkthrough: Functional prototype vs. production SW
  60. 60. Functional Prototypes No code demo during walkthrough! Consider these: ● MVP - “minimum” and “viable” are at odds Photo source: Google Images ○ 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?
  61. 61. 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)
  62. 62. A Functional Prototype Walkthrough Spending ~10 min on this walkthrough TMApp - For Toastmasters Secretaries ● A business process automation example ● Why needed? 1. Reduce pain of entering member names and speech projects 2. Avoid typing static, recurrent data - meeting template ● Phases 1. Phase 1: Functional prototype 2. Phase 2: Production web app - MVP status
  63. 63. TMApp Phase 1 - Limitations Phase 1 - Stated requirements met but... ● Limited data persistence - using browser local storage to store Limited Reqs; PoC only 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
  64. 64. TMApp Phase 2 - Feature Increment Phase 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: MVP Planning more features
  65. 65. Thank you for attending!
  66. 66. About Us ● Latticera specializes in custom business applications ● We develop product requirements, prototypes, production SW Marta Soncodi marta@latticera.com

×