Jonathan Kaiser
Jonathan Kaiser UX Design
Giftbomb-Mockup-FINAL.png

Structural

Research and new feature design for the Structural web app.

WK9-Structural-Mockup.png

Structural


 

Project Summary

Structural is an existing SaaS web app devoted to enterprise productivity. Structural operates as a professional network of data-rich employee profiles — similar to LinkedIn, but internal to an organization. The app’s goal is to help large and distributed organizations leverage actionable data and increase productivity. My team was tasked with designing new features to serve Structural’s users better by surfacing existing data in new ways or by adding additional functionality.

My Role

  • Collaborated with a 4 person team, met with client to establish scope, timeline, and goals

  • Conducted user research via interviews, card sort, and contextual inquiry

  • Created low fidelity prototype concepts in response to user interviews

  • Synthesized survey results on initial prototypes to decide which features to develop

  • Created wireframes and high fidelity prototype

Client

Structural

Methods

Client Consultation, Competitive Research, Contextual Inquiry, Card Sort, Survey, Low Fidelity Prototypes, Kano Analysis, Wireframing, Interactive Prototype

 

The Challenge

Actionable Data

We started with a deep dive into secondary research on the problem space: What are the pain points faced by employees and managers at large and distributed companies? Where are the gaps in knowledge and communication that could be helped by a tool like Structural?

IMG_2591.JPG
 

The Process

User Inteviews

To get first-hand accounts, my team interviewed both existing Structural users and professionals who fit the company’s core user demographic. What problems do they want to solve? What tools do they need to make their work easier?

 
Structural_Research-13.jpg
 

Prioritizing Data Categories

We used a card sort to help participants rank Structural’s existing data fields into three levels of importance. This exercise gave us some insight into some hierarchy changes that would make it easier to scan user profiles for essential information.

Structural_Research-11.jpg
 
Structural_Research-9.jpg
 

Low Fidelity Prototypes

In response our initial interviews, my team created sketches of potential features. Pictured are some of the drawings I contributed.

 
IMG_2642.jpg
IMG_2643.jpg
IMG_2644.jpg
IMG_2641.jpg
 

User Feedback on Prototype Concepts

With concepts in hand, we set out to expand our data set through both an online survey and in-person user testing.

 
IMG_9221.jpg
 

Quantifying Survey Responses

Our survey gathered general demographic information as well as ratings of each prototype concept. By structuring our survey to collect ratings on both the presence and the absence of each feature, we were able to use a Kano Analysis to prioritize the feature’s importance.

Screen Shot 2019-02-07 at 8.35.11 PM.png
 

The Design

Micro-Interactions with Impact: Flag

I proposed two features that are small in size but wide reaching in their impact to the overall experience.

First, the ‘Flag’ status indicator can be switched on and off by each user with a button in their top menu bar. Intended to facilitate cross-departmental collaboration in professional services organizations, the flag signals that the employee is available to take on additional projects. In the future, this could be synchronized with a project management system.

Flag Symbol@3x.png

Micro-Interactions with Impact: Profile Preview Card

Second, an expanding profile preview card gives users expanded profile data without having to leave a list of search results. As managers search for internal talent for their teams, seeing skills and location are critical data points that aren’t visible in Structural’s current list entries, but can easily be surfaced using this expanding preview card. See the video at the end of the case study for demonstrations of these features.

Profile Cards@3x.png

Individual Knowledge is Institutional Knowledge

One of the themes of our interviews is that important institutional knowledge is often hard to track in organizations where employees frequently change roles, transfer offices, and even leave the company. This Role History feature gives contextual results on other people within a company who have had the same job title — either currently or in the past. This helps employees to find the right person to ask about specialized procedures or find mentors for career development.

 
 

Iterations of an Org Chart

Creating a scalable organizational chart was one of the most popular ideas among users, and also one of the biggest design challenges of this project. How can a tree with over 500 branches be represented in a way that contains rich information, yet remains scannable? Can this be achieved in a mobile friendly format? I created several versions of a tree with expanding branches, trying to focus on one linear path while signifying the option to explore other branches.

 
 
WK9-Structural-Org_Chart_V1.png
WK9-Structural-Org_Chart_V3.png
WK6-Navigation-1.png
 

Motion to Clarify Meaning

This animated GIF shows an early attempt at animated interactions intended to help clarify how to navigate the interface. Ultimately, this design became too cumbersome at large scale. See the video at the end of this case study for the final design.

StructuralOrgChart-V1.gif
 

Video Demonstration of Interactive Prototype