Product Designer

samuelhgflax@gmail.com

Gregos Vila LLC

An NYC law firm looking for a website re-design to embody their professionalism

Project Brief

01

Timeline

2 weeks, April 2022

Role

UX, UI, web developer

Project Type

Existing webpage to new webpage.

Challenge

A local law firm had a generic, unfriendly webpage that needed an overhaul.

Project Outline

1. Job Story
2. Comparative analysis
3. Prioritization of features
4. UI development
5. Sketching / layout

original website appearance

The original site

original website appearance

The finished site

Approach

02

Initial Research

The client is a NYC-based law firm specializing in workers' compensation suits. They are a new firm, and had their site built on top of a template.
I had a meeting with the client - they detailed a need for a site that was modern, professional, and useable. Doing my own research, I identified a need to give space to the content, and easily navigable.

Angela persona

A lo-fi blocking of the original site

Annotated Findings

03

  1. I need to streamline the content and form of the header, saving space and reducing cognitive load.
  2. I will refine the hero text, giving it excellent readability while establishing character. 
  3. I will create a call to action button, giving the user a handrail for the primary action of the site (contact).
  4. I will standardize fonts and colors, establishing a strong hierarchy for easy navigation.
Angela persona

Annotated original site

Approach

04

Priority of Features

Using the Moscow Method, I created a prioritization of features for my design sprint. 

I can work on my essentials, like accessibility, first.
I can then tackle easy wins, like content hierarchy.
Finally, I have stretch goals, like re-writing the copy. 

With a clear roadmap, I can work quickly and efficiently. 

Angela persona

A Moscow Priority Chart

Comparative Analysis

05

I researched and compiled a list of direct (NYC law firm) websites, as well as indirect (out of state law firm, professional companies) websites. I then built lo-fi screens of each, to isolate their  structural strengths.

  1. Typography speaks. A strong hero section with a mission statement and white space were key to the best sites. 
  2. A clean header was much easier to navigate. Too many options can lead to choice paralysis.
  3. call to action button was the first place my eye went on all pages, even in the wireframes. 
  4. one page approach was much more mobile and low data friendly. I should strive to navigate away from the home page as much as possible.

All annotated comparative research screens

Lo-fi Screen

06

Using the lessons of structure from my comparative analysis and my priorities from the Moscow chart, I made a lo-fi mockup of the front page.

  1. I rebuilt the header to take away superfluous information, and decrease the size overall.
  2. I built a typographic heading, which conveys the mission while catching the eye. I also set up the 2 column format I use for the rest of the page.
  3. I revised the user flow, stacking the sections in order of importance.
  4. I built call to action buttons, directing the user to the most important functions of the site.
Angela persona

Landing screen annotated

Angela persona

Landing screen, scrolled down

Style Tile

07

I built a hierarchy of color and typography that I would follow for my hi-fi screens.

I was able to achieve a clear hierarchy of space by establishing order to the color and type. As a result, I could increase whitespace while removing unnecessary borders and boxes

Angela persona

Hi-fi Screen

08

I applied my style decisions to my lo-fi screens to build a master mockup of the website.

  1. The header is one bar, smaller in dimension and less busy.
  2. The hero typography is clean, readable, and memorable. It immediately establishes the message the client wants to convey.
  3. The call to action button is present, using the reserved secondary color. Hover states are subtle yet functional.
  4. The site is not divided by boxes and lines, but strong type and color hierarchy. This opens up the site while keeping sections very consistent. 
Angela persona

Landing screen annotated

Angela persona

Landing screen, scrolled down

Feedback

09

This was a new type of design challenge for me, because I was not in contact with the client during the design phase. I had a meeting with the client, then went through the entire design process. I followed up with a detailed and guided presentation of the work I had done, and hoped I had performed to their expectations.

The main piece of feedback: more images. I had removed the hero and footer images in favor of solid color and strong typography. However, the client wanted some more warmth and personal touch. I implemented hover states and filters for the images in a way that prioritized accessibility.

Angela persona

Final Thoughts

10

Actionable Insight

I would like to present a choice of style tiles to the client before starting the sprint. The client did not like the hero font I chose, and finding a new one to present to the client was a new challenge at such a late stage of the design process.

I would have liked to do direct user research for this project. I tested with the client, and with a friend, but did not have access to a returning user to observe their patterns. 

Further Goals

I would like to work further with the client in a couple of areas. A lot of competitive law firms have chatbots, and I would like to research their market use and benefits to promote this to the client.

I would have like to create a custom animation for the contact form. The client is striving for professionalism, but I think a subtle animation would confirm that the user’s message has been received and is being cared for. 

Angela persona