Intelligence Agency

I created a React Storybook with engineering to address multiple permission considerations.

Search, Profile & Onboarding Component Library

One division of an intelligence agency asked for an internal LinkedIn. Agents would search for each other by skillset, experience, or organization. The other divisions did not like the implications of a social media network and set different parameters for their own agents. One division allowed their agents to search but not sign up; another forbade their agents from sharing their language level.

I worked with engineering to create an atomized component library that would reflect future permission changes to sign-ups, searching, and profiles.

Component Storybook ↗

Atomic

I took our existing Sketch file and started breaking down our home page (titles, tags, and search bars) into their disparate atoms (text, inputs, buttons) and rebuilt them back up into molecules. I worked with PMs to prioritize which molecules needed variants based on org permissions.

If users could search but not sign up, what did a home page look like to them? How would users know? We worked together to devise the smallest changes we could make to the home page molecules to convey an individual's app experience.

The home page for users who can opt in includes a banner enticing employees to sign up.
The "join" banner is by default anchored to the bottom of the home page to entice users to sign up.
The home page for users who are opted out uses the same banner style with simple text explaining they can't join.
For users that cannot sign up, a notification of their permissions replaces the "join" banner text. This variation can be found in the component library.

Storybook

I learned how to use React and Storybook with engineers to create basic styling for atoms and molecules of the system. We later used a grid system to lay out full pages with different molecules based on permissions.

The Storybook components can be seen below or on the live site ↗.