SlideShare a Scribd company logo
1 of 10
Download to read offline
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 processing
     offshore: (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 point
  prototype becomes an application

> UX, biz logic (incl. complex interactions) and back-end services
  are shaped, validated and verified
Prototyping: Big Picture




                                               feedback
                                                          application


          high fidelity
interactive prototype


                          clickable mock-up
                                   rough sketch
                                               concept
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

More Related Content

Similar to AngularJS NYC Meetup: UX Prototyping and Business Development with AngularJS

Современная архитектура Android-приложений - Archetype / Степан Гончаров (90 ...
Современная архитектура Android-приложений - Archetype / Степан Гончаров (90 ...Современная архитектура Android-приложений - Archetype / Степан Гончаров (90 ...
Современная архитектура Android-приложений - Archetype / Степан Гончаров (90 ...Ontico
 
Kicking Up the Dust with Node JS
Kicking Up the Dust with Node JSKicking Up the Dust with Node JS
Kicking Up the Dust with Node JSBill Scott
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypestec
 
About wei
About weiAbout wei
About weiWei Wei
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDave Malouf
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsclimboid
 
User Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyUser Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyJoshua Randall
 
Boas e Más Práticas para Agile UX
Boas e Más Práticas para Agile UXBoas e Más Práticas para Agile UX
Boas e Más Práticas para Agile UXTiago Silva da Silva
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to conceptsAbhishek Sur
 
Agile and effective project management of for-by wikis
Agile and effective project management of for-by wikisAgile and effective project management of for-by wikis
Agile and effective project management of for-by wikisJesse Wang
 
When Opposites Attract: Agile and UX
When Opposites Attract: Agile and UXWhen Opposites Attract: Agile and UX
When Opposites Attract: Agile and UXtipik
 

Similar to AngularJS NYC Meetup: UX Prototyping and Business Development with AngularJS (20)

Современная архитектура Android-приложений - Archetype / Степан Гончаров (90 ...
Современная архитектура Android-приложений - Archetype / Степан Гончаров (90 ...Современная архитектура Android-приложений - Archetype / Степан Гончаров (90 ...
Современная архитектура Android-приложений - Archetype / Степан Гончаров (90 ...
 
Kicking Up the Dust with Node JS
Kicking Up the Dust with Node JSKicking Up the Dust with Node JS
Kicking Up the Dust with Node JS
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 
Midhun new
Midhun newMidhun new
Midhun new
 
About wei
About weiAbout wei
About wei
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAs
 
Neha Bhandari CV
Neha Bhandari CVNeha Bhandari CV
Neha Bhandari CV
 
Naga_CV
Naga_CVNaga_CV
Naga_CV
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
 
User Experience: Why and How
User Experience: Why and HowUser Experience: Why and How
User Experience: Why and How
 
User Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyUser Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the Ugly
 
Boas e Más Práticas para Agile UX
Boas e Más Práticas para Agile UXBoas e Más Práticas para Agile UX
Boas e Más Práticas para Agile UX
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
Tasvir_UI Developer
Tasvir_UI DeveloperTasvir_UI Developer
Tasvir_UI Developer
 
Agile and effective project management of for-by wikis
Agile and effective project management of for-by wikisAgile and effective project management of for-by wikis
Agile and effective project management of for-by wikis
 
Angular JS - UI Development Online Training
Angular JS - UI Development Online TrainingAngular JS - UI Development Online Training
Angular JS - UI Development Online Training
 
Your Brain on Responsive Design
Your Brain on Responsive DesignYour Brain on Responsive Design
Your Brain on Responsive Design
 
DhanalakshmiPanjamExp
DhanalakshmiPanjamExpDhanalakshmiPanjamExp
DhanalakshmiPanjamExp
 
When Opposites Attract: Agile and UX
When Opposites Attract: Agile and UXWhen Opposites Attract: Agile and UX
When Opposites Attract: Agile and UX
 
Saheel_Babu _KT
Saheel_Babu _KTSaheel_Babu _KT
Saheel_Babu _KT
 

AngularJS NYC Meetup: UX Prototyping and Business Development with AngularJS

  • 1. AngularJS NYC Meetup: UX Prototyping and Business Development with AngularJS Siarhei Mardovich
  • 2. 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
  • 3. 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 processing offshore: (AngularJS powered) prototyping
  • 4. 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
  • 5. 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)
  • 6. 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
  • 7. Prototyping: Application > fidelity of the interactive prototype grows until at some point prototype becomes an application > UX, biz logic (incl. complex interactions) and back-end services are shaped, validated and verified
  • 8. Prototyping: Big Picture feedback application high fidelity interactive prototype clickable mock-up rough sketch concept
  • 9. 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
  • 10. 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