Redesign Process Work

One of the initial things we did was figure out what our new grid system would be. We had to figure out what screen sizes we were going to design for, what image sizes would work across the various snap points while ensuring that our ad inventory would flow in nicely as well. This is only one sample of approaches we took.

Through numerous stakeholder interviews, we sorted through a new editorial strategy for the homepage. In this early iteration, we took the existing homepage, broke it out into content chunks and sketched out ways to reconfigure the page in a more digestible way that would across multiple snap points.

As we did sketches, one of the main underlying approaches we took was to group items modularly. This would allow not only for a simpler development approach for a fully responsive site, but would allow users to scan the page more easily through horizontal bands.

Often times, visual designs would precede fully fleshed out wireframes. Wires and visual designs were done side-by-side in order to better facilitate communication with key stakeholders and to get buy in on direction early. This approach also helped as we did user testing as well. This design was an early concept of the horizontal banding approach that helped speak to the strategy of grouping certain types of content. The use of color was an idea to begin to cue and train users on certain content types that would ultimately be used throughout the site.

As the process continued, wireframes evolved into more high fidelity, fully fleshed out concepts using real content to ultimately figure out how a user would navigate through the site and how our editorial stakeholders would program the page.

As we worked through the content strategy, we evolved the site visually, sorting through interaction details. One main idea we had, in trying to keep with this horizontal approach, was to use strong graphics and photography to draw users down the page.

One main challenge we faced in this horizontal approach was reconciling our ad requirements. We didn't want to bring back a traditional right rail but realized we had to keep a remnant of that. As we fleshed this out, we continued to play with the overall look of the brand and how it would work and look across multiple snap points.

We we progressed, we would hang these responsive posters on the wall so that we could easily reference for discussion.

As I mentioned, our process involved doing wireframes and visual designs side by side. Depending on where we were in the process, an older visual design might inform a wireframe and vice versa.

One idea that we had from the beginning that evolved was our use of color. Initially we thought of using color to indicate certain types of content. However, upon seeing a bit of a rainbow effect across the site, we decided instead to take a more minimal approach: keep the site predominantly black & white and have small accents of color. This would in turn allow photos and graphics to be strongly showcased.