EagleView Report Ordering

March 2, 2015

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 when customers needed to order multiple structures at once, the ordering and processing workflows slowed down.

A new design was created that maximized the map area, cut the number of required steps in the ordering process by almost half which also allowed all customers to order reports for multiple structures/addresses in a single orders, and sped up the processing of ordering multi-structure/address reports.  We also took this opportunity to make the new design match the new EagleView branding.

The feedback after the release was very positive, especially regarding the map page and the reduction in steps to order.

• Conducted interviews with customers and employees who work on processing orders.
• Began process to turn interviews into personas.
• Interviewed customer service representatives to understand common friction points in ordering process.
• Reviewed direct user feedback.
• Evaluated existing system.
• Conducted task analysis.
• Conducted Design Studio.
• Developed scenarios to guide design process.
• Reviewed analytics and historical order data.
• Created style guides.

I introduced a pattern library to ensure consistency while multiple designers worked on the product. I later created the pattern library into HTML/CSS/JS and placed it into a git repo and gave a talk to the development team.

• 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

• 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

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.