A note before diving in. As stated in the notice above, the following videos and images have been scrubbed for classified content. These are recreations of the actual product using stock photography, a country that does not exist, and dummy data.

Design Aims

An aspect of understanding how a leader makes decisions is to understand the people that the leader trusts the most. Everything from the number of advisors within the "inner circle" to those members' backgrounds, all provide valuable insight into how the leader will respond to events as they arrive. This product was an interactive companion for a written leadership analysis piece.

My Roles

UX / UI Designer

My role as the lead designer was to gather requirements from the customer and integrate those requirements into a design that fit the customer's goals.
I also performed user testing and incorporated feedback from my colleagues, leadership, and customer.

Developer (Angular)

I acted as the primary for the front-end implementation of this interactive. Beyond the front-end development, I performed all testing of the product across platforms including the web and iOS throughout development.

The Concept

Presenting leadership and their advisors is generally done with static print designs. With this product, the interactivity would allow the author to show that advisor influence was not, in fact static, but a connection that tightens or degrades based on the leader's needs, their trust of specific groups within society, and that advisor's area of expertise.
The final interactive product would need to contain collections of advisors based on selected categories and contain bios for each of the advisors.

Sketching to plan the advisors

I tried several layouts including the standard orbital chart, a reordering list, and other arrangements that were better for conveying proximity or a gradient of influence. Since the written product did not focus on "closeness" of the advisor, I wanted to avoid anything that would appear to portray that.

The Decision

Following several passes and group critiques, the final layout decision would be a morphing tree of advisors that would change through interaction with the product. Since ethnic ties are important in this area of the world, it would be necessary to highlight those ties.

Showing the path to Broo timers

A Little Surprise

Initially, when a user selected a category, the unassociated advisors would change in transparency to visually deemphasize them. Testing of the final wireframe showed a somewhat surprising reaction by several users. Instead of reading it as the person was not relied upon, they understood it as the person being a secondary advisor in those instances but still consulted.

Logging new teas

Quick Solution

This feedback resulted in the advisor being completely removed when not needed.

Tiers For Peers

Sketch of interface for mobile app, Broo

This type of leadership product is typically illustrated through an image that looks much like a circular diagram displaying the solar system. The leader is at the center with their advisors orbiting around them on concentric circles.

Low fidelity wireframe for mobile app, Broo

An attempt was made to have the advisors appear in columns. Because all advisors would be present in this view, it was difficult to fit them into the limited vertical space of our production requirements.

Final design mockup for mobile app, Broo

Organizing the tiers into layers became the most appropriate layout. It created a layout that put more of the content on the horizontal plane and allowed for the introduction of the additional information covering the advisor's area of expertise.