tyler-franta-iusJ25iYu1c-unsplash.jpg

Clio

Hackathon

Asset collector, UX Researcher  |  20 hours (2021)

Designing a digital solution to increase access to legal services through education and simplifying the searching process.

Tools: Figma

Team: Adriane Fong, Arden Clay, Gray Lihou, Khashayar Yo, Silvia Figueira

istockphoto-1181406993-612x612.jpg
luca-bravo-9l_326FISzk-unsplash.jpg
Group 156.png

Discover

Problem space.

To teach the design students to collaborate with a development team, we had a hackathon in partnership with Clio, where we were asked to design and develop a digital solution that would help people have easier access to legal services. Considering the tight schedule for this project, we, as designers, needed to finish our part in just a few hours and hand it off to the developers.

960x0.jpg

Design question.

For this hackathon, our teams were presented with a specific design challenge. We needed to find a way to improve accessibility of legal services, as sometimes it can be too frustrating for regular people who are outside of the legal field.

Defining assumptions.

Firstly, we came up with different assumptions we had about the legal field. Stating assumptions is a great way to understand the risks we take when assuming they are true.

01. Legal issues are confusing and difficult to comprehend for regular people

02. Education would help people develop better legal literacy

03. Having access to similar cases would simplify the process

04. People want to know the outcomes of their legal issues

Exploring current solutions.

Then, each member of our team spent 30 minutes exploring the existing ways how low firms help people simplify access to legal services. That helped us come up with some ideas about what we could build as a solution for the challenge presented.

Research.png

Ideate

Brainstorming.

When ideating the solution we explored different ideas such as:

01. Creating a feature to scan law documentation in order to explain jargon used

02. Feature that matches clients with suitable for them lawyers based on different criteria

03. Self help resources that would educate people about the legal field

After having a discussion with the developers and understanding what was feasible in such a short period of time, we decided to pursue the idea with self-help resources such as podcasts, webinars and blogs to help people develop better legal literacy. Also, the digital solution chosen would help users to look for similar cases to see potential outcomes of the situations they are in. It would also show them a list of lawyers that would be a good fit for them with an option to contact or book a consultation.

Sketching.

With the idea in mind, we started sketching different interface layouts. Then, we voted on the sketches we thought had the most potential and took them to the next step.

Sketch Hack.png

Define

User persona.

Based on the assumptions we had, we created a proto-persona that represents our target user. For this persona, the crucial pain point is difficulty to filter out the information that is helpful in her case from the unrelated one.

Molly.png

Task flow.

Then, we created the final task flow, showing all the actions the user takes and all the pages these actions take them to. In this particular flow, the user searches for previous divorce cases to compare it with their situation. With it, we could finally start developing our high fidelity design.

Flow Hackathon.png

Implement

Style guide.

Since the solution designed needed to be a part of the Clio website, we went with the colours and typography they already have.

Guide3.png

Final prototype.

As a result of the work we'd done, our team created a high fidelity prototype that addresses the challenge presented to us in the beginning of the hackathon.

macbook-pro-stock-mockup-scene@2x.jpeg

Reflect

The design solution.

How does our solution addresses the problem presented:

01. Helps find similar cases, so people can see the possible outcome and know what to expect 

02. Simplifies access with the convenient searching feature

03. Suggests lawyers and law firms that would be a good fit for the user

04. Podcasts and blogs add an educational element to help people develop better legal literacy

Accessibility.

To ensure the accessibility of the product designed meets the required criteria for people with impaired vision, we used Stark Plugin to check the contrast of the colours used.

Accessibility.png

Future thinking.

Our next steps would be testing the prototype with at least 10 users to possibly discover some usability issues we have in the flow. Additionally, we would improve the app's accessibility to ensure that blind and deaf people could use the website. And finally, we would develop a forum feature, where people could share their experience, learn from it and support each other.

Take outs & learnings.

As it was my first hackathon, I'd never had such experience creating something with a team in less than 24 hours. I was extremely lucky with the people I worked with and found this experience very rewarding.

At the very beginning we divided our responsibilities according to our strong sides, and it helped us deliver the product in extremely short time. I learned that communicating is a key, especially when working with developers. As a UX designer, I need to create a feasible product that would be easily buildable by the dev team.

HMW

How might we increase access to, or accessibility of, legal services through education & digital solutions?