Background

LA Rights Law Office is a small immigration law office in Los Angeles that was recently founded in the last year. They requested a redesign of their current website to focus on improving their SEO and conversion to increase their business. The office was startd by lawyer, Deniece, who recently moved to Los Angeles from Colorado. A native of Los Angeles, she is familiar with the area and has always wanted to use her law degree to better her home city. She gave me full creative license to make whatever changes I felt necessary to the brand, visual design, and code. So I embarked on a mission to overhaul her website and web presence.

LA Rights Website

OBJECTIVES

  • Improve SEO
  • Increase conversion
  • Update visual design

Research

I started the research phase by asking Deniece questions about her business goals, vision, and clientele. I learned that her target audience is mostly non-English speaking and their priorities in finding a lawyer are cost and trust. I then performed competitive analysis to look at competitors' information architecture, interaction, and visual design. Some of my key findings were:

  • A lot of text: I saw several heavy amounts of text with little white space and no separation into digestible chunks.
  • Bold colors and heavy use of color: I saw a lot of bold shades of blue, yellow, and orange and used frequently throughout the site. Often times, these were coupled with bold text and felt very in-my-face and a bit off-putting.
  • With all the information and visual chatter, it was easy to get lost on the site; a stark contrast to sites with clear, obvious call-to-actions.
  • Navigation bars sometimes were distracting rather than guiding when there were more than 5 or 6 items plus phone numbers and other CTAs.
  • "About Us" seemed to be the most popular title for the page describing the law office or attorney.
  • Most sites included a "Contact" item in the navigation as well.
  • The other navigaiton items were usually services or types of law practiced.

PERSONAS

I focused on the following main persona for this project based on the information about the clientele.

persona

Interaction Design

USER FLOWS

I created these basic user flows starting with the methods users would use to find LA Rights and ending with contacting/visiting/calling the office.

userflows

WIREFRAMES

I created the following mobile and desktop wireframes in Sketch. I started with mobile and then expanded to desktop. My goal with both was to provide a very clear path to contacting the office or finding more information.

MOBILE

The most challenging page was the Services section. I decided to use progressive disclosure in the event the user isn't sure what they need so the Services home page focuses on showing all the options. When the user expands one of the options, it shows a brief explanation of what that service is. If they want more detailed information, they can then go to a full page dedicated to that service.

Click to open in a new tab mobile-wireframes
DESKTOP

The main challenge for the desktop design was the information architecture and visual design. I wanted to make the site visually appealing while also efficiently conveying the right information to get the user to convert. Because there was a lot of text to convey, I didn't want the user to get turned away by it. So I focused on readability and hierarchy.

Click to open in a new tab desktop-wireframes

Visual Design

The descriptive words we used for branding and visual design inspiration were trustworthy, professional, inviting, and strong. We ended up choosing the final style tile below.

style-tile

Conclusion

For the final designs, I kept the descriptive words in mind constantly checking the design against them. I also made sure the site would be easy to navigate and digest particularly for someone whose native language is not English and who may not be technically-savvy.