At LegalConnect, I was presented with the challenge of organizing an intuitive dashboard full of information. The primary goal was to declutter the order form, so the user can efficiently fill out the required information, and navigate through the form.
​
Design Approach:
​
1. Top Navigation/Pagination:
-
Objective: Provide users with a clear understanding of their progress within the form.
-
Implementation: Introduced a top navigation/pagination bar indicating the user's current position in the process. This ensures users always know where they are in the workflow, enhancing overall navigation.
2. Field Completion Checklist:
-
Objective: Reduce cognitive load by visually displaying completed fields.
-
Implementation: Added a checklist to the right of the page, allowing users to track their progress in completing essential fields (Documents, Case Details, and Review). This feature enhances user confidence and clarity.
3. Modal for Adding Case Participants:
-
Objective: Simplify the addition of case participants and save page space.
-
Implementation: Introduced a pop-up modal for adding new case participants. This clear separation distinguishes the form from the main page, preventing unnecessary scrolling and preserving valuable screen real estate.
4. Service Level Selection and Final Details:
-
Objective: Streamline the process of selecting service levels and providing additional details.
-
Implementation: Designed a section for selecting service levels and entering final required details (billing code, notification recipient, etc.). The right side continues to serve as a visual indicator of completion status, maintaining consistency in the user interface.
5. Visual Design:
-
Maintained the existing color scheme to ensure consistency with the rest of the LegalConnect platform.
-
Incorporated contrasting colors for key elements to draw attention and guide users through the workflow.
Below are some User Personas indicating the type of users that were using Legal Connect and their frustrations.
​
.jpg)
-2.jpg)
The Visual Design /Color Scheme
While keeping the integrity of the existing UI, I initiated a top navigation/pagination indicating to the user their system status, while navigating throughout the page. This way, the user always knows where exactly in the process they are. To the right of the page, I included a place where the user can check to see if they have completed each of the listed fields (Documents, Case Details, and Review).
​
The system design below demonstrates a user adding a new case participant. I added a pop-up modal to make a clear distinction between the form and the current page. This also saves the user from scrolling/and saves page space.​
This final portion of the design is selecting the service level and including any final required details, such as the billing code, who to send the notification to etc. The right side remains as a way to indicate status of completion to the user.
Outcome:
The redesigned dashboard provides a streamlined and intuitive experience for users filling out legal order forms. The top navigation, completion checklist, modal for case participants, and service level selection contribute to a more user-friendly interface, reducing friction in the form completion process.
​
Future Considerations:
-
Conduct usability testing to gather feedback from users and iterate on the design.
-
Monitor user analytics to identify any pain points or areas for improvement.
-
Explore additional features or enhancements based on user feedback and evolving business needs.
​
By prioritizing user-centric design principles, LegalConnect's order form dashboard now offers an improved and efficient experience for its users.