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.
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.
Overview
Primary View of Team Profile Admin Tool
Presentation View
Research
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.
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.
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.
Build
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.
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.
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.
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.
High Fidelity Prototypes
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.
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.
Secondary Presentation View: Participant List
List view identifies each participant by their personality type, photo and name.
Check
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.
Reiterations
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.
Iteration markups for presentation app updates, including updated menu/controls to deliver presentations more flexibly.
Results
- 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.