Collaboration Tools and the Modern Design Agency

Editor’s Note: The following post is from Allegra Poggio, production director at Visceral, who describes the collaboration tools and process that helped the Visceral creative team in a recent web project.

At Visceral, we’re in the business of designing for the web. Like many digital agencies, we’re constantly looking for ways to be more efficient in how we create our projects, facilitate client communications and manage daily operations. With offices in San Diego and San Francisco and a client base that blankets the country, we’ve found that collaboration technology has risen to the top of our “most critical” list when it comes to managing our work projects.

Those in the creative design and digital production industries will likely agree that it’s a challenge to find a solution that developers, project managers and clients alike will use. And isn’t that the whole point? If one (or more) of the parties doesn’t use it—choosing instead to sidestep the process or tool—then you’ve defeated the goal of using a collaboration solution in the first place.

WCN website design

Because design projects can be vastly different, finding a way to efficiently customize a tool to manage each client’s needs can be difficult. Finding a great tool that works for everyone has been a huge priority at Visceral. After researching options, we landed on the spreadsheet-based work management tool Smartsheet to manage client projects, as well as our own internal operations. It keeps everything more organized and centralized, from project schedules, comps and other files to client feedback. Because it’s a cloud tool, it’s always accessible via a browser or a mobile app. It saves us (and our clients) endless hours of time digging through our email for the most up-to-date version or milestone information.

Most importantly, it’s so intuitive that my designers, developers and clients actually use it throughout the day, which warms my project manager heart since this is often not the case with other project management software. In exploring our process with the technology and how we leveraged the software to support us on a recent project, I’m hoping other agencies will uncover ways to become more efficient and to better manage client relationships by making use of technology.

WCN's website redesign works on multiple devices.

Wildlife Conservation Network’s Website Redesign

One recent project that exemplifies how we leveraged this technology is a redesign of the Wildlife Conservation Network’s (WCN) website, WildNet.org. Charity Navigator, America’s largest charity evaluator, ranks WCN as the No. 1 wildlife conservation charity. We were tasked with creating a responsive website and donation platform for them (a look at the final product is below)—bringing to life their innovative approach to saving endangered species and activating wildlife supporters around the globe.

Getting Started

As background, Smartsheet has a spreadsheet look and feel, and is familiar enough that everyone we work with understands how to use it without training. In Smartsheet speak, users create “sheets” and share them with anyone else in a variety of ways (whole sheet, just a row, view only, etc.), regardless of whether the other person is a subscriber or not. Collaboration-friendly functions are built in, such as the ability to attach documents to rows, assign owners to tasks and create alerts for upcoming dates.

HOW-05

With most projects, we break our work into four phases:

  • Discovery
  • Planning
  • Production, and
  • Test and Launch

For designers wondering how an online project management technology might impact their own work, this might provide some inspiration.

 The Project: Setting up for success

We started working with WCN in March of 2013, aiming to get a new and improved website up in time for their Annual Wildlife Conservation Expo in October 2013. The goal was to create a more contemporary look for the site, ensure it was built responsively for access across devices, from desktops to tablets and smartphones, and add in functionality to overhaul its donation platform to create a fluid user donation experience that ties to the Salesforce CRM in seven months.

To set us up for success and give our client visibility into our work, I first created a “dashboard” sheet in Smartsheet that would include links to all the other project detail sheets (read on to learn more about the many sheets we created). WCN then bookmarked the dashboard to find whatever they needed: the schedule, technical specifications, content, deliverables, etc.

At Visceral, we’re maniacal about being transparent with our customer communications. Giving our clients the ability to see a high-level snapshot of their project, with access to the nitty gritty details if they want to dive deeper, instills trust and confidence in our work.

HOW-07

Phase 1: Discovery

During the Discovery phase, which includes research and preparation, we used Smartsheet as a centralized depository for information for both the client and our agency team to access and reference. We conducted a content inventory analysis and a situational analysis on the existing WCN website.

HOW-03

For the content inventory audit of the existing website, we inventoried each page and created an entirely mapped-out site in Smartsheet. This allowed us to refer back to the original framework as necessary, and gave us a sense of how to approach the re-design of the site. With this mapped out line by line in the tool, we always had a reference point of the current site and what it looked like before, and could share this with whoever needs to see it and update it in real-time.

HOW-01

We also did a situation analysis—as analysis of where WCN stood from a branding perspective– and captured it all in a Smartsheet. For this, we developed a lengthy checklist of assignments for our internal team. Having one centralized spot to update assignments cleared up a lot of confusion. We could easily assign someone to each section, ensuring that we didn’t duplicate efforts and that everyone understood who was doing what.

Phase 2: Planning

The Planning stage involves many administrative tasks. We organized all our sheets into three folders–Administrative, Design and Technical–within Smartsheet. Each of these folders held certain sheets we could share with clients and others that remained strictly internal.

We created a project calendar with a dashboard-like interface, which we could modify as calendars changed. This proved to be a great central place to check off tasks as completed and to give the client perspective on where we were with the project.

HOW-06

In the Planning phase, we prepared for content creation by using the previously mentioned site map as a content checklist. We outlined how the new website would look and what new content would be required. In our checklist, we attached useful information like lists of writing tips, content deadlines and important documents. We encouraged WCN to bookmark the sheet and attach files directly to the sheet or task row, rather than sending multiple documents via email.

Phase 3: Production

In the Production phase, we shift from design into technical development.  Smartsheet was helpful to collect technical specifications for the website with WCN. It outlined hosting domain requirements, analytics platforms and social media integration.

We built this resource for WCN over time as we could continuously update Smartsheet with information on different platforms as we integrated them into the website. And, if a data point was missing or we needed clarification, it also gave us a centralized place to flag information that we needed from the client.

Smartsheet has a feature where you can send update requests directly from the ‘row’ via email to the client. When the client receives the notification, they can respond to the inquiry, and the answer is automatically reflected back in the sheet–without them ever having to log in to the tool. This is a real time saver.

HOW-02

Phase 4: Test and Launch

In the final phase, test and launch, we managed the QA process through Smartsheet. Using the SmartSheet instead of email for this step streamlines the process and creates excellent documentation to refer back to when questions arise.

We had testers track bugs in one sheet, which we were able to share with a client. Before, this testing typically involved a ton of back-and-forth over a one to two week period, meaning things could get lost in email. Now, we’ve effectively eliminated that interaction because everything is contained in one sheet.

HOW-08

During this time, we also created a pre-launch checklist sheet to make sure we were on track with everything to go live. Finally for SEO purposes, we set up sheets with all the right keywords so that our developer could go and grab the information instantly.

Collaboration tools helped WCN's website launch stay on schedule.

Higher Quality Output, Faster Process

Collaboration software has been an excellent resource for us to streamline our work at Visceral. By using Smartsheet for this WCN project, we were able to cover all of our bases and more efficiently deliver a product that was higher quality.

HOW-09

In addition to the uses we’ve mentioned, we also have an internal master project list at Visceral, which we link to respective project calendars for agency-wide visibility into tasks. I sound a bit like a broken record with my team, but to get things moving now, we simply say, “put up a sheet,” and we’re confident everything is tracked and everyone is accountable.

If you’re thinking about what technology would be useful for your agency, consider a collaboration tool like Smartsheet. From mapping out sites to managing project calendars, deliverables, QA, site testing and beyond, a great collaboration tool will help organize and share information, which allows you to focus more on the design and less on managing administrative details.

 Interdisciplinary Approach to Interactive Design

When it came time to design, develop and launch the new WCN website, Visceral took an interdisciplinary approach to the project. Sure, Smartsheet helped, the firm’s attitude played a major role in the project’s success. Learn how to collaborate with different departments and partners on your next web design project by watching the Interdisciplinary Approach to Interactive Design video from HOW Design Live.

 

COMMENT