Desktop App
Mobile App
SaaS
Productivity
2024
How I made a step feature that turns overload into
manageable
How I Made a Step Feature That Turns Overload Into Manageable
How I made a step feature that turns overload into
manageable
Role:
Product Designer
Year:
2024
Team:
2 designers, Full stack & QA engineers
Scope:
Researching, UX/UI, Design Handoff, User feedback
Background
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.
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
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.
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.
Problem: when steps look like subtasks
Problem: 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.
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
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.
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
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.
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
First attempt: got rejected
Gateway to another problem
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.
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
The problem: step deletion or converting is impossible without horizontal scrolling when having multiple columns
Stepping forward
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.
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.
Solution: step width reduced to task width; tooltip for steps with lengthy names.
One question remains
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
Learnings & reflections
Learnings & reflections
Make mistakes frequently: Initial design rejection was the essential ingredient for refining the concept within restrictions, which eventually developed trust.
Alignment is important: Early stakeholder buy-in will later save a few iterations.
Clarity versus bloated solutions: A simplified MVP is valued more than early sophisticated functionality.
