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

1. Application Prototyping
Marta Soncodi
marta@latticera.com

2. What is this presentation about?
We will talk about:
● Application development process
● Requirements definition
● Product lifecycle
● Wireframes, mockups, prototypes
● Tools

3. Wireframes, mockups, prototypes...
?
?
?
Photo source: Google Images
Photo source: Google Images

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. Discussion

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. 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. 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. 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. 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. Dev Aspects - Team structure
The Site Development Team
http://webstyleguide.com/wsg3/1-process/2-development-team.html
Large team?
One-person?

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. “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. “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. The SW Tools
● There are hundreds of tools and recommendations!
● Common ones:
I mostly use the
highlighted ones

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. 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. “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. “MyLib” - Ex. Developing Requirements
Core/MVP
Value
Roadmap
Future

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. “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. “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. “MyLib” - Requirements and App Pages
Plan page layout and how they address Customer
Requirements

34. “MyLib” - Requirements and App Pages (cont.)
“Verifying Requirements Traceability”
● cross-reference requirements and app pages
No empty
cells here!

35. “MyLib” - Mapping Req, UCs, App Pages
Keep verifying via Use Cases...
Rinse
&
Repeat

36. Balsamiq Interactive Wireframes

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. “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. “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. “MyLib” in Balsamiq - Drag Widgets
Drag widgets on page, ex. image widget in Media section

41. “MyLib” in Balsamiq - Page Linking
Widgets can be linked to pages - this provides interactivity

42. “MyLib” in Balsamiq - File Structure
● Create project folder to hold your wireframes
● Wireframes are .bmml files in project folder
Assets
Folder

43. “MyLib” in Balsamiq - Assets folder
Media
● Store your project media in the “assets” folder
Templates
● Store project templates in the “assets” folder

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. “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. “MyLib” in Balsamiq - Symbols
Symbols
Media

47. “MyLib” in Balsamiq - PDF Export
● Several options to generate PDF from all wireframes
currently open - convenient for demos

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. “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. Webflow Landing Page

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. “MyLib” in Webflow - Drag Widgets
Drag widgets on page, ex. Section widget

53. “MyLib” in Webflow - Widget Hierarchy
Reposition widgets as needed in hierarchy view

54. “MyLib” in Webflow - Widget Styling
Give widgets class names to style individually
(vs default, inherited)

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. “MyLib” in Webflow - Media Queries
Check and style for each form factor
● Start with Desktop media query selector, work your way down...

57. “MyLib” in Webflow - Publish and Test
Publish and host on Webflow, get feedback or demo it...

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. Walkthrough: Functional
prototype vs. production SW

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. 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. 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. 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. 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. Thank you for attending!

66. About Us
● Latticera specializes in custom business applications
● We develop product requirements, prototypes,
production SW
Marta Soncodi
marta@latticera.com