Product design

Deep collaboration


We discovered that the critical connection to source data had not been figured out or designed for our calculations module.  


We were facing a juicy problem that needed deep collaboration to unpack. The resulting goal was obvious – link sources of data so they would feed into the calculation.  However, how to achieve this goal was not clear and was rife with ambiguous factors. 


This project was some of the best and most rewarding work I have ever done.  The nature of this particular design process required us to regularly switch between deep focus on details, and synthesis of complex and sometimes latent requirements. 

We used Lucid Charts and google meet for our maker space.  Lucid charts provided accessible visual wireframe sketching that facilitated rapid iteration through strategic and tactical definition, ideation and testing.  Google meet offered a comfortable environment where faces could be seen and voices heard.  Due to the complexity and unknowns of these design cycles we needed to see the expressions of our colleagues as we iterated.  This visual recognition paired with the collaborative drawing space really allowed us to enter a “flow state” as a team.


  • Business analysts
  • Project manager
  • Developers
  • SMEs


  • Logic model practitioners
  • Program managers
  • Program staff

Definition facilitation

How to join data and identify intersections needed to be defined.  However, talking or writing about something like this is unwieldy.  I started out immediately by making flow diagrams the participants could interact with.  These pictures helped them work out what they were expecting from the functionality, where the gaps were and how it might work in the UI.

Definition facilitation

Design Driven Synthesis

Once the two epics were defined the process became entirely design driven.  I set up and managed wireframes we could use as the catalyst for participants to interact and give feedback in the design process.  These epics still had many vague or yet unknown requirements.  Using the wireframes and prototyping facilitated the synthesis of disparate factors, and provided a venue for latent requirements to surface.  

Design driven synthesis

Real datasets

A handy trick I learned from working in fintech for so long, is to use real datasets in prototypes.  In this scenario real data made it much easier for the participants to deeply engage with the prototype/design process, identify issues and visualize alternate ways things could work.

Real dataset

Universal communication

I relied heavily on explanatory drawings to keep our team in constructive efficient communication.  Drawings are a great way to communicate complex concepts to a multidisciplinary team. Drawings are relatively universal and provide a neutral way to make sure everyone is on the same page.

Explanatory drawing

Efficiency and continuity

This was a fast iterative project, and the wireframes were easy to keep efficiently updated with the latest thinking.  When it came time to write the stories we used the wireframes to illustrate each scenario and provide continuity to the developers.  The result was that they were able to build these complex epics in just a few sprints

Wireframe illustrating a scenario in a story
MVP – define source


There was an epic that followed on the heels of the big two we had just finished.  I kept momentum up by immediately drawing up all the permutations in a wireframe so the BA could think through all the issues.

Wireframe of permutations

Agile collaboration

This following sprint required constant agile collaboration with developers.  The stories in this epic were very technical.  In addition, many of the UI behaviors had to be defined as the code was being written.  Since the developers were familiar with the wireframe technique from the previous design cycle, we were able to efficiently and synchronously collaborate to solve technical issues and decide on behavior paths.

Agile collaboration
MVP – conditions reveal