AngularJS NYC Meetup: UX Prototyping and Business Development with AngularJS

Siarhei Mardovich

AngularJS was initially created for Designers

effort of making maintainable biz logic layer of prototype is significantly minimized

designers and IAs communicate (and test) their concepts with interactive prototypes supporting both UXD and biz dev

>

>

Prototyping Culture

milestones: UX team adopts front-end devs, “Skip Photoshop”, DHTML (nuances of interaction matters), modular design

24 hours service, 2 teams: onshore: strategy, initial input, show and tell, feedback

gathering and processingoffshore: (AngularJS powered) prototyping

>

>

Prototyping: Conceptual Phase

visual thinking techniques (graphic facilitation, gamestorming) to grab main ideas about structure and key interactions

>

scenarios, personas, concept maps, user flows, etc. are started in parallel with our main deliverable – interactive prototype

>

Prototyping: Clickable Mockup

made overnight (AngularJS seed + HTML5 Boilerplate; jQuery UI, Bootstrap by Tweeter, BBC GEL, etc. for widgets)

AngularJS native features like templating, re-usable components (complex DOM), filtering, form validation, etc. work as time savers

>

>

AngularJS improves maintainability of prototypes(scopes, directives)

>

Prototyping: High Fidelity Interactive Prototype

JSON files mimic DB

mash-up architecture(different parts of the prototype have different level of fidelity)

>

>

prototyping becomes investment into fidelity>

JSON

Prototyping: Application

fidelity of the interactive prototype grows until at some pointprototype becomes an application

UX, biz logic (incl. complex interactions) and back-end services are shaped, validated and verified

>

>

Prototyping: Big Picture

concept

rough sketch

clickable mock-up

high fidelity

interactive prototype

feed

back

application

AngularJS for Prototyping Tips & Tricks

running test scenarios to communicate complex biz logic to super busy stakeholders

one common maintainable deliverable: no zones of responsibility and logistic gaps

>

>

Q&A

Special thanks to Nikolai Chesalin, Stanislau Sarosek,Yauheni Zara, Denis Shamgin, Pavel Halavan, Dmytro Darichev, Pavlo Velykyi

Siarhei Mardovich, siarhei.mardovich@gmail.com, @mardovich

>

>