Check out below for the entire set of high fidelity mockups
Law Office Redesign
From Initial Research to Development
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
Secondary/Competitor Research, Personas, High Fidelity Mockups, Client Presentation
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.
Identified user needs and changed copy to highlight stakeholder strengths that met user needs. Complete website redesign from research to development.
Secondary and Competitor Research
How Might We's
High Fidelity Mockups
The initial website design had little imagery, poor user experience, and lacked personality.
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.
Competitor Research - Florida Family Law Firms
Orshan Spann & Fernandez-Mesa
Consistent Color Scheme throughout
Each category expanded on
Davis Smith & Jean LLC
Clear call to actions
Clickable practice areas that are visually appealing
More friendly about us page
Explains each area of expertise
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.
59 year old History Professor at University of Miami
Married with children/grandchildren
Lives in Miami, FL
Wants to be set up for retirement for security
Prepared and likes to have things organized
Obtain a will
Find a cost-effective lawyer whose trustworthy
Not being able to find information easily on slow and cluttered sites with long paragraphs
Predictable sense of order
Clear navigation and interactions
Feels professional and approachable
38 year old Retail Store Manager
Divorced with 2 children
Lives in Miami, FL
Single parent who wants to provide their best for their kids
Stressed over custody proceedings
Find information about family law and possible attorneys
Not being able to set up quick consultations and absorbing too much information
Short and precise descriptions of services offered
Multiple contact options
27 year old potential homeowner
Lives in suburbs of Miami, FL
Optimistic and hopeful about getting own home
Diligent and responsible
Purchase a home
Get advice on financial commitment
Understand reviewing contract process
As a younger person, Sam has never dealt with real estate before so they are clueless to the process
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?”
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.
We developed wireframes to see how we would position the information and how the site would actually work, in web and mobile form.
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.
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.
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.
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.
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.