A desktop, web application dashboard for a Honolulu-based law firm, Hong Law Practice.

privacy hong.jpg

Project Summary

Problem Domain: Law Firm Performance Metrics and Productivity

Notice: I am currently under an NDA for this project, and so much of the design process and material from this project is confidential. I will however share information or process pieces that are in the public domain. If you have more questions about this project, please feel free to email me.

Timeline: 1 month, Jun. 2019 - Jul. 2019

Role & Team: UI/UX Designer, Team of 3 (UI/UX Designer, Front-End Developer, Law Firm Owner + Database Manager)

Tools: Figma

Methodologies: needfinding interviews, low-fi paper prototyping, digital prototyping, usability testing, user interviews

Final Product: proof-of-concept, desktop law firm performance metric dashboard


Design Process

While I am under NDA for the content and product-related content, I will share a brief numbers breakdown the project's design methodologies, a general outline of my design process, as well as a publicly available heuristic evaluation I performed of an existing law performance metric platform named Clio.​


Brief Numbers Breakdown

6+ legal field industry Skype calls with Hong Law Practice owner

4 dashboard interface drafts: 1 paper, 3 digital

2 user interviews with practicing lawyers and firm partners

1 heuristic evaluation of existing market tool


Hong Law Practice Design Process Outline

Starting off this project, the firm’s partner, my client, already had a solidified idea of the problem space and the solution that they wanted to design for, so my job was to be less of an initial problem needfinder, and more of a designer for the interface they wanted. This was a desktop, law firm metrics dashboard interface and login screen.

I started off this project by conducting market research on law firm productivity by having weekly Skype calls with the law firm owner, and dissecting law firm metric tools currently available on the market.

Through weekly calls with the law firm owner/partner, I was able to better understand the legal field, law firm business practices, and firm management structures.

By understanding the legal field and firm management needs, I was able to dissect screen-captures from the law metric platform Clio in order to find areas of improvement.

I performed a heuristic evaluation of the Clio firm-management, desktop interface and documented my findings, which are featured in full below this outline.

While performing this market-research, I also gained training in the SQL coding language in order to better design the interface so that it would be compatible with the query structures of the law firm databases. This also helped with syncing up interface demands with the coding tools used by the front-end engineer and firm database manager.

From the findings of my heuristic evaluation, as well as lawyer-needs insights from the owner of the law firm, I created a paper draft of what an improved dashboard interface would look like. After initial critiques from the firm’s partner, I created a digital prototype of the dashboard and login screen on Figma.

Included in this initial prototype were new and improved, law firm metrics that were centered on giving firms deeper, and more meaningful, insights for firm management, as well as for individual lawyers. These metrics were also paired with new data visualizations that gave the user a clear understanding of what their current metrics are, and if their metrics are on track to meet their personal and firm goals. These metrics and data visualizations were co-created by the firm’s partner and I.

After creating a first digital mock-up of the desktop interface, the firm’s partner and I co-interviewed a practicing lawyer to get additional user-insights, as well as get his critiques on the first interface draft. From this interview we received much more user-insight, and greater clarity to which metrics were most impactful, and which ones were not so important.

Throughout the interview I took detailed notes on user narratives, user needs, what features worked well and what features were less effective. Additionally, I took note of disagreements between the partner and the lawyer, with their individual supporting reasons why they disagreed. All notes were then recorded to cloud documents.

Utilizing this new user information, I critiqued my first draft by reorganizing the interface in ways that prioritized the metrics/visualizations that were indicated by the interviewed lawyer to be most useful. I also removed metrics/visualizations that the lawyer told us were less or not at all useful. Some visualizations simply needed to edited a bit to more specific, and consequently more insightful.  After this reorganization and critique process, I finished and presented my second draft of the interface.

To further critique the second draft, we met and interviewed a partner from a different Honolulu-based law firm. From this user interview, we gained additional user insights and additional critique on what metrics and visualizations were most helpful and which were less helpful. During this interview, I also took detailed notes of the user stories, likes and dislikes, as well as their points of agreement and disagreement of design choices we made. These notes were then documented digitally into a cloud document.

Using these comments, I edited the interface to reflect the comments from the interview, making sure to prioritize the items that were helpful to both past interviewees. From the information I received from the two user interviews, my heuristic evaluation, and frequent informational interviews with Hong LP’s partner, I produced the third, and in this timeline, my final digital draft of the law firm metrics, dashboard interface.

I delivered this third draft of the interface to the law firm’s partner and his front-end engineer so they could start to implement the actual tool.


Market Research: Clio Heuristic Evaluation

In researching for this project, I performed a heuristic evaluation of Clio, a currently-available cloud-based, law firm metrics tool. For this evaluation, I took screen-captures of the tool’s interface, and then evaluated it against Jakob Nielsen’s 10 usability heuristics for user interface design. For each heuristic I listed how the Clio interface applies, and violates the principle, as well as how I would improve upon it.

1) Visibility of system status

  • Is the principle applied? How so?

    • Side button highlighted on which page you are on. 

    • 'Updated' shows how long ago it is refreshed. 

    • Loading icon shows system working. 

    • 'Matter created' shows that a matter has been successfully created. 

    • 'No bills match you filters.' allows people to know that nothing came up on results, and the user is not waiting thinking things will load.

  • Is the principle violated? How so?

    • 'Transactions' in 'Matters' has no message to confirm nothing is there. Blank space confuses people when they expect something to come up.

  • Are there improvements that can be made? How so?

    • No blank space when things are expected there. Especially when nothing is there. When nothing came up for results, say e.g. 'No search results'.

2) Match between system and the real world

  • Is the principle applied? How so?

    • Iconography matches really well: 'Matters' = suitcase, 'Bills' = money, and 'Accounts' = bank.

  • Is the principle violated? How so?

    • I do not know the daily life/real world experience of attorneys, so I can not see when this principle is violated.

  • Are there improvements that can be made? How so?

    • Perhaps animations can be added e.g. paper going into a file for 'Creating a Matter', or shredding a file for 'Deleting a Matter'

3) User control and freedom

  • Is the principle applied? How so?

    • 'Billable hours target' is able to transition to different time scales (week, month, year). *Able to navigate easily through tasks with side menu.

  • Is the principle violated? How so?

    • Reports are basic level due to limitations in their cloud platform computing.

  • Are there improvements that can be made? How so?

    • Perhaps pre-calculated server analytics will allow for faster times, allowing for more insightful/advanced attorney reports.

4) Consistency and standards

  • Is the principle applied? How so?

    • There is a clear text hierarchy: titles are bigger and bolded, links are in blue and are underlined, and the details are below in smaller, regular text. 

    • Most categories follow the same format, yet some are specified to their function. 

    • Consistent layout/organization for tables. 

    • All fonts consistent.

  • Is the principle violated? How so?

    • No issues I can see.

  • Are there improvements that can be made? How so?

    • Might improve green color for 'Create New' button on the top left. I feel like the green clashes with the blue a bit, but this is a minor issue.

5) Error prevention

  • Is the principle applied? How so?

    • Red error messages to fill out relevant information, as well as to fill out the information correctly. 

    • Green text of 'Required' net to fields that are required to be filled out. 

    • Have to 'confirm' to delete matters, so a user does not accidentally delete important matters/matter information.

  • Is the principle violated? How so?

    • No issues I can see.

  • Are there improvements that can be made? How so?

    • Maybe highlight boxes that are required in green so that they are easier to see rather than just the small green font. The smaller green font sometimes is hard to see against the white background.

6) Recognition rather than recall

  • Is the principle applied? How so?

    • 'Billable hours target' > O (circle) interface shows current total hours to date. 

    • 'Total in Draft' and 'Total Overdue' are both easily seen, as well as color coded nicely. Blue for draft (meaning good! income) and red for overdue (meaning bad! less usable revenue). 

    • Performance metrics all easily accessible, and hover to see actual values.

  • Is the principle violated? How so?

    • No issues I can see.

  • Are there improvements that can be made? How so?

    • 'Edit' button in 'Matters' seems to be in the way a bit. Maybe move it to the end of the row?

7) Flexibility and efficiency of use

  • Is the principle applied? How so?

    • Side menu is very efficient in switching between different activities. 

    • All categories are easily understandable.

  • Is the principle violated? How so?

    • While the side menu is efficient, sometimes clicking through so many things can get exhausting. So many nested menus etc.

  • Are there improvements that can be made? How so?

    • Improve the reports 'filters' interface to be more aesthetically pleasing.

8) Aesthetic and minimalist design

  • Is the principle applied? How so?

    • Blue color is consistent and brings a sense of security to the user. 

    • Icons and text are all clear and understandable.

  • Is the principle violated? How so?

    • Filters for 'reports' are spaced too far, and could be refined to have to scroll less.

  • Are there improvements that can be made? How so?

    • Reports are just basic bar graphs, and not as flexible due to cloud computing platform.

9) Help users recognize, diagnose and recover from errors

  • Is the principle applied? How so?

    • Red icon under 'Announcements' or notifications easy to recognize alerts, new information and errors.

  • Is the principle violated? How so?

    • No alerts or notifications for all the side menu tabs. Users can think all is fine, when there might be urgent matters to attend to.

  • Are there improvements that can be made? How so?

    • Have alerts/notification icons on the side menu icons to attention to issues. Color code the icons e.g. red for urgent (1 day notice), and yellow for pressing/upcoming (3 day notice).

10) Help and documentation

  • Is the principle applied? How so?

    • Great library full of information and documentation. Users able to self-help and learn new functions. 

    • Lots of support options, and material.

  • Is the principle violated? How so?

    • Help page is too busy. Can overwhelm the user to give up when seeking help. 

    • Search all articles' menu can be minimized as well, because it detracts from the simplicity of the search bar.

  • Are there improvements that can be made? How so?

    • Help center can be simplified to just a search bar. Scroll down for more options. Currently too busy, overwhelms the user. 

    • Put tabs with videos so people know items are videos. 

    • Also add the number of views a search item has, or how many people found it helpful.


Clio interface screen-captures: