EagleView Report Ordering

EagleView’s measurement report ordering process via the public website and carrier portals.




Launch date

March 2, 2015


Problem

EagleView Technologies has a series of portals that allow customers from the construction and insurance industries to order roof measurement reports.  These reports can save them considerable amounts of time in comparison to hand-measuring roofs.  But customers wanted to be able to order reports for multiple structures at once, order the reports faster and have a bigger map on the interface to find the correct property to have measured.


Solution

A new design was created that maximized the map area, reduced the number of steps required for the ordering process from six to three, allowed all customers to order reports for multiple structures in a single orders.  We also took this opportunity to make the new design match the new EagleView branding.

After release, customer feedback was mostly positive, especially about the map page and the reduction in steps to order.



Ordering a report




Multi-structure ordering




Previous Ordering process

The previous ordering process took 6 steps to complete, the user had a smaller map area and the could not order measuring reports for multiple structures at once.


What I did

  • Designed basic template shared across entire ordering process
  • Designed the property (map area) and product selection sections of the ordering process
  • Front-end development (most html and CSS as well as some of the javascript) of skin files, pages and DNN modules in the ordering process
  • Collaborated on the design of other aspects of ordering process
  • Introduced elements from the pattern library I was in the process of designing
  • Sketching, white boarding, brainstorming, early wireframing and final design of the product selection process
  • Design brainstorming, discussion and critiques with other designers on team
  • Worked closely with product managers, technical product managers to clarify user needs and requirements at all stages of design and development process
  • Collaborated with software engineers during development process
  • Centralized CSS across portals and removed non-semantic markup (including layout tables) and inline CSS
  • Fit-and-finish work
  • Browser testing



Tools used

  • Design Methods: stakeholder interviews, activity flow, sketching/white boarding, wireframes, design review, brainstorming, pilot (multi-structured ordering portion)
  • Design tools used: Design Studio, Pen/Paper, white boards, Balsamiq, PowerPoint, Fireworks, Photoshop
  • Development tools used: Visual Studio, Team Foundation Server, Firebug/Chrome/IE for debugging



Early sketches and wireframes




Technical Tidbits

This project involved re-working multiple DNN Modules that are shared across multiple portals that have slightly different DNN Skins with varying base css files. This made the design and the implementation of the design a bit more complicated, but more interesting. But, because of the reuse of some of the modules across all of DNN, a few small aspects of the design had to be left out from development.