ArcGIS Workflow Manager

UX Research, Interaction Design, Prototyping, UI Design, Visual Design

Esri
2016

ArcGIS Workflow Manager is a powerful centralized job management, tracking, and automation system for GIS implementations used by over 800 organizations globally, including Fortune 500 companies and federal, state, and local governments.

Overview

ArcGIS Workflow Manager is a powerful centralized job management, tracking, and automation system for GIS implementations used by over 800 organizations globally, including Fortune 500 companies and federal, state, and local governments.

Results

ArcGIS Workflow Manager is a powerful centralized job management, tracking, and automation system for GIS implementations used by over 800 organizations globally, including Fortune 500 companies and federal, state, and local governments.

Role

Teaching an old dog new tricks

I worked as the UX designer on a cross-functional team to shape ArcGIS Workflow Manager at the early stages of transition from a desktop to cloud-based enterprise web application (B2B, SaaS).

My role balanced evaluating the existing systems to identify key metrics and benchmarks, working with engineers to identify constraints based on a complete shift in infrastructure, and prioritizing years of backlogged requests to improve pain points.

This led me to compile my findings and designs into a comprehensive UX strategy and design system with research and recommendations to guide the rest of the project development. The new task-driven model led to designs and features that reduced the number of steps for major user tasks by over 50% to support a 74% increase in user growth after 2017.

Initial brainstorming and sketching led us to focus on personas and tasks

Research and relationships with clients led us to develop three personas covering a wide range of use cases

Charting tasks and use cases on a variety of dimensions helped analyze user journeys and prioritize critical tasks

Challenge

Flexibility without complexity at scale

Challenges included the organization of complex features and use cases of an 10 year old application built across several legacy platforms. To minimize future bottlenecks, I led the critical research and planning stages that would shape the rest of the design process.

Following heuristic evaluations, user surveys and feedback, persona development, and task and use case analysis, I collaborated with the project manager and engineering team to author an original UX strategy to guide the project and develop a design system that laid out the information architecture, page templates, and UI components for the project.

I defined an original task analysis model to break down use cases into tasks, steps, and interactions.

Connecting real user needs with the product design was crucial to the project. I created a task analysis model inspired by Atomic Design and informed by our heuristics and persona research to serve as a guide for the IA, UX, and UI.

Each task was broken down into steps and interactions, evaluated in its legacy state, and modified for the new application in line with the user personas. This served as a baseline for the complexity of our use cases in the existing application and allowed us to evaluate the efficiency of new designs.

Examples of tasks analyzed with definitions for success, barriers, and recommendations

"The new underlying architecture combined with redesigned features reduced the number of steps for user tasks by over 50% across major use cases."

Matching the task analysis model directly to IA and UI level features meant every component of ArcGIS Workflow Manager could be designed for and justified by specific user needs and technical constraints while establishing consistent patterns for interactions across the application.

Mapping the task model to the design system UI

Among other methods, the strategy generated recommendations for the structure, features, and UI of the web-based application. Consolidating patterns into a flexible design system integrated design with development and created inclusive channels for feedback between the designers and developers.

Once the foundation was built, high-fidelity design and prototyping outpaced the agile project timeline with effective communication and quick interaction.

Approach

A holistic design strategy

The move from a desktop to web-based service called for a fundamental redesign of the service to better match user needs and technological requirements.

While the research and analysis served as a benchmark for the existing application and identified key problem areas to focus on, in order to effectively apply those findings for Workflow Manager users I needed to communicate the recommended UX strategy and propose designs that were:

  1. Task Driven
  2. Consistent
  3. Scalable
  4. Responsive

UX manual (excerpts)

Prototyping

Tinkering under-the-hood

Spread across multiple legacy platforms dependent on client-side equipment, one of the most common usability complaints learned from our backlogs of bug reports and the user survey involved the performance itself.

With the shift to a web-based application, we took advantage of more responsive front-end solutions. I prototyped interaction patterns using GoJS that presented users with commonly used features right where they needed, without getting lost in nested menus and dropdowns.

I developed a javascript prototype for the workflow designer

Designing the editor using the new components

Design system

A visual language brings it all together

While legacy systems bring familiarity to experienced users, a new engine deserves a new look not only for style but also to deliver a more accessible and intuitive experience. By aligning the product to Esri's emerging Calcite Web design system, we generated new UI components and patterns that felt consistent with the enterprise system. A touch of flair to the graphics and iconography felt refreshing, too.

Workflow Manager existed as part of 3+ legacy applications across multiple platforms

Building a UI component library

Examples of component-level UI

Examples of feature-level UI

Designs for updated in-product icons

Team

Tope Bello, Project Manager.

Michael Broadbent, Product Engineer.

Kevin Gao, UX Designer.