Lucien Liz-Lepiorz

design & develop

Pushbot by Catalytic

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

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

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 homepage

search builder & recommended tags

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

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

urgent tasks & processes

mobile layout

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

advanced view

icon system

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 list

default task ListItems

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 list

expert task ListItems

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 list

process ListItems

process ListItems

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

template grid

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

task detail

comments

comments

structural outline

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

task completion dialog

dialog actions

dialog actions

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

process detail

process detail

initial timeline sketches

initial timeline sketches

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

process detail, scrolled

process detail, scrolled

timeline elements

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.