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

  1. Develop empathy (understand business problems)
  2. Start small
    1. Deliver a remarkable experience...
    2. for a well-defined market...
    3. solving only the biggest pain points
  3. Measure & iterate to achieve
    1. Stickiness
    2. Virality
    3. Revenue
    4. Scale
  4. Expand functionality
  5. 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?

  1. Use a widely adopted design standard as our design platform to quickly create new designs.
  2. Create a UX process capable of rapid change based on feedback from multiple sources.
  3. Include modern UX concepts of motion and animation in our designs.
  4. Make our UX design process mobile-first.
  5. 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