Menendez Law Firm

Redesign their Web site with a focus on accessibility for their users.

Target

Redesign the Menendez Law Fim Web Page with a better user flow, including the relevant and reliable information that the firm requires based on the services it offers; as well as easy access to capture potential customers.

Position

Product Designer

User Research, Interaction, Visual Design, Prototyping and Testing.

Challenge

Create a website that is accessible, since their average customer is 50+, so they must focus on making it understandable, easy to manage and highly responsive. Most users interact with the site from their computers, so the design started for desktop and ended up adapting to mobile.

Project Timeframe

2 months

Only design area without development. (pending, in responsibility of the client, but with my support participation).

Solution

I worked on the project for Menendez Law Firm as a Product Designer, where the goal was to redesign their existing website, to update it and implement the right elements for their clients, as it was outdated and difficult to use.
Most of their consumers interacted from the computer, so the right thing to do was to start with Desktop-First Design and then adapt it to mobile versions, of course always keeping in mind the user and above all that it should be easy to use, not only for the elderly, but for any user with temporary or permanent disabilities.

Process

Knowing the User

I made an investigation within the firm with reference to the cases of the last year, and this was the information I obtained:

The age of the users ranges from 43 to 91 years old.
77.27% of the clients know how to use a computer.
23.73% need a family member or friend to help them with technology issues.
The service with the highest demand is Estate Planning, followed by Tax Defense.

The following information was obtained from statistics from U.S. institutions, since the firm is located in Florida, it was

important to understand the consumer.

Currently there is a higher growth of people between 33-54 years old who are interested in doing Estate Planning.
Women are more motivated to plan when a loved one passes away.
Men are more motivated to plan when they retire.

User Interviews

I interviewed some of the Firm's current clients and several prospects to understand their needs, their Pain-points and how I could improve their experience,

Most users don't plan ahead because of procrastination, but the main reason has been that their economy has been affected by factors such as the pandemic, inflation and political situations.
They feel it is complicated to find someone they trust because the web pages are difficult to understand and they need the help of someone younger to use them.
They cannot find the information they need to know whether or not they can do Estate Planning.

After obtaining this data, I was able to make the following empathy map, and the proto-personas.

Empathy Map

User Personas

The User Personas are inspired by the tastes, needs and personal experiences of the people interviewed.

Opportunity Areas

These are the areas of opportunity that were in the existing Web Page and I modernized in the new design.

This is the view we have when we enter the web page from Desktop and we can see that there is the phone number in a button, another button on the top right side, a pop up for contact and behind the pop up a contact form.
The navigation bar is so big that you can hardly see the hero image.
The difference in distance between the left and right margin shows asymmetry.

Continuing with the Desktop version, the sections have different sizes and the text is not well distributed; where there is more information, the area is smaller.
Lack of proportion. As I mentioned, we see areas too large or too small that do not go according to the required measures.
Too many visual elements, one image after another makes the objective confusing and the important thing is lost.

Now, with the mobile version we see the same areas of opportunity such as repetitive icons, too big typography, inconsistent sections with the size, etc.

Information Architecture

The information architecture was planned so that users can find the content in a simple and organized way.

Paper Wireframes

The Wireframes with pen and paper. This gave me a better idea of how I wanted to design this platform and the information I expected to have on it, as well as easy access to the elements.

Wireframes de Baja Fidelidad

After the Digital Wireframes I carried out the Low Fidelity Wireframes with which I tested the basic operation of the application.

Note that the Wireframes are Desktop and Mobile size so tests were performed on both versions.

High Fidelity Mockups

The Mockups are the result of the Information Architecture, the Low Fidelity Wireframes and the Design Elements united in this product.
Desktop and Mobile version.

Design Elements

In this section you will find the design elements I made for the application.

Colors

Typography

Buttons

Iconography

Cards

Inputs

Prototype Preview

These are all the interactions that were made for the prototype made with Figma for Desktop and Mobile version.

High Fidelity Prototype

This High Fidelity Prototype is the result of the High Fidelity Mockups, as well as the interactions that were added and it is possible to interact with this prototype made with Figma for Desktop and Mobile.

Usability Testing

The main focus when creating this design is to make the Website easy to use for the elderly; so I modified each Interaction Element, increasing its size and separation to facilitate the selection; I also added buttons that have a clear function and/or direction.
In the case of the Desktop version, the elements interact in Hover; and in the Mobile version, I avoided carousels and all the components are in sight making the User Flow clearer.

The usability test of the product was done with several users in which they had an estimated time of 20 minutes to complete the following tasks:

Make Contact with the Firm.
Find the Learning Center.
Find the appropriate area of what they were looking for.

At the end of this test it was concluded that:

The icons had to have the titles of what they meant in order to identify them.

Before

After

I designed the Menu with a button that included the name and icon, making it easy to identify.

Before

After

The contact form at the end avoids fatigue when navigating the page, and directs the prospect towards the goal of becoming a customer.

Before

After

Learning

Working on this project has been a challenging and extremely rewarding experience. We take for granted that certain icons or animations are intuitive and even obvious to use, but we often leave out the elderly for whom this is a novelty. The total focus of this work was on 50+ people; I really enjoyed talking to them and understood how big and overwhelming they see technology.
My biggest goal was to show that the website doesn't have to be inaccessible to some generations and I did everything it takes to deliver a product that makes them feel welcome and that everything has been thought out for them and their comfort.

The biggest learning I had was:

Never take anything for granted: Believing that icons, animations, etc. are obvious because we know it is a big mistake as we must keep in mind that the user we are designing for probably does not have the same experience in this field; so we must create a product that is easier to use, where we guide them through the hierarchy and precise instructions.
Putting ourselves in the user's shoes: I believe that when we work on a project where accessibility is the main focus, the starting point is not our knowledge or mastery of the technological world, but empathy; we must talk to the user, understand them and above all see and experience how they do it to be able to understand the obstacles that limit them and reduce them, delivering an affordable application.
Colors are also part of accessibility: Understand that we must balance the colors, even if they are the ones that the company that hired us uses as distinctive; we must know how to use them wisely to demonstrate hierarchy, importance and consistency.
Likewise, it is essential not to abuse bright colors that are overwhelming, as this will make it easier for the user to continue browsing our page, and will improve their overall experience.

I hope you enjoyed this project as much as I did, thank you for coming this far with me!