Prototyping Workshop - Wireframes, Mockups, Prototypes
5 likes3,625 views
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
![“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](https://image.slidesharecdn.com/prototypingworkshopslideshare-4oct14-141015174314-conversion-gate01/85/Prototyping-Workshop-Wireframes-Mockups-Prototypes-23-320.jpg)
More Related Content
Similar to Prototyping Workshop - Wireframes, Mockups, Prototypes (20)
More from Marta Soncodi (7)
Recently uploaded (20)
Prototyping Workshop - Wireframes, Mockups, Prototypes
- 1. Application Prototyping Marta Soncodi [email protected]
- 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
- 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”
- 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 [email protected]