Prototyping, UI, UX, Security& Personas

A little bit of Everything Nupul Kukreja

Supannika Koolmanojwong26th September, 2014

Agenda• What, Why and How of Prototyping• Types of Prototypes• Tool Demo• User Experience Design• Security Risks for Web Applications• Persona Modeling • Prototyping Workshop

“What” is a Prototype?• An early sample, model, or release of a

product…• …built to test a concept or process…• …or to act as a thing to be replicated or

learned from

“Why” Prototype?• Fail early and inexpensively i.e., risk mitigation• Increased user involvement• Gather more accurate requirements• Better understanding of underlying

technicalities• Resolve conflicts among stakeholders• Validate if building the right system• Explore feasibility i.e., for estimation and

planning

“Process” of Prototyping1. Identify basic requirements2. Develop initial Prototype (whatever that

means )3. Review4. Revise and Enhance Prototype5. Stop. But when?

“Dimensions” of Prototypes• Horizontal:– Mile wide inch deep view of system– Good for:

• Validating requirements/scope• Demo version to get buy in• Develop preliminary estimates for planning

• Vertical:– Complete elaboration of single subsystem or function– Good for:

• Detailed requirements for a given function/feature• Address fundamental problems sooner• Deeper understanding of inner working of system

“Types” of Prototypes• Throwaway• Evolutionary• Incremental• Extreme Prototyping (for web apps)

1. Build static HTML Pages2. Screens programmed with “simulated” backend

services3. Program backend services

Prototyping Risks• Non-technical Stakeholders:– New way of doing things?– Prototype == Finished System– May think everything is doable

• Developers– Over attached to throw-away prototype– Excessive development of prototype– Too involved with “new” prototyping tools

“WHAT” TO PROTOTYPE

1. User Interface• For visualizing and validating requirements• Concept Exploration• Static – Screenshots– Wireframes– PowerPoint

• Mostly throw away

2. Functionality• “Executable” Prototypes• Vertical prototyping common i.e.,

implementing a complete use case/state machine etc.,

• Stubbed services simulating functionality• May or may not evolve to whole system• Includes writing code, quite often• May be quick and dirty• Elucidate complex algorithms

“Which” Requirements to Prototype• Highest risk items– NOT the easiest ones first• Login/Logout!

– Requirements which the team is most under-confident to deliver!

• Use Winbook’s prioritization as guide– High penalty, high business value win conditions– High value MMFs

• Not sure how to do it? Prototype

Tools (GUI Prototyping)• iRise• Balsamiq Mockup• IPlotz • FlairBuilder• MockFlow• Pencil Project• Hot Gloo• Cacoo

DEMO – UI MOCKUPS

USER EXPERIENCEhttp://blog.dashburst.com/infographic/ux-101-what-is-user-experience/

UX/UED: User Experience Design• Focus on usability– Not look-and-feel– Attractiveness can be a part of it

• Benefits for a good user experience design– More customers will be willing to purchase– More customers will resist doing business with

competitors– More customers will recommend you

Great UX/UED

UX/UED Best Design Practices1. Become your users to know how to design

for them.2. Design first to avoid leaving user experience

to chance.3. Trust no one — test to make certain your

users are happy.4. Inject user experience design into your

software development life-cycle (SDLC) process.

SECURITY CONSIDERATIONS

OWASP Top 10 Security Risks1. Injection Flaws: Ex.: SQL Injection2. Broken Authentication/Session Management3. Cross-Site Scripting4. Insecure Direct Object Reference5. Security “mis”-configuration6. Exposing Sensitive Data: Ex.: SSNs etc.,7. Missing Function Level Access Control8. Cross-Site Request Forgery (Man-in-middle)9. Using Components with Known Vulnerabilities10.Un-validated Redirects and Forwards

WINBOOK CASE STUDYhttp://csse.usc.edu:8080/Winbook

PERSONAS

Personas “Why”?• For most teams gathering user stories should

be enough• Persona modeling “may” help elicit additional

stories• Only use this if you anticipate a direct,

tangible benefit to the project

Personas – “What”?• An imaginary representation of a user role• Described in sufficient detail– As if the team “knows” the person– Has a name and lots of background detail

• Examples?

29

Soccer mom - Ann

Basic Demographic: Age: 34Occupation: TeacherHometown: Redmond, WAMarital Status: Married

Attributes-Busy-Focused on family-Social Organizer

DescriptionAnn is married to Jeff. They have two kids, Michael age 9 and Nicholas age 7. Twice during the week and every Saturday they’re on the sidelines at soccer games and practices

User ScenarioJeff has a camcorder, but has taken limited pictures of the kids. Jeff doesn’t get to the weekday practices, and sometimes forgets to charge the camcorder before Saturday games. Ann doesn’t know how to use Jeff’s camcorder. Jeff can’t find the cord to connect the camcorder to the computer, so they watch the videos on the small screen of the camcorder itself.

Goals & Aspirations-Document memories as the kids grow up-Share important moments with the grandparents, aunts, uncles and friends.

Information Sources-Facebook-5 minutes for mom website-Local paper-Grey’s anatomy

http://www.agilemarketing.net/user-stories-agile-marketing-part-2/

30http://www.agilemarketing.net/agile-marketing-user-stories/

31http://becubed.me/2007/06/08/download-an-example-persona-used-in-the-design-of-a-web-application/http://blog.ocad.ca/wordpress/gdes1b26-fw2010-19/2011/02/18/exercise-eight-ocad-student-personas/

32

33http://www.dylanux.com/case-study-1.shtml#.URVOcaV9Jbo

PROTOTYPING WORKSHOPWhat should you prototype?