America's Test Kitchen

Project Details

As part of my six-month co-op with America’s Test Kitchen, I worked on the redesign of americastestkitchen.com. America’s Test Kitchen was looking to update their website to attract a younger audience while still maintaining their current users. The other members of the design team and I decided to take a mobile-first approach in order to create a responsive site that didn’t exist currently. We also were inspired by the atomic design method and used it throughout the project.

Moving from Whiteboards to Screen

Once we had clear ideas sketched out on a whiteboard, I worked on moving the layouts into digital wireframes using Sketch. Our first round of wireframes was very broad, with fields devoted to grids and navigation. We refined these further by going into each “atom” and designing it further. This atomic progression carried over to other screens and worked well when moving onto larger screen sizes.

Final Designs

Throughout the wireframing process, our design team was working with the development team to build the site as our designs progressed. This meant that by the time we reached the final design phase, the structure for the site had been mostly built. All that we needed to do was add colors, typography, and images to the pages to create the final product: a new, responsive americastestkitchen.com.