Project Nibbler
a.k.a.
The Broker App
The Prototype
The MVP
Apto Next
...and everything else its been called
Why Nibbler?
While Nibbler is arguably Futurama's cutest character, appearances are deceiving. He is the oldest, wisest, and most powerful member of the Planet Express crew. Also, he's cute. REALLY cute.
Why did this start?
- Adoption challenges
- Competitive threat
- Operations costs
- Sales & marketing challenges
Overarching Goal
Own Commercial Real Estate
Plan
- Develop empathy (understand business problems)
- Start small
- Deliver a remarkable experience...
- for a well-defined market...
- solving only the biggest pain points
- Measure & iterate to achieve
- Stickiness
- Virality
- Revenue
- Scale
- Expand functionality
- Expand markets
PRODUCT GOAL #1:
Firm grip on the product and the experience
PRODUCT GOAL #2:
Laser-focused for a complete & delightful experience
PRODUCT GOAL #3:
Product "just works" out of the box
PRODUCT GOAL #4:
Data-driven (KPIs; usage metrics; A/B testing; user testing)
PRODUCT GOAL #5:
Agility through continuous delivery
How do we get there?
- Start with a streamlined experience that offers brokers a reliable system to help them get things done
- Focus on brokers in team-sized organizations (5-250)
- Design with KPIs in mind to evaluate & adapt
- Improve customer segmentation & market understanding
- Build on a modern tech stack
- Open with a web app, explore mobile apps later
- Begin with composite approach with Salesforce
Tech Stack
Front End:
- ES6+ (with Babel)
- Angular 2
- Polymer (Material Design)
- Flexbox (grid)
- Webpack (bundler)
Back End:
- ES5 (Node)
- Express.js
- Angular 2
- Compass (sass)
- jsForce (SF API)
- Passport.js (session)
- Kue.js (job queue)
- Knex.js (orm)
- PostGres (Spatial support)
- Redis (caching/job queue)
Development Goals
Development Goal #1: Leverage modern browser features
Development Goals
Development Goal #2: Fast compile time
(measured in seconds)
Development Goals
Development Goal #3: Extensible codebase
Development Goals
Development Goal #4: Full control of Product
Development Goals
Development Goal #5: APIs are first class citizens
UX DESIGN GOAL #1:
Make the product feel intuitive, easy to understand, and simple to use.
UX DESIGN GOAL #2:
Surprise and delight! Seize the opportunity to delight our users when possible and stand out as one of their favorite daily tools.
UX DESIGN GOAL #3:
Have the best UX of any CRE tool on the market and EAT the competition.
How are we going to get there?
- Use a widely adopted design standard as our design platform to quickly create new designs.
- Create a UX process capable of rapid change based on feedback from multiple sources.
- Include modern UX concepts of motion and animation in our designs.
- Make our UX design process mobile-first.
- Test and validate our design ideas with actual users early and often.
What tools are we going to use?
Google Material Design
Proto.io
Sketch
InVision
Validately
Material Design
Material Design is a widely adopted visual design framework developed by Google. It is designed to create a unified experience across platforms and device sizes and uses physical material as a design metaphor. It is bold, graphic and intentional, and relies heavily on using motion to provide meaning.
Design Feedback and Iterations
The best ideas come from everywhere!
Iterate design concepts quickly and often and leverage feedback throughout the organization (support, engineering, implementations, etc).
Prototyping
Build working prototypes to test navigation, motion, and usability flow on a native device BEFORE writing any code.
User Research
Recruit testers, launch UI tests for features, & analyze results.
Rinse. Lather. Repeat.
Why Angular 2?
"Angular 2 is the next version of Google’s massively popular MV* framework for building complex applications in the browser (and beyond)."*
*http://learnangular2.com/why-angular2
Why Angular 2?
*http://learnangular2.com/why-angular2
"What we found when we started building with Angular 2, though, was something beyond our wildest dreams: a faster, more powerful, cleaner, and easier to use tool than we had with Angular 1. We found a tool that embraced future web standards and brought ES6 to more developers around the world."*
deck
By James Gibson
deck
- 631