top of page
This site was designed with the
.com
website builder. Create your website today.Start Now

EXTRACY

Client: The Law Foundation of British Columbia

​

Role: UI Designer & UX Designer 

​

Part of a team of 6 including: A project manager, 2 developers, an artist and another designer.

​

Category: Data Visualization Web 

 

Year: August 2021

MY RESPONSIBILITIES​

​

  • Create user persona, user Journey, and analyze user pain points;

  • Create product wireframe and design high fidelity prototype;

  • Present product design to the clients and gather feedback weekly;

  • Planning and conduction user testing;

  • Analyzing user feedback and activity, and iterating to enhance the user experience

  • Consulting with clients to understand their goals and explaining research results.

  • Create, maintain and update the product design system and UI library based on clients' requests.

OVERVIEW

​

Access to Justice BC & The Law Foundation of British Columbia aim to use data to identify the unmet needs of their clients in the justice sector and figure out ways to make the data actionable to better reach both existing and new markets. Extracy team is creating a centralized visual data dashboard to aggregate, analyze and visualize the data.

CHALLENGES

 

1- Insufficient sample of target audience - Community Advocates

​

  1. The user research only includes the sponsor and law students from UVIC and UBC that have experience in social work;

  2. Client requested us not to contact their existing clients (Community Advocates);

  3. Our target persona is based on assumptions and iterations directly with the client.

​

​

2- Data Storage & Protection

​

  1. The project has to follow many compliance protocols, including FIPPA;

  2. The data has to be stored in Canada, and the rules are very vague.

​

​

​

​

3- Access Rights & Defining User Privileges

​

  1. Community Advocates can only view their own data;

  2. The sponsor can view and filter data by community advocates

Target audience
Data protection
Access rights

OBJECTIVES

 

The core objectives can be summarized into the following points:

 

  1. Define new data types and adapt old variables to be more usable for visualization;

  2. Standardize and simplify the data input and processing procedures by creating a centralized solution via web platform;

  3. Conduct an analysis of what the existing data is saying about the needs of justice services;

  4. Connect existing data points to demographic data of the districts of British Columbia.

GOAL

​

The goal of the project is to centralize the data gathered conduct an analysis of existing data; identify the needs of the existing users; and figure out how to make the data actionable to reach new demographics and make more informed decisions. This information might help the (community advocates and the Law Foundation) get a better understanding of users of justice services and make more informed decisions.

RESEARCH Summary and preparation

​

​

In any projects, research and preparation play an important role to have a successful discovery. Before starting the discovery phase and creating any plans, I took a series of steps to ensure that I understand client's needs, gather existing documents and all the necessary supporting information. To go through this process, I conducted client and volunteer (Law students) interviews and field studies.

​

I conducted two user interviews sessions with two volunteers from the law area.

Among them, one respondent was a political science graduate from the University of British Columbia with a journalism background. Another one was a law school student at the University of Victoria with a focus on business law.

Key Insights:

 

  1. Community advocates need to navigate people in trouble through the bureaucracy or professional services;

  2. The limited amount of social workers and community advocates causes higher working pressure and longer working time;

  3. The legal resources around the remote areas and indigenous communities are not as easy to access as in major cities;

  4. There are no suitable tools for advocates to analyze the data.

In discovery section, I conducted serious of steps using the information gathered in research and preparation section. 

These steps included:

​​​

  • Story board

  • User Personas

  • User journey maps

  • User needs

STORY BOARD FLOW

STORY BOARD

USER JOURNEY MAP

Yana is a Community

Advocates

she wants to be out there with the people, rather than sitting in front of her desk.

The data they have uploaded can now be viewed with user friendly graph.

After we created the website portal.

They can have motivation from helping people

Share how they help people

The data they have uploaded can now be viewed with user friendly graph.

But still sometimes she wonders if there is a quicker and more direct way to do her job.

She loves her job, she loves helping the others

USER PERSONA 

We created the user persona based on these four important findings and then analyzed the pain points.

Law foundation

Advocates

The Law Foundation

Advocates

user journey map

The Law Foundation

Advocates

user needs

The Law Foundation:

​

  1. View and export the data easily

  2. Automatically process the data to reduce management processes

  3. Analyze the data and see data trends through visualizations

  4. Safety & Confidentiality

  5. Simple Data Showcase

  6. Easy Data Management

Community Advocates:

​

  1. Fill out and Send Forms Easily

  2. Reduce the time they spend sending documents to the Law Foundation

  3. In the future: automatically transform the data they submit into charts

KEY FEATURES

​

I gathered the information in the pre-discovery phase and conducted all the above stages (User needs, User Persona

Story board, User journey maps) key features included:

​

  • View & submit data on a centralized platform;

  • Visualize existing & new data to identify hidden patterns;

  • Simplify & automate all data processes of the Law Foundation.

DESIGN PROCESS

I followed the user-centred design principle. In the discovery phase, I conducted user interviews, competitive analysis, and domain research. In the definition phase, I created personas and user flows to define the problem statement and MVP. In the development phase, I created feature maps, user flows, and mid-fi designs. In the delivery phase, we, as a team, did user testing, designed hi-fi prototypes, and developed the landing page and two dashboards.

These steps included:

​

  • Feature diagram

  • Feature map

  • User flow and interaction

  • Site maps​

  • User experience benchmarking

​

FEATURE DIAGRAM

This diagram demonstrates all the main features the product has to have according to user's needs. I created it in three stages: Login to the dashboard, check and report data, and download data. In each level,  It visually depicts the features of a solution. This diagram helped me to organized the features or add necessary ones. 

FEATURE MAP

After creating the feature diagram, I went deeper to details. Feature maps demonstrates every steps from the landing page to the both Access to Justice and Advocates dashboards.

USER FLOW & INTERACTION

There are two groups of user flows for two types of target users. The user flow & interaction graph shows the main user tasks and how the users will interact with the Extracy web portal (dashboards). Because there are two types of user privileges, the flow for each user is different and the level of access to the data is limited to community advocates. This is the reason why Community Advocates only have access to Overview, New Submission & Settings Pages. With the way the database is built, only the Law Foundation can view the full platform.

SITE MAPS

The task hierarchy graph (site maps) above provides an overview of all the Web Portal’s available features and endpoints. For both advocate and law foundation users, the website starts from the landing page. On the advocate dashboard, they can get access to overview, new submission and settings pages. On the law foundation dashboard, they can get access to overview, view data, visualizations, advocate list and settings pages.

USER EXPERIENCE BENCHMARKING​

​

The UX team researched a set of user-centred metrics developed by Google to measure and evaluate the quality of the user experience. The Heart Framework is designed to help UX teams focus on specific aspects of the user experience they want to improve, as well as identify concrete goals and user experience metrics to gauge success. 

 

​

1. Happiness - find the app helpful, fun, and easy to use 

Customer satisfaction rating for customer support or intercept survey

​

2. Engagement - users enjoy app content and keep engaging with it

​

  • Average session length

  • Goal conversions rate

​

3. Adoption - new users see the value in the product or new feature 

​

4. Retention - users keep coming back to the app complete a key action 

​

5. Task success - users complete their goals quickly and easily 

​

  • Exit Rate to measure which pages have the highest exit and find out why 

  • Average time to complete critical tasks

HIGH-FIDELITY PROTOTYPE

LAW FOUNDATION DASHBOARD

ADVOCATE DASHBOARD

USER TEST

A/B TESTING

I provided three different types of user menu to test which one works better and also eliminate all the guesswork. In my opinion, this is the best method of user testing as users never get distracted with anything else. 

ACTIONABLE CHANGES USER TEST RESUL

Problem: Users may log out accidentally

Solution: Add a confirmation pop-up when they click on log out

1

Problem: Users may feel confused when they saw the notification after they verify advocate sign-up request

Solution: Use proper icon and text to help user understand their action succeeded

2

Problem: Users may click on the start submission before they select the court type, program & date

Solution: Make the start submission unclickable unless the users select all information required

3

FINAL PRODUCT

Justice League

bottom of page