HR Decision-Making App 


Visualizing Workflow

This app transforms employee attributes along a collaborative timeline. It demonstrates variations in the decision-making process influenced by personality types in the Myers-Briggs “Zig-Zag Chart”. Making the decision-making process observable on a 60-second timeline innovates how global HR leadership teams discuss underlying team dynamics and optimize performance.

HR Team Tool

The Challenge

Create a business leadership app for enterprise team collaboration optimization.

Priority 1:  Design data visualization of 60-second animated decision making process, according to Myers-Briggs personality types.

Priority 2:  Create admin tool to capture team data with JSON file to scale product use for desktop platforms as well as remote workshops.

My Role

Automating this business leadership resource allowed me to wear all hats as a full-stack designer. I translated a worksheet showing Myers-Briggs personality types with timed attributes along a quadrant. I provided UX flow and UI prototype designs, and managed multiple product iterations to scale the app with new features and additional presentation views. I also led data transformation and platform migrations to extend remote collaboration to global teams. 


Primary View of Team Profile Admin Tool

Presentation View


Gathering Data and Requirements

After I interviewed Stakeholders, I prepared a creative brief and collaborated on UX strategy with our cross-functional team. I presented briefs for shareholder approval and managed the project research, flow, prototypes, development through several iterative sprints.

UX Strategy Myers-Briggs Decision Timing




Design Thinking

Research strategies were collaborated on in Google Workspace. Asynch collaboration in Miro was vital to evaluating product features and prioritizing features for backlog and adding them over time in lean sprints.

Shareholder Impact UX Matrix
Creative Brief

Adapting for General Use

Simplifying the Myers-Briggs Z Chart adds impact for general use case, without losing context in the process in user testing.

Decision Timer Sprints
User Flow


After Stakeholder approved specifications, I recruited a backend developer to fulfill custom DOM views with JSON development. I provided detailed documentation to limit revisions on it’s first draft in effort to ship it for an international presentation on an ambitious timeline.

Lean UX Iterations

We optimized our first sprint by mapping a single personality type in text format.

We added actionscript for each personality type in timed sequences in four steps. After testing one iteration, we added color styles to each personality type and mapped to an admin tool.

Lean ux iteration

Team Profile Admin Tool

We build an advanced form to make it as easy as possible for Admins to configure their team data. Optional Input Fields map content for Company, Team, and Date. Image upload buttons are provided for company logo and participant photos. Team Data can be added from a JSON button, or exported from the app for later use.

Team Profile Personality Type Selector
Image cropping API

Leveraging API

Team member profiles include image upload and cropping API to maximize ease of use while minimizing developer costs and added to JSON script for custom field mapping.

personality type selector tags

User-friendly Tag Selectors

Each personality type is accessible from a drop menu to streamline ux/ui. Color selectors are mapped to each type and animated in a timed sequence in the presentation.

Mapping JSON Data Flow Between the Admin Tool and Presentation

The low fidelity prototypes below shows mapped data from optional admin fields. In the primary presentation view, participant photos are animated across four decision-making steps in 60 seconds.

JSON app data flow
JSON app views

High Fidelity Prototypes

JSON App Data File Prototype
Primary Admin View: Team Profile Admin tool

Admins prepare team presentations by adding a team data file, or uploading images and selecting personality types for each person.

Decision Timer JSON App
Primary Presentation View: Decision-Timing App

The first view or the presentation runs an animated simulation of varying decision-making sequences for different personalities on the Myers-Briggs Z Chart.

List View
Secondary Presentation View: Participant List

List view identifies each participant by their personality type, photo and name.


Product pivots

The original presentation was lean, using names instead of images, and the presentation itself was limited to one view.

1) XML became a security risk for online platforms, and flash was replaced with JSON (javascript object notation).

2) Budget and timeline were prioritized for the initial build with global HR workshops scheduled a month from kickoff. Features had to be added on overtime in lean iterations.


In 2021 we added three big product updates:

Pivot 1Updated participant names to images with color border for quicker recognition.

Pivot 2Streamlined presentation controls to run another JSON file at any time .

Pivot 3We added a list view of participants by personality type.

Building the template

Iteration markups for presentation app updates, including updated menu/controls to deliver presentations more flexibly.

ux design iterations


  • 100% automation of manual production for over 38 admin tasks.
  • Increased accessibility with meta list views, photo customization, and animation.
  • Optimized time to insight 300% by incorporating team photos and utilizing color attributes.
  • Reduced friction by bridging admin engagement between two apps.

Humanizing Data = Innovative Insights

View Another Case Study:

Scale a Tech Startup with Lean UX Reiterations