Website Layout and Wireframes

PROBLEM: Ask the Lawyer website is a resource website for consumers needing legal information or legal help. Client wanted website to be revamped, with clean, organized simple visuals.

My analysis of website or areas that needed work:

  • information organization
  • simplification of visuals (colors, icons, etc.)



Role: Sole person in charge of re-designing website main menu pages (six pages, except AsktheLawyer Now contact page).

Tools Used: Photoshop, Adobe XD, Loom (for video)

Goal: Organize website information in visually pleasing manner.

These were a few points I would work on, in cleaning up the website:

  • Simplify site architecture by reducing number of search bars (site currently has 7 search bars and buttons total). I want to reduce to one main search bar and one search filter.
  • If possible by myself or with client’s developer, work on creating a search function to include smart search function.
  • Create a design system since there are many design inconsistencies in the website: example–one page has breadcrumb and not on others, colors differences from one page to another, more white space is needed.

Current Website home page evaluation:

home page with too many search function: 1 search bar, 2 search buttons

On home page, I found:

  • 1 search bar and 2 search buttons on home page,
  • 2 forms: 1 on home page and 1 as hover/pop up in navigation bar.
  • as many as 6 colors (in site evaluation of main navigation pages, I found 25 colors), 5 different fonts.
  • content areas needs re-organizing and focus.

Proposed 3 sets of Wireframe Layouts

artboard wireframe layouts of different pages of webite and color swatches (based on Material Design color palette)

Sample prototype of wireframes

video showing wireframe prototype, set 1 of 3 wireframe layouts.

I created a video to show 1 of 3 sets of the  wireframe layouts. Client wanted to keep the pop-out contact button  from current website.

The pop up modal is based on cursor movement and not click based.

Website Re-Design Mock-Up
current home page
re-designed mock up home page with simple Hero image

Home Page (latest iteration)

  • Added a single global search bar at the top that can expand to save header space, and it can be used on all pages.
  • Single google like search bar across hero image paired with simple image to help page visitor focus on the single search bar. Plus if you are stressed out and need legal advice/info. you can feel relaxed and hopeful looking at the image.
  • Image hierarchy (large and small) to allow for focus on the page, since client needed 6 small images on the homepage.
    Since a form is located under CONTACT US, I removed the extra form.

More side by side current vs. re-designed mock up page comparison

current lawyer listing page
re-designed lawyer listing mock-up page

Comparison of current lawyer listing page and re-designed lawyer listing mock-up:

  • Color use is considered to match site logo. Here, color choice is used to indicate different law practice areas, membership level or promotion level.
  • Added global search filter. Since website is content heavy, it will save user a lot of time and frustration, in searching for information. Currently, if a user decides to search for lawyers, he/she has to go back to lawyer page and perform a search on that page or the home page.
  • No drop-down list for law practice areas because there are too many practice areas listing. Tags are quick visual selection option.
close up look at Refine Search filter

Another comparison…

current legal practice area page has vertical scroll on left column and static (no scroll) on right column.
Articles videos combo Layout_Page_09
proposed changes to page: use of icons, no menu scrolls

Current legal practice area page employs a menu scroll on the left column and a static right vertical column of articles sections.

For example:  Left column has a vertical scroll showing the page visitor different law practice areas.

Problem: Cursor scrolls too fast and user has slow the scroll before clicking.

Re-design of this page:

  • Removed Scroll selection since it keeps scrolling up or down. As a user, it was frustrating to have to scroll up and down to see what practice areas are available.
  • flat layout with all practice areas readily accessible allows user to get macro view of this page and select what is of interest.
  • used icons to break up amount of text with large image.
  • removed marble decoration background.
    refine search filter is added and accessible on all pages, except main page and contact page.

All the wireframe layouts were sent to client.

Scroll to Top