interaction designer

C. Authoring. Connector 2.png

Enova Decisions

Interaction Design, Enterprise UX
Web Application

ed-logo-new.png
 
 

Context

the Biz problem

Enova Decisions helps businesses automate complex operational decisions like creditworthiness, loan qualification, and higher education admissions…but they were manually creating decision models for clients while their platform’s development cycle stalled.

tl;dr

Through iterative collaboration, lean UX, and a little storytelling, we helped Enova visualize their strategy to launch a self-service decision modeling & real-time analytics tool as their flagship product.

Client Team

  • Head of Analytics

  • Data Scientist (SME)

  • Tech Leads x3

  • Technical Project Manager

Product Team

  • UX Director

  • Senior Interaction Designer (Me)

  • Product Owner

  • User Interface Designer


Decisions, Decisions

Decisions, Decisions

Approach

In 12 weeks, we worked with collaboratively with Enova to deliver a production-ready system design to the development team. This was split into 3 interdependent phases: Domain Analysis, Visual Requirements Gathering, and Production Design.

High-Level Gantt for Project Plan

High-Level Gantt for Project Plan

domain Analysis

Decision science has its own set of rules (no pun intended)and we immersed ourselves in the domain to solve its complex problems. We held workshops, read hundreds of pages of Decision Model Notation specs, and analyzed competing & adjacent applications.

storyboarding

Storyboards ground development sprints in the story of what the app enables the user to do. Working with Enova’s data scientists, we were able to map out the story of what the user could accomplish in this new system and, more importantly, why. We also threw in a few errors & obstacles to illustrate how the user could react in the system.

Collaboration & Feedback via Invision Freehand

Storyboards (also known as User Scenarios) help the team align near and midterm product vision to users’ tasks & goals.

 

Requirements Gathering

Because of the intricate subject matter, the product owner and I split the role of gathering requirements week to week. I would then organize & translate them into visuals for the client to react to via HipChat or in person. Breaking up the requirements gathering allowed me to learn by both questioning & making.

App Map & Feature Definition

App Map & Feature Definition

Requirements Gathering

Requirements Gathering

 

Interaction Design

The decision modeling tool originally lived inside of an accordion in the platform, but decisions could potentially have hundreds of nodes, paths, and thousands of inputs from API’s & data models. The breadth and sophistication of the modeling called for a full screen experience.

With highly technical users, I felt it was also important to design shortcuts and advanced interactions. Users could edit each decision step (or block) either on the canvas or with the responsive panel anchored to the bottom of the screen.

I was inspired by a host of creative tools like video timelines, code editors, and design tools (of course). It was super interesting to see how data scientists reacted to visual tools for very dense technical work.

H. DTable. Hrz. Rename Decision Block.png

Interaction model

  • Maximized real-estate for visual decision modeling on canvas

  • Familiar spreadsheet panel for detailed editing, inspired by video timeline editors

  • Detachable & resizeable panels enable multi-screens & progressive disclosure

  • Customizable tools panel with potential for future features

  • Continuous saving & error validation with static, consistent undo (saves locally, if offline)

  • Next button doubles as error validation counter

 

Select wireframes

K.1.1.0. Reviewing. Author. Review Context.png
 

Final Design

The challenging domain and top notch client team pushed us to craft a deceptively simple tool for very complex workflows.

The final design was actually only about half of the features Enova had originally asked for. Through constant & iterative collaboration, we were able to show their team how our process would deliver what they really needed: detailed, development-ready designs of core features instead of a half-baked conceptual application.

Since then, Enova’s been able to launch features significantly faster using our methods & design. See a working demo of the app a few months after delivering the designs at the 2018 Finovate Conference.