Date: 2015
My role: Web Designer
Click to check out the website live!
Background: An immigration-law firm needed a mobile-friendly refreshed website.
Goal: Created a custom responsive Wordpress template for them so that they could update the content more easily in the future.
Process: The team was a developer (Allxie Cleary) and myself - we assessed the old website for what wasn’t working, talked to the clients about what kinds of things they wanted, and then I built mockups in Sketch. Once we had reviewed the mockups and gotten the clients’ approval, Allxie built the custom template in Wordpress. I also contributed a little bit to the front-end code.
Result: The clients were very satisfied with the resulting template and website. Unfortunately back then I did not think to gather success metrics.
The site 2014, before our re-design. Taken through https://web.archive.org.
The problems: not responsive, outdated-feeling UI, several confusing layers of navigation (top level, mid level, and footer), and a lot of similar-enough pages that could be categorized into one page.
The updated landing page has fewer top-level navigation items - all previous items that were related to their services can now be found under “services”.
To refresh the feeling of the site, we went with a full-page here and an overlay of the main landing quote (this was 2015, but screenshots taken in 2018 or so). We wanted to make the site feel less text-heavy so it wasn’t so overwhelming, and thus shortened the original Obama quote.
Below are two of the main mockups I made during the iteration process. I will talk through each one a little bit.
This was my initial iteration. I moved most of the Jackson-Hertosgs “about” info to the landing page so that users would not need to navigate away from the front page in order to find that information.
I used colorful blocks to break up the information in a more digestible way, and would also break down easily for mobile-responsiveness.
I wanted to highlight the actual people working at the firm using their headshots. Their clients are mainly immigrants, and the immigration process is really scary and daunting. I hoped that showing who they would be working with would help them to feel more at ease.
My second iteration, after a round of feedback and also technical scoping discussions.
After some feedback about priorities and technical discussions with the developer, the initial blocks I had created in the 1st iteration were replaced with several standalone sections and/or merged into the footer section.
The pictures I chose I had hoped would make the firm feel more human and less corporate - and that this would encourage more connection with the firm.
(above)
The 2014 version of the request consultation form had LOTS of field inputs, and felt very overwhelming. It also asks the user to do the correct formatting, instead of just knowing how to take the input and turn it into the correct format. It also had some funky input bugs - check out “Country of origin” for one example! It’s a date input!
Our new consultation request form breaks up the field inputs into 3 separate sections. The inputs are also changed to better reflect the type of information the user needs to enter. Instead of asking the user for the phone number in the correct format, for example, it encourages it through three separate sections that would be responsive to the numbers inputted.
I’d of course do a few things differently at this point - like moving the menu hamburger all the way to the right so it’s easier to click on.
The old website was not mobile responsive (but unfortunately I couldn’t find a screenshot of it)
The larger inputs in the form provide an easier tapping experience on mobile
Below are some highlights of specific pages
All the available services were listed under the “services” page.
Several of the background images for those service sections are actually pictures I took - the ones for “US Immigration”, “Travel”, “I-9 Compliance”, and “Immigrant Investors”
The most recent news item is featured in full (or, whatever news item you clicked on) and the archive is directly underneath it, sorted by year. It was important for all the news articles to be available, and sorted, and also not be too overwhelming on the page. So, we went with an accordion so we could collapse whatever wasn’t active.