Phoenix Workgroup Consulting

Protoshare Training Part 1 – Introduction May 2014 John HR Schuster Version 2.1c

11/23/2014 Phoenix Workgroup Consulting 1 Prototyping / Wireframe Toolkits

Considerations • Web based (Not Windows)can be used from any platform (Cloud storage) • Interactive and dynamic prototype that runs like a web app • Any level of resolution including mobile • High level of collaboration for everyone • Inexpensive entry cost and maintenance

11/23/2014 Phoenix Workgroup Consulting 2 Protoshare Introduction • ProtoShare is an easy-to-use, collaborative prototyping tool that helps teams visualize requirements with website wireframes and interactive prototypes while working together in real-time. • Teams include – Customer and shareholders – Architects and designers – Business analysts and trainers • Protoshare has 2 types of users – Developer (2) Can create and edit projects – Reviewers (Unlimited) Who can review and comment • Resource link http://pwc.protoshare.com/launch/static/account-getting-started.html

11/23/2014 Phoenix Workgroup Consulting 3 Two sides of Coin

• Active pages that allow for kicking the tires • Navigation links that work D S • Designer annotations to shareholders • User discussions to resolve issues e h • Any level of resolution possible • a Documentation geared towards users v r e e l o h Designer / p o Architect l e d r • Active pages that allow basic layout and UI s e • Navigation links that indicate work flow • Designer annotations to developers r • User discussions identify critical points • Specific Technical documentation page s • Documentation geared towards developers

11/23/2014 Phoenix Workgroup Consulting 4 Protoshare features • Drag and drop design tool • Templates – Master Pages • Masters – User Web Content • Assets – Images, pictures, etc • Cut and Paste from other projects • Live prototypes – Users access actual prototype on-line • Published prototype – Users access compiled prototype on-line with annotations • Distributed prototype – Users get ZIP with prototype on it, can be unzipped anywhere • Document Prototype – User access PDF/DOC version of prototype with annotations • Screen Capture any page

11/23/2014 Phoenix Workgroup Consulting 5 Protoshare Features • Live and Published prototypes behave just like a web site • High or low resolutions allowed • Navigation, form fill in, scrolling, navigation helping shareholders with look and feel • Annotations are notes from the designer to both the shareholders and developers • Discussions are messages or questions from anyone to everyone about design or UI/UX • Documentation section for every page can hold the technical details of the design

11/23/2014 Phoenix Workgroup Consulting 6 Low Resolution

11/23/2014 Phoenix Workgroup Consulting 7 High Resolution

11/23/2014 Phoenix Workgroup Consulting 8 Presentation Methods • Interactive web based prototype discussion – Shareholders push “Pins” into prototype with questions – Designer responds to questions – All reviewers get to see all discussions – Entire discussion can be included in documentation – Resolve issues as quick as users do the reviews – Very difficult to get shareholders to go interactive • Interactive JAD session review – Designer leads shareholders through screens – Business analyst records notes and update requests – Designer make changes to prototype for next session – All Versions of prototype available from web site (Cloud) – Produce “Word” document of the pages being reviewed with screen shots, designer annotations and user discussions

11/23/2014 Phoenix Workgroup Consulting 9 Getting Started • Protoshare is Software As A Service (SaaS) • You only need a (Real) browser – Not IE8, IE9, IE10, IE11 – Firefox – Chrome (May be problematic) • URL: Pwc.protoshare.com • User ID: • Password: • Each student will get a training area project named by the students first name (Remember to change to your project) • Each Student will get access to a number of other projects for reference and Copy and Paste (Do not change these projects) • During training we will be using the (Measures) project as our Target

11/23/2014 Phoenix Workgroup Consulting 10 Opening curtain

Library Tab Templates Masters Assets

Page(s) Tab Work Buttons Work in Web progress for components this project Properties Actions

Pages area Some pages are siblings. Some pages are Question: What is the current page we are working on? hidden. Answer:

11/23/2014 Phoenix Workgroup Consulting 11 Edit Visibility Pages Area Where can page be seen?

Edit Doco HTML Page Right Click behind the Page web page Properties

New Sub-page Page at same level as this page

New Sibling Page at level below this page

Export Compile Host PDF, DOC, ZIP

11/23/2014 Phoenix Workgroup Consulting 12 Export Export Name Be clever

ZIP File Full version of export

Publish To Protoshare websites

Publish To Word or Adobe PDF

Discussions You should check this

11/23/2014 Phoenix Workgroup Consulting 13 Library

Templates (Master Pages) Assets (Images) Style Sheets (CSS)

Master (Web user control) Import

11/23/2014 Phoenix Workgroup Consulting 14 Show and Tell • Open up various pages, show tabs for pages • Explain Sub pages and Sibling pages • Show most common trap of pages panel and page tabs • Open Library show Templates • Open Library show Masters • Open library show Assets • Create a new template using Assets • Show how to import objects from other projects

11/23/2014 Phoenix Workgroup Consulting 15 Work Buttons - Palette

11/23/2014 Phoenix Workgroup Consulting 16 Work Buttons - Palette

Containers Used for Pop- Up’s and user controls

11/23/2014 Phoenix Workgroup Consulting 17 Show and Tell • Crate a new page in Measures • Rename it Training Page • Hide it from Navigation • Add 1 of each popular control to the page • Add a Page name control to the page • Make page look like a real page • Add annotations to the page • Export the page and view hosted version

11/23/2014 Phoenix Workgroup Consulting 18 Work Buttons - Palette

Control Which type of control Stroke Outside of control, Visibility borders When can you see control

Fill Inside of Actions control What happens when you do something to control Box Additional border

11/23/2014 Phoenix Workgroup Consulting 19 Work Buttons - Palette

Text Color Name Default is light Let project grey name things itself. Change when clarity is needed

CSS File Project has it’s own, you can change it

Z Layer Control what lays over what

11/23/2014 Phoenix Workgroup Consulting 20 Work Buttons - Palette

11/23/2014 Phoenix Workgroup Consulting 21 Work Buttons - Sidebar

Controls Annotations

Rearrange Click and drag

Template

States

States View or Set them for testing

11/23/2014 Phoenix Workgroup Consulting 22 Miscellaneous Controls

Test (T) Annotations Hot Spot Allows test of Click to add Draw a hot a page in new spot region on design annotations the page

Review See prototype like Reviewer will set it

URL Get web link for Live Prototype for this page

Snapshot Appearance Get snapshot Adjust how of page just as select control it is appears

11/23/2014 Phoenix Workgroup Consulting 23 Show and Tell • Change some of the properties of each of the controls on the training page • Use the appearance bar for the text control • Show how to change a text control into an RTF control • Rearrange the controls on the page • Add a container control and add controls inside of it. • Show how menu control is dynamic • Test the page, Run the page • Get a URL for page • Get an image for the page

11/23/2014 Phoenix Workgroup Consulting 24 Questions & Notes

11/23/2014 Phoenix Workgroup Consulting 25