Web App
SaaS
Productivity
2024
How I made a step feature that turns overload into
manageable
Researching, UX/UI, UX Design, Design Handoff, Gathering user feedback
Background
Lawyers that were using Lupl needed more clarity over their task progress for better managing their time on task. I designed a feature that helped lawyers achieve this need.
Impact
I enhanced the app’s overall usability by breaking down complex tasks into manageable steps, helping users reduce cognitive load. These changes also clarified task progress, enabling users to better understand where they are in the process and what comes next.
When steps look like subtasks
For MVP, this step feature was meant to be a checklist for tasks. The user could check and uncheck items under the parent task to see overall progress.
But they could not assign these items to team members or set due dates, like they do with tasks. Hence the name 'Steps'—to clearly differentiate from subtasks.
Even though the name was clear, we had to find a solution for visually communicating the exact same thing: a step is not a subtask, and even though it is displayed in the same table, you cannot use it like one.
Researching
The main thing I wanted to know was if other productivity apps let you assign subtasks or set due dates for them.
I found out that apps like ClickUp, Monday, or Asana will only show a subtask in a table if it supports adding columns to it. However, only one, Employment Hero, displays subtasks that can’t be assigned. But they do not have any tables, just dashboards.
On the path to a pleasing experience
I presented what I learned in my research in a meeting with the product owner and stakeholders.
Despite the fact that everyone agreed that having steps in the table could lead to usability issues, my approach was rejected. The feature had to be visible, and hiding it in the siderail wasn’t an option.
First attempt: got rejected
Gateway to another problem
I experimented with adding the steps to the table. Usually lawyers task names are enormously long, and I thought, why not make the step full width? This solution turned out to be a gateway to another problem.
Because often users add many columns to a task, the critical actions like delete became hidden. This would lead the user to frustration, being trapped in not knowing how to delete a task.
The problem: step deletion or converting is impossible without horizontal scrolling when having multiple columns
Stepping forward
After trying different widths and discussing the solution with the team, I got the buy-in. It wasn’t perfect; it still needed a little tweak: a tooltip for long names.
Solution: step width reduced to task width; tooltip for steps with lengthy names.
One question remains
Thanks to the entire team, we launched the Steps MVP on schedule. With the exception of one question that Sales received, "Why can't I assign steps to team members?" the product was well received by users. The product roadmap was updated to include this additional request.
Component states ready for handoff
Web App
SaaS
Productivity
2024
How I Made a Step Feature That Turns Overload Into Manageable
Researching, UX/UI, UX Design, Design Handoff, Gathering user feedback
Background
Lawyers that were using Lupl needed more clarity over their task progress for better managing their time on task. I designed a feature that helped lawyers achieve this need.
Impact
I enhanced the app’s overall usability by breaking down complex tasks into manageable steps, helping users reduce cognitive load. These changes also clarified task progress, enabling users to better understand where they are in the process and what comes next.
When steps look like subtasks
For MVP, this step feature was meant to be a checklist for tasks. The user could check and uncheck items under the parent task to see overall progress.
But they could not assign these items to team members or set due dates, like they do with tasks. Hence the name 'Steps'—to clearly differentiate from subtasks.
Even though the name was clear, we had to find a solution for visually communicating the exact same thing: a step is not a subtask, and even though it is displayed in the same table, you cannot use it like one.
Researching
My impact was that I enhanced the app’s overall usability by breaking down complex tasks into manageable steps, helping users reduce cognitive load. These changes also clarified task progress, enabling users to better understand where they are in the process and what comes next.
On the path to a pleasing experience
I presented what I learned in my research in a meeting with the product owner and stakeholders.
Despite the fact that everyone agreed that having steps in the table could lead to usability issues, my approach was rejected. The feature had to be visible, and hiding it in the siderail wasn’t an option.
First attempt: got rejected
Gateway to another problem
I experimented with adding the steps to the table. Usually lawyers task names are enormously long, and I thought, why not make the step full width? This solution turned out to be a gateway to another problem.
Because often users add many columns to a task, the critical actions like delete became hidden. This would lead the user to frustration, being trapped in not knowing how to delete a task.
The problem: step deletion or converting is impossible without horizontal scrolling when having multiple columns
Stepping forward
After trying different widths and discussing the solution with the team, I got the buy-in. It wasn’t perfect; it still needed a little tweak: a tooltip for long names.
Solution: step width reduced to task width; tooltip for steps with lengthy names.
One question remains
Thanks to the entire team, we launched the Steps MVP on schedule. With the exception of one question that Sales received, "Why can't I assign steps to team members?" the product was well received by users. The product roadmap was updated to include this additional request.
Component states ready for handoff
Web App
SaaS
Productivity
2024
How I made a step feature that turns overload into
manageable
Researching, UX/UI, UX Design, Design Handoff, Gathering user feedback
Background
Lupl is a tool designed to streamline legal processes and workflows. I build a step feature that turns overload into manageable and enables users to better manage their workload.
Impact
I enhanced the app’s overall usability by breaking down complex tasks into manageable steps, helping users reduce cognitive load. These changes also clarified task progress, enabling users to better understand where they are in the process and what comes next.
When steps look like subtasks
For MVP, this step feature was meant to be a checklist for tasks. The user could check and uncheck items under the parent task to see overall progress.
But they could not assign these items to team members or set due dates, like they do with tasks. Hence the name 'Steps'—to clearly differentiate from subtasks.
Even though the name was clear, we had to find a solution for visually communicating the exact same thing: a step is not a subtask, and even though it is displayed in the same table, you cannot use it like one.
Researching
The main thing I wanted to know was if other productivity apps let you assign subtasks or set due dates for them.
I found out that apps like ClickUp, Monday, or Asana will only show a subtask in a table if it supports adding columns to it. However, only one, Employment Hero, displays subtasks that can’t be assigned. But they do not have any tables, just dashboards.
On the path to a pleasing experience
I presented what I learned in my research in a meeting with the product owner and stakeholders.
Despite the fact that everyone agreed that having steps in the table could lead to usability issues, my approach was rejected. The feature had to be visible, and hiding it in the siderail wasn’t an option.
First attempt: got rejected
Gateway to another problem
I experimented with adding the steps to the table. Usually lawyers task names are enormously long, and I thought, why not make the step full width? This solution turned out to be a gateway to another problem.
Because often users add many columns to a task, the critical actions like delete became hidden. This would lead the user to frustration, being trapped in not knowing how to delete a task.
The problem: step deletion or converting is impossible without horizontal scrolling when having multiple columns
Stepping forward
After trying different widths and discussing the solution with the team, I got the buy-in. It wasn’t perfect; it still needed a little tweak: a tooltip for long names.
Solution: step width reduced to task width; tooltip for steps with lengthy names.
One question remains
Thanks to the entire team, we launched the Steps MVP on schedule. With the exception of one question that Sales received, "Why can't I assign steps to team members?" the product was well received by users. The product roadmap was updated to include this additional request.
Component states ready for handoff
