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.
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
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?
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?
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.
Low Fidelity Prototypes
In response our initial interviews, my team created sketches of potential features. Pictured are some of the drawings I contributed.
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.
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.
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.
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.
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.
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.