Behind the Scenes: What it Takes to Redesign a 12 Million User Website

Shane Snow is a Mashable contributor and founder of approximately a million websites. He also does infographics for Mint, Wix, and the Credit Loan network.

The men’s lifestyle publication Thrillist has rolled out a new site design. Thrillist’s design team put its 12 million-user website under the microscope for nearly a year before unveiling the new look.

A complete redesign can be high stakes for a large site. Digg 4 earlier this year showed what can go wrong in the rollout of a new user experience (in Digg’s case, a noisy uproar and traffic dive). Twitter, on the other hand, this year launched a redesign that enhanced user experience with few snags.

Mashable got a sneak peek at Thrillist’s new design, along with the scoop on what the inside of a massive art project looks like. Read on for the anatomy of this full web makeover.

The brainchild of New York native Ben Lerer, Thrillist launched in 2005 “to address the lack of funny, actionable information available to young men” in his city. By 2010 the publication was serving 2.2 million daily subscriptions in 19 cities in the U.S. and U.K., and was listed as number 93 on the 2010 Inc 500 fastest growing U.S. companies.

The site was redesigned in 2008 to address the needs of its growing audience, but by the next year had outgrown itself, leading the company to form a team charged with redesigning and rebuilding the website for usability and scalability.

The redesign team first pow-wowed in late 2009 after Chris Steib, Thrillist’s new product development director, was hired that November. While dozens of Thrillist team members had a hand in the design process, the bulk of the burden fell on the shoulders of Steib and two others: Jess Williams, creative director, and Mark O’Neil, director of technology. “It’s definitely the biggest project I’ve ever been in from start to finish,” said Steib.

The Redesign Process

Left: Thrillist.com; Right: The new Thrillist design.

Before the proverbial pencil could hit the page, Steib spent months doing product direction homework. “The first step was to determine how the previous processes and implementation could be improved and to audit the existing website for UX and design problems,” Steib said. “Then I met early on with each department head and the key stakeholders on his/her team, gathering a wide array of business requirements. I broke these down into a high-level scope and built a basic site map and template directory our of the company’s highest priorities.”

Next came navigation; before drawing up sketches, the team needed to know not only what pages needed to be drawn, but where each fit in the hierarchy of the site.

With background work complete, Steib began drawing wireframes — boxy layout drawings of where elements would be placed on the pages — first by hand and then in Photoshop. A wireframe was created for each “template,” or unique combination of elements in the layout (e.g. the homepage and individual article pages had different templates).

Each wireframe was reviewed and debated in meetings with Thrillist executives, including Lerer himself. “This meant throwing a template up on the screen, tearing it apart for an hour, and then going back to my desk to make changes and iterate for the next session,” said Steib.

Once the direction of the design was established with the first approved wireframes, Williams, the team’s creative director, sat down to start on the actual artwork.

Williams put together a color palette and “mood boards,” or collages of design examples from around the web and print that represented the feel Thrillist’s brand positioning was aiming for, “highlighting different trends in different areas of web design; everything from the hierarchy of the page to small button details,” Williams said. “From that document, we were able to pair down what styles spoke to the Thrillist aesthetic that would then inspire the new site. We were drawn to sleek, modern designs and chose a color palette ranging in grays with red and blue highlights, which was both masculine and contemporary with numerous gradients, sharp edges and high contrast.”

Meanwhile, O’Neil and his development team began building the back-end framework for new features, such as the site’s TOP algorithm (which displays the most popular content on the site). They also began migrating the website database to MongoDB to improve its speed.

After the pattern and color research, Williams began designing the website’s header. In the first meeting with company directors, she presented a handful of ideas, which the team then debated. “We iterated quickly from the first meeting, pinpointing exact details we liked in specific headers and carried them throughout the subsequent design mocks,” Williams said.

The finalized header set the tone for the rest of the page design. Williams cranked out designs for each of the site pages and then discussed and critiqued them in weekly director meetings, revising, drawing, and revising.

It took from April to August for all the pages to be approved, meanwhile the design team was also working on rolling out other products for Thrillist, such as the newly acquired JackThreads.com.

At that point, Williams and Steib handed off the finalized designs to the front-end and back-end development teams to build them into a real website.

Implementation

Constructing the new design was straightforward, with a few inevitable snags.

“We sent 45 mockups… two dozen Photoshop templates,” Williams said. “And we still missed things.”

For example, the site’s new login was a dynamic drop down box; however, Thrillist e-mails contain links to “log in,” which normally led to a flat login page. O’Neil’s team pointed this out, so Williams whipped up a new page.

“Another thing about when you translate design to actual implementation is transitions,” Steib pointed out. “You can’t really design a transition,” like the animation that occurs when a pop-up box appears. The design team audited the built site for consistency and design integrity once the front-end team coded the transitions.

Once the working model was built, all that was left was connecting the site to Thrillist’s content management system backend and database.

From planning to implementation, the entire project took approximately one year.

Lessons and Design Tips

Steib, Williams and O’Neil shared a few of the lessons learned during the year-long redesign process.

Chris Steib suggested:

For sites like Thrillist, where the content is an important part of tone and style, “You have to have the content lead the design.”
Involve company leaders in the process early so they can cut off bad ideas before you spend too much time on them.
Bring chocolate to meetings.

Jess Williams suggested:

Sometimes you need to design what won’t work. That way your team can get a feel of what will work.
Use your actual content rather than dummy text on design mockups. It’s the best way to realistically see what balance your design needs.
You actually can do it yourself. Owning your design process rather than sending it out of shop is well worth the extra time it takes.

Mark O’Neil suggested:

Get a lot of feedback from everybody, but know what feedback to ignore.
It pays to grow your internal talent pool rather than outsource everything.

Why Design Matters

Good design is not just pretty (sometimes it can be invisible), design is a lot of work. On the web, great user experience equals time saved and money made.

At the end of the day, the new Thrillist’s success will depend on what users think. The only thing Lerer and his crew can do is now pull off the curtain and brace for rotten, flying tomatoes. Or, if they’re lucky, a few million more users.

More Dev & Design Resources from Mashable:

– How the iPad Is Influencing Web Apps
– Susan Kare: Interview With an Iconic Designer [GALLERY]
– 5 Better Ways to Read “Hacker News”
– 5 of the Best New User Experiences of 2010
– 4 Winning Web Design Tips From Ryan Carson of Carsonified

Reviews: Digg, Mashable, Twitter

More About: design, development, redesign, thrillist, web design

For more Dev & Design coverage: