Role, Duties & Year

Role: Senior UX Designer, owning research, design, and project management for the redesign
Duties: Project Management, Research Planning, User Interviews, Field Research, Competitive Analysis, Ideation & Prototyping
Year: 2019 - 2020

Summary

EagleView is currently the country’s leader in aerial imagery, data analytics, and geographic information system solutions. With this reputation, the company wanted to strategize towards future products. The product strategy goal was to combine two legacy products into one platform so that their users would log into one location for access. Having this new platform also meant that they could provide users with add-on features while using the platform. I owned the first phase of the redesign end to end, leading the research, design, and project management to bring two leading legacy products together into one platform.

Problem

Insurance appraisers, claims adjustors, assessors, and local ordinances often use multiple CAMA (Computer Assisted Mass Appraisal) systems to gain access to accurate information so they can provide better estimations and assessments to properties and structures. All of these user types have similar tasks with different goals. Often these people use different products with similar tools.

Design Question

How might we help Insurance appraisers, claims adjustors, assessors, and local ordinances leverage one system so they can access all tools within one product removing the need to use multiple products to achieve their goals?

Goals

  • Write a research plan and run user interviews to understand how customers worked across both products.
  • Collect product requirements and organize them into priority features.
  • Conduct a competitive analysis on mapping, CAMA and ESRI (Environmental Systems Research Institute) products.
  • Collaborate with subject-matter-experts to explore possibilities during brainstorming sessions.
  • Ideate design ideas through sketches and wireframes.
  • Redesign two existing products (Connect Explorer & Connect Assessment) into one seamless experience.
  • Provide designs for 3 main tasks such as imagery search, imagery tools, and imagery navigation.
  • Uncover value opportunities (such as the "property list" feature) that alleviate user pains.
  • Document the design and its functionality.

Research

I wrote the research plan and ran interviews with EagleView customers to understand how they used Connect Explorer and Connect Assessment day to day, which tools they relied on most, and where switching between products slowed them down. Most of the findings that shaped this redesign came directly from those conversations.

To see the wider industry firsthand, I also attended one of the largest geospatial expos of the year in Niagara Falls, Canada, alongside Esri, mapping companies, and EagleView itself. I sat in on discussions and spoke with people working in the field, which deepened my understanding of how professionals use aerial imagery and mapping tools, and what they need from them.

Ideation

Ideation involved collaborating with various team members to brainstorm concepts so that all members of the team could share their ideas and insight. This involved whiteboarding as well as sketching as a team to aggregate variations of what the features would look like.

Layout & Redlines

I owned the layout and redline documentation for the newly redesigned product. This included highlighting the main containers such as primary navigation and the content area. The content area further broke down into sections such as the side panel and visualizer.

EagleView
EagleView
EagleView
EagleView

Wireframes - Component Sections

Each container was designated a section (zone) that provided more detail into how content would interact when expanding and collapsing, including where certain components would exist.

EagleView
EagleView
EagleView
EagleView

Sketches

I began sketching the UI in parallel with the construction of the Wireframes. Since I needed to create lo-fidelity wireframes, I wanted to spend some time brainstorming the UI content and components through sketching. This allowed me to provide solutions to anticipated product features, as well as make mistakes on paper before going into Figma.

EagleView
EagleView
EagleView
EagleView

Wireframes - Lo-Fidelity

I constructed lo-fidelity wireframes using previous wireframes from the component sections with designated zones, and sketches. Using both sketches and wireframes from the component sections made the construction of wireframes much easier.

EagleView
EagleView
EagleView
EagleView

Design Solutions

The design solution involved using Figma while focusing on three main requirements; imagery search, imagery tools, and imagery navigation. These three main requirements were considered core interactions that support each user type and were determined that these feature sets would be created first.

Imagery Search

For imagery search, the users I interviewed wanted the search bar to auto-populate addresses based on each character entered so that they could easily access parcel locations quicker. When they entered a previously searched address, they wanted a visual cue showing it had already been visited.

EagleView
Search Bar - Collapsed
EagleView
Search Bar - Expanded
EagleView
Search Bar - Auto Populate
EagleView
Search Bar - Address Selected

Imagery Tools

For imagery tools, users told me they wanted a basic set of tools to use within the visualizer so that they can measure, draw, annotate, mark-up, locate, and apply various data layers when interacting with a parcel. Users can expand and collapse the vertical toolbar, as well as show and hide the contextual tool information panel. The information panel is also moveable when expanded.

EagleView
Area Tool
EagleView
Height Tool
EagleView
Distance Tool
EagleView
Text Tool

Imagery Navigation

For imagery navigation, users asked for a set of basic navigational components so that they can easily zoom-in, zoom-out, rotate, pan, access historical imagery, locate their current location, and paginate between orthogonal and oblique imagery orientation.

EagleView
Orthogonal - Zoom 01
EagleView
Orthogonal - Zoom 02
EagleView
Orthogonal - Zoom 03
EagleView
Oblique - Zoom 01

Side Panel - Future View

During my user interviews, I uncovered a value opportunity called the "side panel" and brought it into ideation for further concept creation. Most, if not all customers, work from a spreadsheet containing a list of parcel addresses. Sharing similar workflows, customers often copy an address from a spreadsheet, then paste it into the search bar using right-click. By doing so, this forces people to break their current experience by going from one product (Microsoft Excel, Google Sheets, etc) then into another (Connect Explorer, Connect Assessment, etc).

My research on early concepts confirmed that customers could see a productivity gain and fulfill a need through uploading a spreadsheet containing addresses into the system to populate a list of parcels. Having this feature would allow customers to click-or-arrow from one parcel to the next eliminating the need to copy and paste an address into the search bar.

EagleView
Drag & Drop
EagleView
Parcel List
EagleView
Search List
EagleView
Select Parcel Address

Outcome

I partnered with subject-matter experts, product strategists, directors, and product managers across the company. I used Figma to create all wireframes and art-boards. I contributed individual components from the design to EagleView's new design system so other products could reuse them. A majority of icons used were from the Material Design plugin, while company icons were custom created. I built clickable prototypes of all final designs using Figma's prototyping feature and shared them with all stakeholders.

When EagleView restructured its design team in early 2020, design leadership carried this work forward as the foundation for One, the unified platform that brought these legacy products together into a single, seamless experience. This same body of work later earned me my Senior UX Designer role at Oracle Cloud Infrastructure.

EagleView
Before
EagleView
After