SMG

February 27, 2016 11:14 pm

Overview


The Problem

Add a portfolio and careers page that was exciting to visitors. The portfolio needed multiple carousels displaying client logos, and it was a challenge to provide a high range of contrast between the site colors, typography, photography, and client logos. The career page needed to show the open positions and a lot of data about the company that could be easily managed and altered by non-technical site admins. Both pages were development challenges, relying on WordPress's custom post types and data-attributes to manipulate the data.

The Solution

Experience Page
  • Put a gradient over the photos of each section so that the white typography was clearly visible.
  • The typography also gained text shadows to increase legibility.
  • The logos were sharpened and made large enough to be viewed.
  • The mobile version removed the carousels and showed static, responsive logos. To make things easy, I repurposed the background images to be header areas of each section, changed all text to be a dark blue, and put both the text and logos on a white background for maximum contrast.
Career Page
  • Custom fields. Lots of them. I also added handy features such as a default message when no jobs are available. Instead of a blank area, it contains a message saying how the company is always scoping for new talent and gives the user friendly instructions to e-mail the hiring manager.

The Process

For both pages, I wrote down the needs and requirements for each page, drew up wireframes, and designed them in Photoshop. The experience page is extremely colorful and I had challenges having multiple sliders, and getting them to work on mobile. Darkening the photos and adding gradients were the easiest solutions to break up the text and images so it could be easily read. Later I added text shadows. I tried to use white logos since they provided a nice contrast on all of the backgrounds, but some of the clients didn't want their logo to be white. I used a plug-in for the carousel and used data-attributes combined with JavaScript to display different logos on mobile devices. The careers page was (is) a nightmare to develop. Still a work in progress.

The Impact

No idea. I never see the data. It looks pretty though?

Breakdown


Breakdown coming soon! Redesigning the corporate website is always fun, right?