Inside the Design: Second Story’s Relaunch

Second Story is known for bringing passion and excitement to building great interactive media experiences. Last year, Second Story set out to bring that passion and excitement to redesigning its own website. As every designer knows, designing for yourself can be a daunting prospect: You are your toughest critic, the only deadlines are self-imposed and hard to enforce, and other priorities can easily sideline the project. We ended up as a challenging but good client. The final site is easier to navigate and tells the story of Second Story more elegantly than ever. 

second story website relaunch homepage

The new SecondStory.com is both a departure and an evolution, providing an intuitive experience and deep content in a simpler information architecture.

second story website previous site homepage

SecondStory.com before the redesign.

Some goals of the redesign were clear early. For example, the site had been strategically divided content into two sections: one focusing on work, the other on the studio itself. We wanted to keep the same central structure, and inherit the backend, which contains information about all of the studio’s previous projects. This comes in handy for allowing potential clients and other interested visitors to see similar projects to their own. The site had to continue to be both an easy source for internal inspiration and a flexible presentation tool of our work.

second story website redesign wireframe

The Work section begins to take shape.

second story website redesign

Final featured work section.

Where the Work section contains everything Second Story has done, the Studio section represents who we are and what we do. In the previous site, the architecture consisted of several different “pages.” Instead of a strict hierarchy of sections, the new site would deliver “variable resolution storytelling”—visitors get the big picture of the studio as they browse the site, and can expand sections of interest directly in-line without having to jump to another section. The new architecture better reflects the culture and fabric of Second Story.

Second Story website redesign sitemap

An early site map reveals the new focus on a more cohesive, less hierarchical structure for the site.

second story website redesign

The Studio section.

The user interface grew out the thought process around the new way of presenting information. Rather than a series of discrete, siloed pages that users leapfrog between, it was important that visitors got a sense of seamlessly sliding from one topic to the next. In this way, visitors would always know where they are contextually, and the order of things would never change. The original metaphor was of a newspaper or magazine layout that flowed across columns. As these ideas often do, the site structure evolved into something simpler. In the new site, each category of content is in its own independent column.

second story website redesign wireframe

An early wireframe shows the column-based layout beginning to take shape.

The landscape of digital media has changed in exciting ways since we last redesigned the studio’s site. Digital content is more distributed now, and it is accessed and navigated on new canvases. Visitors can use a trackpad, an iPad, or a Magic Mouse to drag across images in a project; they can slide across a field of 300 projects in index mode, or they can swipe across each column in the Studio section, then scroll up and down within a column—everything feels (and is) connected. Nothing is taken away and replaced, it is merely moved, expanded, and revealed in situ. This strategy exploits every screen size. The result is that no matter what size the digital canvas—a 30-inch desktop, a laptop, a tablet or a smartphone—the content is served to every square inch of it. 

MORE WEB DESIGN RESOURCES:

COMMENT