America's Test Kitchen

Overview

America's Test Kitchen (ATK) is a media company that produces cookbooks, magazines, websites, and television shows, providing recipes and equipment reviews. Their mission is "to develop the absolute best recipes for all of your favorite foods" through extensive testing.

ATK was growing significantly, and was looking to fill several recently-created positions, many of them tech-focused. But their web site was very dated, and management was concerned that this was discouraging potential applicants from applying. They wanted to position themselves as a forward-thinking, technologically-savvy, and exciting place to work, and needed their website to reflect this. I worked with a team of three others to completely redesign and develop the Careers page, which would tell the story of life inside ATK, and invite prospects to apply for a job, and the About Us page, which describes the company's mission, introduces various members of the ATK team, and outlines their product offerings. The following details my contribution to the project.

Gathering Requirements

Management, not being designers, was not especially articulate about what they were looking for. But my team was brought in to help them realize their vision, even if it wasn't yet a clear one. I began by conducting competitor analysis on forward-thinking, desirable companies to work for (a fellow team member determined which companies fit this description by polling Boston job seekers looking to work in the tech industry), including One Technologies, Huge, Uber, Fresh Tilled Soil, Lounge Lizard, and Spotify. For each of these companies, I evaluated their Jobs/Careers and About pages in order to ensure that my proposed designs would adhere to current industry standards, and be in keeping with what job seekers might find on other modern career sites.

Careers Page

The existing Careers page was a wall of text, and the few images and videos on the page were small thumbnails that opened new tabs to display full-sized images, rather than embedding them within the page. Inundating a user's browser with several new tabs is a bad user experience, and, additionally, this layout did little to showcase ATK's unique work environment and culture.

ATK Original Jobs Page — Original Jobs Page

I identified several common themes from my research of other company's sites, which informed the first iteration of my redesign:

Include a clear link to "open positions" at the top of the page, rather than requiring the user to scroll to the bottom of the page in search of them. Consider putting the actual open positions on a separate page.
Use a lot less copy/text, and more, larger images. Consider a hero image or, better yet, video, to quickly convey what it's like to work at the company.
Include testimonials from current employees.
There's no need to include a description of what ATK does on the Careers page—this information can be put elsewhere, and will be of interest to people other than job seekers, so it’s not really a good place for it anyway. It's better suited for the About page, which should be linked to from the Careers page.
Create a logical flow that propels the user down the page as the case for working at the company is progressively built.
The site should be responsive and optimized for mobile devies.

My first design incorporated these findings as follows:

America's Test Kitchen Proposed Jobs Page v1 — Proposed ATK Jobs Page version 1 **(Click to view full design)**

We presented this basic wireframe to ATK staff, got feedback on the design from users (again, Boston-based job seekers looking to work in the tech industry), and incorporated suggestions from both groups into the next iteration.

Testimonials were initially collapsed into a carousel, rather than stacked on top of each other. But after further research, I removed this feature due to usability issues that arise from carousels—they're frequently ignored, and, more importantly, present accessibility problems.
The order of "employee benefits" and "perks" sections was reversed. We found that the perks were more interesting than the benefits to potential job seekers, and needed more explanation. Job seekers assumed that they would be offered benefits, so there was no need to describe them in detail at this point—just a brief list was sufficient.
A more consistent style was adopted. Typography was selected, photos were added, and a graphic representing each perk was inserted to increase visual variation, and keep the site consistent with current web design trends.
Social media links were added.

America's Test Kitchen Proposed Jobs Page v2 — Proposed ATK Jobs Page version 2 **(Click to view full design)**

This design was approved by the ATK team, with just a few formatting and cosmetic changes made later to keep the page consistent with the rest of the site.

I also proposed creating a background video to give potential applicants a sense of just how unique a work environment ATK offers. Because ATK produces television shows, they have vast archives of professionally-shot video, and I was given access to some of it. I then edited together a brief video (seen playing at the top of this page) which, after several rounds of re-edits, everyone agreed successfully conveyed the unique energy of the place.

About Page

Like the "Careers" page, the existing "About Us" page looked quite dated, and wasn't mobile friendly:

America's Test Kitchen Original About Us Page — Original About Us Page

The page described ATK and its mission, and outlined its products. The updated page needed to add information about the executive staff, news items about ATK, social media information, press information, contact/support information, sponsorship contacts, affiliate program information, a newsletter signup, and a link to the Jobs page.

The first version of my design included these additional elements, and attempted to capture the feel of other tech companies' Jobs pages, in keeping with the goal of attracting high-quality job applicants:

Upon review of the design and user testing we found:

A link to the Careers site in the middle of the body of the page felt random and out of place to users, as did the newsletter signup form. The Careers link was moved to the top of the page, and the newsletter signup was removed altogether.
The "view more" button (which expands to show the entire executive staff when clicked) gave short shrift to the staff who did not appear “above the break,” and the button should be gotten rid of.
A feature was added that displayed full staff bios as an overlay when clicked.
The carousel for news articles should be removed (as mentioned above, carousels are often disregarded by users). Additionally, ATK had no inclination to commit staff time to updating this feature, so it would become quickly outdated.
"Back to Top" links were removed, because the page wasn't long or complicated enough to justify their use.

I then implemented these findings into the next iteration of the page design:

Conclusion and Final Thoughts

From this project, I learned a great deal about how to effectively work with clients who are not designers or web developers themselves. And for future projects, I have a better idea of how to tease out what clients are looking for, even when they might not be able to actually articulate what it is they want.

The main challenge was dealing with ambiguous direction, uncertainty, and conflicting messages and feedback from different ATK staff members. While one person might approve a layout or a particular cut of a video, another might want it redone, but then change their mind again and ask to revert to the previous version. And this is perfectly understandable—people's tastes change often, and project requirements shift over time. What I realized as the project progressed was that I needed to do a better job explaining and defending my design decisions, and be able to communicate clear justifications for each decision I made.

I was also responsible for actually coding the pages. I made the mistake of waiting for final approval on the designs, when I should have started coding much sooner, and updated the code as the site design was updated. Instead, I was rushed at the end of the project, and there were several changes requested even for the "final" design that we presented. My mistake was thinking that a final, "perfect" product was the goal, when I should have thought of the product as something that would continuously evolve, as gradual improvements and minor changes to the pages would continue to be made long after we handed them off to ATK's staff.

But ultimately, the project was a success, as the pages we were asked to redesign and develop are currently live on the site. The Careers page is here, and the About page can be found here.