Extracy
![the homepage for the law foundation dashboard](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1224,h=688,fit=crop/AGBovGnGQZIBMbxR/extracy-law-cases-management-dashboard-design-YBgM3EGPajikRzqL.png)
![the homepage for the law foundation dashboard](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=382,h=215,fit=crop/AGBovGnGQZIBMbxR/extracy-law-cases-management-dashboard-design-YBgM3EGPajikRzqL.png)
The homepage for the law foundation dashboard
My responsibilities
UI design - crafted design system and hi-fi mockups
User research - interviewed users, created personas & feature maps
Tools
Figma
Photoshop
The challenge
Design a web software to simplify the data submission process for the community legal advocates and help the law foundation BC analyze the data.
Result
In 9 weeks of the project time, I presented a user research report to our client, crafted a design system with a visual design guide, and created a set of hi-fi mockups with animation.
![Extracy design system](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1224,h=1008,fit=crop/AGBovGnGQZIBMbxR/extracy-design-system-mjEkMblRr4S3nJ0x.png)
![Extracy design system](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=382,h=315,fit=crop/AGBovGnGQZIBMbxR/extracy-design-system-mjEkMblRr4S3nJ0x.png)
Extracy design system
Design goals
Key design objectives
![key objective 1: View & submit data on a centralized platform](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=392,h=368,fit=crop/AGBovGnGQZIBMbxR/key-design-objective-1-Y4L6G5OBxLcygyZJ.png)
![key objective 1: View & submit data on a centralized platform](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=382,h=359,fit=crop/AGBovGnGQZIBMbxR/key-design-objective-1-Y4L6G5OBxLcygyZJ.png)
![Key objective 2: Visualize existing & new data to identify hidden patterns](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=392,h=368,fit=crop/AGBovGnGQZIBMbxR/key-design-objective-2-m7Vgrv8x5gikM9a8.png)
![Key objective 2: Visualize existing & new data to identify hidden patterns](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=382,h=359,fit=crop/AGBovGnGQZIBMbxR/key-design-objective-2-m7Vgrv8x5gikM9a8.png)
![key objective 3: Simplify & automate all data processes of the Law Foundation](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=392,h=368,fit=crop/AGBovGnGQZIBMbxR/key-design-objective-3-A0xgyOeZ1Ws4vlaZ.png)
![key objective 3: Simplify & automate all data processes of the Law Foundation](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=382,h=359,fit=crop/AGBovGnGQZIBMbxR/key-design-objective-3-A0xgyOeZ1Ws4vlaZ.png)
How did we come to these 3 key objectives?
I interviewed 5 participants from law backgrounds and summarize 4 main user insights:
Community advocates need to navigate people in trouble through the bureaucracy or professional services;
The limited amount of social workers and community advocates causes higher working pressure and longer working time;
The legal resources around the remote areas and indigenous communities are not as easy to access as in major cities;
There are no suitable tools for advocates to analyze the data.
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1224,h=1072,fit=crop/AGBovGnGQZIBMbxR/extracy-user-research-personas-mv0yEBp4LkiW40KQ.png)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=382,h=335,fit=crop/AGBovGnGQZIBMbxR/extracy-user-research-personas-mv0yEBp4LkiW40KQ.png)
After I finished the persona and user journey maps, I was able to analyze the core user needs for the law foundation and community advocates:
🗨️ the law foundation
View and export the data easily
Automatically process the data to reduce management processes
Analyze the data and see data trends through visualizations
Safety & Confidentiality
Simple Data Showcase
Easy Data Management
🗨️ community advocates
Fill out and Send Forms Easily
Reduce the time they spend sending documents to the Law Foundation
In the future: automatically transform the data they submit into charts
Visuals
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=333,h=296,fit=crop,trim=3.5050167224080266;0;3.5050167224080266;0/AGBovGnGQZIBMbxR/extracy-logo-mk3nZ6Z1VGHJDVb7.png)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=242,h=216,fit=crop,trim=2.414746543778802;0;2.414746543778802;0/AGBovGnGQZIBMbxR/extracy-logo-mk3nZ6Z1VGHJDVb7.png)
Inspired by nature, the logo design adapts the image of a new bud, which means life & hope.
It aligns with the aspiration of the law foundation BC and what community advocates are doing - helping vulnerable groups and creating better communities.
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1224,h=688,fit=crop/AGBovGnGQZIBMbxR/dark-mode-AzG1qKL51XcGVrga.png)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=382,h=215,fit=crop/AGBovGnGQZIBMbxR/dark-mode-AzG1qKL51XcGVrga.png)
Dark theme design
![](https://assets.zyrosite.com/AGBovGnGQZIBMbxR/home-animation---hd-1080p-Ylek3G7gDbh8Epym.gif)
![](https://assets.zyrosite.com/AGBovGnGQZIBMbxR/home-animation---hd-1080p-Ylek3G7gDbh8Epym.gif)
Interaction design: expanding of the navigation bar
Final takeaways
Use different strategies when working with different kinds of clients. The key is to understand what matters to them and what does not. Our clients are from the legal industry and they are pretty detail-driven. So I paid extra attention to the copywriting and kept consulting with the client regarding the language use.