Company: LawDepot
Role: UI/UX Designer
Team: Product Owner, Developers, QA, Researcher
Methods: Usability Auditing / Product Strategy / User flows / Wireframing / Mockups / Design System / Responsive Design
Timeline: 2023 – 2024
Summary
As one of the global leaders in legal tech, LawDepot offers an affordable solution for individuals and small businesses, providing an easy-to-use platform to generate customized legal documents and forms. Their digital product caters to various legal needs, aiming to make the legal process more attainable for those who may not have the resources to consult directly with lawyers.
My Documents is part of the member site experience (a user needs to created an account in order to have access to My Documents). It’s where users can view uploaded files, in-progress notarizations, and in-progress and completed LawDepot legal documents. This refresh was broken into a few phases: Phase 1 focused on a complete overhaul of the tech, basic functionality, and responsiveness — which is what this case study highlights. Phase 2 was visioned to introduce drag-n-drop capability, multiple file uploads, file preview.
Goals
Process
Problem areas to highlight
Solution
Example of specs
8-Point Fluid Grid
Utilizing an 8-point grid system helped create order, encouraged consistency, and cleaned up the UI for designers and developers. There was no structure prior to introducing this new system which made spec documentation more time consuming and chaotic.
Scalability Is Key
My Documents is linked to several other areas of LD: Notary, MUQ (internally known as Multiple User Questionnaire), and the new Editor. With the scability of components in mind, we wanted to make sure redunctant components were streamlined so that the other Product Owners were on board and aware of what we were doing.
For example, if the same component was used in all 4 areas, my team would take lead in the design specs and development, and then share the documentation to those teams for them to reuse.
Same Feel, But Better
We wanted to keep the overall table UI similar to our existing one because our users were familiar with it already and we didn’t want this refresh to be too jarring. It was also more managable for our developers, since they already had a lot on their plates with the tech upgrade.
Before
After
Refreshing Patterns/Components
Our design system was in its infancy stages, and so cleaning up existing components was inevitable and essential. With this refresh, we polished up on several different areas that touched the My Documents space to ensure best practices were utilized and logically it made sense for our team.
Dialogs were improved by utilizing the max width (especially for mobile screens), and changing the hierarchy of the information.
More menus were improved by updating the icons to use Google's Material Symbols, and to have proper colour contrast.
Tags were improved by increasing colour contrast of the text and icon, developing a labeling system, and introducing a variant that is interactive.
Impact
Reflection
This project was a memorable one because of the many creative ways we had to think outside the box of restraints. There were many moments of not being able to do a certain feature due to high effort, but regardless we tried to prioritize a frictionless user experience. I really enjoyed collaborating closely with my product owner, and the developers on the Membership team as it truly felt rewarding working towards a collective goal.
Unfortunately, I don't have access to the success metrics. However, here are some benchmarking examples I would have requested in the discovery phase of this project:
• What is the task completion time for uploading a .PDF file?
• What is the initial loading speed on different devices?
• If a user is tasked to find a document named "X", how long does it take?
• How long does it take for a Canadian user find a document they created for their American property?