KDI :: Agency

Ambassador App

Ambassador App

The Opportunity

We're passionate about renewable energy, so it was a pleasure for us to work with SolarCity on the first release of the Ambassador app - an important part of their effort to roll out solar panels across America.

Our Approach

The completed design flats for the app were supplied to us by the SolarCity design team. Our role was to create the front-end architecture and connect to the (.net) back end, working in close collaboration with the back end engineers.

The Ambassador app was designed as a mobile web app, so naturally we went with a mobile first architecture.

We put a lot of planning into the structure before we wrote a single line of code, to ensure that the app would be easy to maintain, and be scalable to accommodate new features. This is one of the many reasons we like Backbone.js.

To create a custom structure it's always helpful to look at the sitemap as a guide. For every major page, we create one layout file. Then we analyze every layout and create a folder of views for their main parts, for example "header", "page", "sidenav", "footer" etc.

The same separation is used to define the LessCSS structure. Essentially for every page layout there's a corresponding less file.

CSS Transitions

Beautiful and intuitive page transitions can really elevate an app. They should be about providing visual cues to the user, for example to indicate their location within the app. They are about enhancing user experience, not wowing the user with tricky effects. For the Ambassador app we emulated the current iOS transitions:

  • Slide transitions between pages at the same level
  • Zoom in when moving down the page hierarchy - from a higher level page to a subpage
  • Zoom out when coming back up the page hierarchy.

The transitions were created using CSS 3d transforms.

The Outcome

The Ambassador app was launched successfully and on time in Las Vegas on May 1 2014. We are continuing to work with SolarCity on further iterations of the product. We're excited about where the app will go from here. For more information on the Ambassador program, or to become an Ambassador, checkout the website: ambassador.solarcity.com.

Product Highlights

  • Mobile first web
  • Scalable architecture
  • CSS transitions