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