Kelsey
UX/UI Designer
Made with

Law Office Redesign

From Initial Research to Development

Project Summary

After initial interviews with the main stakeholder, lawyer Silvio Amico, and secondary/competitor research, our team of three created a website and mobile redesign to development completion.

Our goal was to improve the website with an updated feel to better represent Silvio, while maintaining the information architecture for SEO purposes.

Timeline & Tools

3 weeks, Figma & Webflow

Role

Secondary/Competitor Research, Personas, High Fidelity Mockups, Client Presentation

Challenge

Working with a team to simplify the design and make it user centric. The next step was to create a cohesive export to get it ready for a web developer.

Solution

Identified user needs and changed copy to highlight stakeholder strengths that met user needs. Complete website redesign from research to development.

Process

Empathize

  • Secondary and Competitor Research

  • Personas

  • How Might We's

Ideation

  • Sketches

  • Wireframes

  • Moodboard

  • Style Guide

Design

  • High Fidelity Mockups

  • Client Presentation

  • Web Development

Check out below for the entire set of high fidelity mockups

Check out below for the entire set of high fidelity mockups

Law Office Redesign

Initial Website

The initial website design had little imagery, poor user experience, and lacked personality.

Empathize

Secondary Research

  • Since family law matters are intricate, having a trusted legal professional can help you ensure your loved ones are represented and protected

  • While there are some family lawyers who have developed a particular specialty, most have broad expertise

  • People in need of legal advice about may hesitate to contact an attorney because of the cost involved, so it is important they have a level of trust

  • Family law is state-specific

Initial Conversations with Main Stakeholder

Our team additionally spoke with Silvio, the main stakeholder, to uncover what his goal for the redesign was and to gain the trust of potential new clients.

These competitors provided the basis of our inspiration

These competitors provided the basis of our inspiration

Competitor Research - Florida Family Law Firms

Orshan Spann & Fernandez-Mesa

  • Consistent Color Scheme throughout

  • Each category expanded on

  • Clean look

Davis Smith & Jean LLC

  • Clear call to actions

  • Clickable practice areas that are visually appealing

  • More friendly about us page

Thomas McDonald

  • Eye-catching photos

  • Includes quotes

  • Explains each area of expertise

Personas

To help cater to Silvio's target audience, our team developed three unique personas that might be clients of Silvio's law firm. We decided a gender-neutral approach was best, as we did not interview actual users and didn't have specific demographics, in order to avoid any bias.

Law Office Redesign

Tatum Greer

About

  • 59 year old History Professor at University of Miami

  • Married with children/grandchildren

  • Lives in Miami, FL

Personality

  • Wants to be set up for retirement for security

  • Prepared and likes to have things organized

Goals

  • Obtain a will

  • Find a cost-effective lawyer whose trustworthy

Frustrations

  • Not being able to find information easily on slow and cluttered sites with long paragraphs

UX Needs

  • Predictable sense of order

  • Clear navigation and interactions

  • Feels professional and approachable

  • Clear contrast

Law Office Redesign

Quinn Sawyer

About

  • 38 year old Retail Store Manager

  • Divorced with 2 children

  • Lives in Miami, FL

Personality

  • Single parent who wants to provide their best for their kids

  • Stressed over custody proceedings

Goals

  • Find information about family law and possible attorneys

Frustrations

  • Not being able to set up quick consultations and absorbing too much information

UX Needs

  • Short and precise descriptions of services offered

  • Multiple contact options

  • Clear navigation

Law Office Redesign

Sam Cooper

About

  • 27 year old potential homeowner

  • Single

  • Lives in suburbs of Miami, FL

Personality

  • Optimistic and hopeful about getting own home

  • Diligent and responsible

Goals

  • Purchase a home

  • Get advice on financial commitment

  • Understand reviewing contract process

Frustrations

  • As a younger person, Sam has never dealt with real estate before so they are clueless to the process

UX Needs

  • Understand the lawyer they are working with

  • A site that feels professional, eye catching, and trustworthy

  • Clearly find real estate/contract information

How Might We's (HMW's)

We developed HMWs in order to bring the needs to the personas to life in connection with Silvio's business needs.

“How Might We Redesign a Law Office Website..."

...so that it has a more unique and personalized feel/branding to attract legal clients?” 

...to make those searching for a lawyer feel confident to contact the office?” 

...to increase awareness of Silvio Amico’s reputation and expertise in listed practice areas?” 

...to increase traffic and inspire visitors to fill out the contact us form?” 

...to create an experience for users that is trustworthy, compassionate, knowledgeable, and professional?”

Ideation

Sketches

After gathering images of inspiration from clean sites we wanted to model ours after, we set to work sketching out ideas, to brainstorm, and facilitate a more cohesive look, keeping in mind the user needs.

Wireframes

We developed wireframes to see how we would position the information and how the site would actually work, in web and mobile form.

Law Office Redesign

Moodboard

To start developing for the high fidelity, our team needed to make sure we were on the same page about what the imagery, colors, vibe, and UI would look like.

Style Guide

To help us choose our font, colors, grid and logo, we developed a style guide. We wanted colors that would have a professional feel, still account for accessibility, and breathe some life into the website.

Design

High Fidelity Mockups

After going over logistics, we could enter the high fidelity mockup stage. We wanted an accessible, professional feel that would work responsively on web and mobile. Our biggest factor to keep in mind was how to prepare each frame for export, as we would be working with a developer to bring the site to life.

Law Office Redesign

From High Fidelity to Developed Website

We had meetings with the stakeholders to validate that the design met the business needs. Once that was approved, we handed it off to the development team.

We prepared the assets for export and collaborated with the developer to ensure that the site met the constraints of Webflow.

After creating high fidelity mockups, it was necessary to go through every frame, review that everything was labeled and framed correctly to make it easy for the developer to export.

We are currently actively working with a developer to wrap up the process.

Key Takeaways

I learned how important it is to work with a team. After such an extensive collaboration, it was imperative that we had constant meetings and communication through our Slack channel, to ensure everyone was on the same page.

I also learned the importance of working with a developer, how everything needs to be properly organized - we did this by bringing out the images to ensure that the developer could easily find them.

We are currently in the process of getting the website developed.

Had I been able to, I would have done A/B testing to compare which site garnered a easier process for users and resulted in more consultations.

Additionally, I would have liked to have spent time researching copy decisions with a UX Writer to actually test final or near-final copy alongside the design. As the website is pretty text-heavy, this would ensure that our users were getting the best experience possible.