Skip to content

Sample landing page & lead form for SolarCity - Tesla customers to indicate interest in renewable energy. Built with Angular, Node/ Express, MongoDB, CSS

Notifications You must be signed in to change notification settings

henrybv/scty-tesla-lead-form

Repository files navigation

Note:

This is a sample Landing Page / Referral Marketing portal for SolarCity Ambassadors to have their friends, neighbors, coworkers, etc. indicate an interest in solar energy. I had the opportunity to work with Jon Carson, formerly of the White House, on our Ambassador Marketing program, now at 150,000+ Ambassadors strong.

👉 👉 👉 GO HERE to see the most current iteration of the Landing Page/ Ambassador portal (built with Angular/ React, Node, Express, JavaScript, MongoDB)

Reach out at [email protected] or tweet me if you have any questions or if you've found this helpful 😀


SolarCity Lead Capture Form

To start the application

  1. Install node packages: npm install
  2. Start up server and data processes: npm start and mongod
  3. View in browser at http://localhost:1337

Full-stack Application

Sample landing page/ lead form for potential customers to indicate interest in solar energy.

I built a Full-stack Application, using MEAN Stack (MongoDB, Express, Angular, Node.js), a framework I have worked with extensively the past year.

Back-end

  1. Express + middleware functions to provide abstract layer on top of NodeJS

  2. MongoDB: Database set up that allows me to easily and expressively model user info my application.

Having the same basic data model in my code & database dramatically simplifies the task of application development, and eliminates the layers of complex mapping code otherwise required. MongoDB also makes it easy to evolve the structure of form data over time.

Models and Routes are set up accordingly in server/app and db/models.

Front-end

  1. Bootstrap: quick, easy set up, mobile responsive

  2. Angular:

Having built many MEAN stack apps for web and mobile, I chose AngularJS. Angular's two-way data binding nature is perfect for building our Lead Form.

User Controller + Factory were created as separate JS files (in browser/js/user) to make code easier to read, scale & maintain in the future.

  1. Slideshow Feature:

Many custom CSS stylings here. A visually attractive gallery of images is important to help customers visualize their home with solar. I included solar home pictures from 6 states.

  1. User Lead Form itself:

ng-model allows data-binding to different fields in lead form (leadToSubmit). Upon successful submission, Lead and Form are both reset.

Other technologies

  1. Chalk, Morgan, Nodemon, serve-favicon, body-parser etc. -

I strive to make this as close to a production app as possible.

  1. Babel, ES6. Bluebird, because ES 6 is fun and also I believe in clean code (hence promises).

Extra features to add

  1. Salesforce integration
  2. Sendgrid email integration (Easy to implement. An email upon successful submission -> Create sense of excitement for customers)
  3. Near Me map: of neighbors with solar -> Highlight growth rate & create sense of urgency.
  4. Add Referrer Model > New referral lead is tied to their Referrer.
  5. More form validation & helper messages.
  6. Write tests.

SolarCity/ Tesla Ambassador Program

Led by Jon Carson, formerly of the White House, the SolarCity Ambassador Program taps into the power of communities, neighborhoods and organizations to galvanize the #GoSolar movement.

Referral is a mindset. By mentioning Solar Ambassador program early in Lead Form, our energy consultants build trust with customers. In my experience, referred customers will also more likely refer others in the future– further maximizing virality.

Because of my affinity with the Ambassador team, I also helped lead several local pilot programs, including Solar Open House and Solar Party.

In 2015, I helped Katie DeWitt, Director of Digital Products at SolarCity/ Tesla and the product team with Dynamo Sales pilot proposal.

Related projects & reference materials

ComicPowWow

App Demo | Project Github

  • Developed mobile app that allows users to create comic books with friends in real-time, using camera phone or photo library.
  • App built using MEAN stack, Ionic, Canvas, Firebase, HammerJS and CamanJS.
  • Solely responsible for User Profile page, Comic Avatar feature, and creating custom borders & stickers.

Hipflix

Project Github

  • Developed retro subscription-based VHS eCommerce store built with MEAN stack & Twitter Bootstrap
  • Responsible for User Reviews page, movie trailers, integrating SendGrid and Stripe third-party APIs

Recommendation Engine

Link to recorded Tech Talk

Between 2011 and 2012, recommendations account for 35% of all sales on Amazon. I built a recommendation engine and gave this tech talk about it.

Starwood Product & SPG, how to increase loyalty in international jet-setters

Final Deliverable to Global CEO and Marketing, Partnerships, Digital, Mobile & Brand Directors

As a PM, I led my team at Starwood Hotels to develop a physical & digital sharing 'Closet Concierge' idea for W Hotels in Starwood's emerging markets (China, India, Middle East). It was a lot of fun.

Nextdoor Growth Team

As a member of the Growth team at NYC Partnerships & Growth, I

  • Owned launches & growth for 35 Nextdoor neighborhoods (108,500 households)
  • Worked across Product, Marketing, Engineering & Analytics to execute Post Card strategy to increase penetration in top U.S. cities,
  • Set up eCommerce partnership w/ Uber

My team achieved 50 launches, grown 187 neighborhoods to achieve critical mass, or 65% of turf (from 2%), a 3,300%/ 33X increase in under 2 years.

Personal Websites and Blogs

Personal Website

GitHub

Travel Blog

LinkedIn

Twitter

About

Sample landing page & lead form for SolarCity - Tesla customers to indicate interest in renewable energy. Built with Angular, Node/ Express, MongoDB, CSS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published