fitc toronto 2015: rapid prototyping with front end frameworks
TRANSCRIPT
![Page 2: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/2.jpg)
Isle of Code• Toronto based development;
• Focused on:
• Prototyping;
• Single sourcing mobile /w Ember.js & Phonegap;
• Using Canvas /w Ember; and
• A lot of beacon work lately.
![Page 3: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/3.jpg)
Agenda• A little on prototyping;
• Iters 1-5 of a prototype we built;
![Page 4: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/4.jpg)
Why
![Page 5: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/5.jpg)
Test & iterate on product ideas cheaply
![Page 6: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/6.jpg)
Align teams around simple ideas
![Page 7: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/7.jpg)
Tour new product ideas to stakeholders and potential clients
![Page 8: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/8.jpg)
Expose product weaknesses before starting a long build
![Page 9: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/9.jpg)
Learnings from iterations often lead to small but critical changes in design and feature set
![Page 10: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/10.jpg)
Expose budget issues early
![Page 11: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/11.jpg)
Speed final development
![Page 12: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/12.jpg)
Common Problems
![Page 13: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/13.jpg)
Proposed product does not work as theorized
![Page 14: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/14.jpg)
Stakeholders do not have the interest perceived in the proposed product
![Page 15: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/15.jpg)
The technology solution is harder to achieve than theorized
![Page 16: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/16.jpg)
Not enough data for valid testing of use case / product idea
![Page 17: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/17.jpg)
Technology is slower than imagination
![Page 18: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/18.jpg)
Customers / Users like the product, but do not value it enough to change their habits or buying behaviour
![Page 19: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/19.jpg)
Frameworks• Our goal is to mock the core ideas of an app, and not to be distracted with utility and
hygiene functions (e.g. user registration and login);
• Some characteristics we look for:• Distinction between back-end and front-end concerns;• Ability to mock API responses, preferably without even having a backend (Fixtures);
• Avoid considering utility as long as possible. Ember Data uses RESTful conventions & has Fixtures;
• Components - we’ll be throwing things around;• As few dependencies as possible (moving fast); • As multi platform as possible;• Simply having a framework matters, because convention matters.
![Page 20: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/20.jpg)
3 Main Steps1. Ideation2. Low-fidelity Wireframes3. Software Prototype Iterations
![Page 21: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/21.jpg)
Iterating from here• Two types of products:
• idea and use case is very well known upfront (e.g. specific internal tool);
• idea has no product/market fit.
• When the idea is known, we generally prefer to spend longer coming up with high fidelity wireframes before programming.
• When the idea is less known, we find it easier to sketch with technology. Good tech evolves from many iterations, and longer windows of poking it with a stick.
• e.g. the first iteration of Unread was actually for desktop, before we realized this was a bad idea.
![Page 22: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/22.jpg)
unread
![Page 23: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/23.jpg)
unread thesis• An app which parsed our email activity, and reminded us
of:
• People we forgot to respond to in the past week, or who forgot to respond to us; and
• People we had not spoken to for > 3 months.
• We thought this would be a good idea.
• We’d already built email parsers before, so we had no concerns about whether the backend was possible/feasible.
![Page 24: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/24.jpg)
Low Fi Frames● Ensure global product understanding;
● Provide developers with a simple representation of the product and its goals, without conflicting statements
● An early attempt to expose any critical weaknesses
![Page 25: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/25.jpg)
Iter 1 (1-2 days)• Main init (routes, Contact model, Fixtures);
• We were imagining a drag and drop interface, so decided to focus here;
• We realized there were 3 main actions (vs. 2 - we added hide);
• Not worried about too much else.
![Page 26: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/26.jpg)
The very first version
![Page 27: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/27.jpg)
Iter 2 - real data!• Iter 1 was not pretty but mostly worked. We dropped
drag and drop in favour of the fast contact buttons;
• In Iter 2, we could have started making the app look better, but is this even a good idea?
• Live data is good to expose common ui/ux issues;
• Fake data lets you keep cheating;
• Showing fake data today for privacy.
![Page 28: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/28.jpg)
![Page 29: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/29.jpg)
![Page 30: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/30.jpg)
Iter 3• With new animations, unread was closer to what we wanted, so:
• Add multiple email accounts;
• Fix nav bar;
• Add actual user accounts!
• We discovered contacts.index was a better way to view, especially once many email accounts were involved.
• And on the back end, tried out graph databases / optimized SQL
![Page 31: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/31.jpg)
![Page 32: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/32.jpg)
Iter 4: Improve Index• Focusing on contacts.index was the right idea;
• Everything works and is stable. Make it look like a ‘mostly finished prototype’;
• Add shortcut actions to the index with gestures, e.g. swipe left and right;
• Pay back technical debt, e.g.
• ListView
• Bounce Scroll
• Cut a release.
![Page 33: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/33.jpg)
![Page 34: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/34.jpg)
Iter 5: Drag was slow• Choppy and deal breaking. This is common when
working with DOM;
• Need to move to Canvas;
• ~16ms target for animations, DOM can’t do this;
• Conceptually unread was stable, so invest the extra time.
![Page 35: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/35.jpg)
![Page 36: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/36.jpg)
Iter 6: Add Paint
![Page 37: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/37.jpg)
![Page 38: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/38.jpg)
After 6 iterations• What is left?
• Finish app/buttons
• Production-ize backend
• Actual designer
![Page 39: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/39.jpg)
Building better products by forcing evolution on iterations, vs. detached documents
![Page 40: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/40.jpg)
Many initial assumptions were wrong (e.g. Tinder style vs. index)
![Page 41: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/41.jpg)
A lot of hurdles discovered and cleared up front (e.g. multi email scenarios)
![Page 42: FITC Toronto 2015: Rapid Prototyping with Front End Frameworks](https://reader030.vdocuments.mx/reader030/viewer/2022032504/55c446fdbb61eb7d1c8b4655/html5/thumbnails/42.jpg)
We gradually built more performant technology as needed (e.g. Swipe), and didn’t need to throw much out (e.g. optimizing drag and drop)