Approver view
Approver view
Track the approval process of your request
Track the approval process of your request
The Challenge
The Challenge
This component houses a lot of states and data that is important to reflect to the user (both the employee and Admin) but the more information we piled on, the more difficult it became for users to understand.
This component houses a lot of states and data that is important to reflect to the user (both the employee and Admin) but the more information we piled on, the more difficult it became for users to understand.
The Opportunity
The Opportunity
Presents an opportunity to revamp the design and make adjustments based on our new direction and put in place a foundation which would allow for the forms redesign to take place.
Presents an opportunity to revamp the design and make adjustments based on our new direction and put in place a foundation which would allow for the forms redesign to take place.
The brainstorm
The brainstorm
Let’s start with a clean slate
Let’s start with a clean slate
I started by collecting feedback from customer-facing teams regarding various issues with this component that our clients shared with them. Additionally, we did a roundtable discussion (UX team and Product) to dissect and analyze the issues with the component.
I started by collecting feedback from customer-facing teams regarding various issues with this component that our clients shared with them. Additionally, we did a roundtable discussion (UX team and Product) to dissect and analyze the issues with the component.
| Limited flexibility:
Workarounds reduce clarity and overall readability
| Unclear pending state:
Difference between pending and approved is too subtle
| "Potential approver":
Unclear impact on workflow
| State 0:
Requestors lack context on where the flow begins
| Mobile issues:
Component takes up too much space
| Skipped steps:
Creates confusion
| Increased complexity:
More steps make the process harder to follow
| Limited flexibility:
Workarounds reduce clarity and overall readability
| Unclear pending state:
Difference between pending and approved is too subtle
| "Potential approver":
Unclear impact on workflow
| State 0:
Requestors lack context on where the flow begins
| Mobile issues:
Component takes up too much space
| Skipped steps:
Creates confusion
| Increased complexity:
More steps make the process harder to follow
The Ideas
The Ideas
Ready, set, GO!
Ready, set, GO!
I brought together key stakeholders—the head of product, UX/UI lead, and product manager—first reviewing issues in our current solution. Then, I presented three design options, highlighting my top choice. After gathering feedback, I outlined action items and scheduled a follow-up to finalize decisions.
I brought together key stakeholders—the head of product, UX/UI lead, and product manager—first reviewing issues in our current solution. Then, I presented three design options, highlighting my top choice. After gathering feedback, I outlined action items and scheduled a follow-up to finalize decisions.
Big picture: Who is next?
Big picture: Who is next?
Find solution for the table, show who is next and what step you are on (link)
Find solution for the table, show who is next and what step you are on (link)
Who approves?
Find potential solutions for groups/roles, not clear who can approve
As a user I want to know WHO is my point of contact to approve my request, Admin/Pro is not indicative enough
Phase 0
Phase 0
Unclear to user what is pending? Has nothing to compare it to (the approved state), so it is unclear
Unclear to user what is pending? Has nothing to compare it to (the approved state), so it is unclear
Who approves?
Find potential solution for groups/roles, not clear who can approve
As a user i want to know WHO is a point of contact to bug and approve my request, Admin/Pro is not enough indicative
The Solution
The Solution
Drumroll please...
Based off the feedback, I started to adjust the concept to meet the requirements that were added, and a few iterations later this was the final solution that was agreed upon.
Based off the feedback, I started to adjust the concept to meet the requirements that were added, and a few iterations later this was the final solution that was agreed upon.
