web, enterprise, product delivery
As a task and process management platform for enterprise users, Pushbot necessitated a consumer-grade redesign that would disrupt the BPM and RPA industries. Atomic design principles were leveraged to help facilitate the design’s implementation as a React-based Storybook.

AppStructure ideation
Early designs attempted to streamline the experience by conjoining related objects, such as tasks that were always shown as the children of processes.

early task list
An experimental, search-based interface was briefly explored and tested. Users would navigate via text entry or the mixing-and-matching of tags.

search homepage

search builder & recommended tags
Following this exploratory phase, the design team aligned all concepts with the product roadmap and business goals. From this, a final design system emerged.
Beginning with login, a card-based structure was adopted.

login
After logging in, Pushbot immediately presented users with urgent tasks, as well as processes they were involved in. Urgency was determined by priority level, time remaining, and the number of associated users.

urgent tasks & processes

mobile layout
Due to the hybrid userbase of taskers and managers, the navigation menu required a split hierarchy. Common, everyday sections were shown by default, whereas advanced platform features required a second interaction.

advanced view

icon system
Pushbot consisted of three orders of system-level objects: tasks, processes, and templates. On each list page, users could filter and sort using a “Mad Libs” toolbar, in addition to choosing between default and condensed modes.

default task list

default task ListItems
The condensed (“expert”) display mode removed task instructions, avatars, and iconography. Additionally, if a task had no required fields, a button for immediate completion surfaced.

expert task list

expert task ListItems
Process ListItems featured several unique components: a progress visualization, estimated completion date, process category, and parent template link.
As an ETA slipped farther into the future, the due date moved to the left. Time was expressed as a proportional relationship between each side of the marker.

process list

process ListItems
Templates utilized a square ListItem grid. This layout evoked ecommerce and could be readily extended to a future marketplace.

template grid
Digging into a task detail, ListItem components were reused to frame and affirm the user’s journey. Comments flowed above input fields, updating users on important notes before they got to work.

task detail

comments

structural outline
When a task was completed, users would be prompted with a dialog that surfaced the next tasks in their queue. As a primary KPI, task completion needed to be constantly encouraged.

task completion dialog

dialog actions
Within a process detail, users could filter timeline elements and reverse the chronological sort.

process detail

initial timeline sketches
As users scrolled, the top card condensed and opened up more real estate.

process detail, scrolled

timeline elements
Working on Pushbot dramatically matured my product development skills. Design systems are the future, and working with a large engineering team provided insight into their needs, processes, and methodologies.
Final accountabilities included component library architecture, component UX/UI, implementation documentation, and developer support.