Posted on July 13, 2010 by Tim McLaughlin

“I don’t know if you can hear it in my voice, but I’m wiped.”

It’s the Saturday after a complete redesign of his company’s website, and Brian Storm, executive producer and founder of MediaStorm, does indeed sound exhausted. If you know the unending energy of Storm, you’ll appreciate this admission.

With seven full-time staff and an intern, this small Brooklyn New York based company spent the better part of a year quietly reinventing it’s web-based image. When considering that job was handled primarily by about half the staff, you start to get an idea of how immersive this experience must have been for those involved.

It started at a mid-afternoon meeting in July 2009. MediaStorm project manager Jessica Stuart, interactive designers Tim Klimowicz and Jacky Myint, and an outside consultant Keith Harper were in attendance.

Storm wanted Harper, a graphic designer from New York, involved in the process in part because he wasn’t directly associated with the MediaStorm community. “I wanted someone that didn’t understand our culture and our goals…I really wanted to have to explain what we’re talking about, and Keith really elevated the whole process,” said Storm. Harper and the crew discussed what was not working about the then current site, and what should be included in the new one. The crew used Google Docs as a way to organize and prioritize this information so that it could be doled out and worked on collaboratively.

After some discussion Storm announced his launch date goal for the project. March 1st 2010 was the five-year anniversary of the company’s original website launch, and an appropriate time to reinvent MediaStorm’s image. Despite the anniversary, Storm was admittedly ambivalent about the date.  “I didn’t know if we could hit that, I didn’t care if we could hit that, but let’s try,” said Storm. “We were working to get the right things done in the right way more than trying to hit a specific date.” With that loose goal in mind, the team had seven months to create a complete redesign, and at least one member of the staff was a little skeptical.

“I thought it was pretty funny,” said Jessica Stuart. “It was pretty clear at that point, that it was a really optimistic deadline.”

This brief encounter is illustrative of the working relationship Stuart and Storm have. Stuart, who has been with MediaStorm for three years, and who previously worked for Eddie Adams and the Eddie Adams Workshop, is very often the office reality check. Stuart explains, “I’m usually the first one to say ‘that won’t work’, or that ‘I don’t like that’. And I never mean it maliciously, I just tend to be pretty honest about things. Brian’s amazing and he’s really idealistic about a lot of things, which is fantastic, and he gets super excited about things, and I don’t tend to get very excited about much in life … I don’t appear to be excited about much in life.”

Jessica’s frank demeanor is what made her an invaluable part of the website redesign.”She keeps us grounded,” said Storm. And while she, like Storm, realized the ambitious nature of the March goal, the date gave the team a tangible amount of time to work on the project.

From that initial meeting each staff member was designated to a specific task. Tim Klimowicz was in charge of developing the video player, what Storm describes as the heart of the new site. Jacky Myint would code the new design and make it functional, while Stuart was in charge of reworking and transferring all the data from the old site into the new one. But before any of that could be done, Keith Harper would have to design and negotiate the website’s new layout.

---

Clarifying the vision

Coming from the outside, Harper spent four months negotiating the design with the MediaStorm team. “It was kind of a courtship,” said Stuart, “we’d all seen his work…and we liked his work prior to that, it was just a matter of making sure he got us and we got him.” Using Photoshop and Storm’s guideline of “the only thing we’re not going to change is the name,”  Harper created wireframe mockups and worked weekly with the team to tweak the new design.

One of the primary challenges was to organize and make explicit exactly what the company offered as a business. “That’s the headline. it’s not actually a redesign, it’s an unveiling of what we actually do,” said Storm. The solution Harper and the team came up with were three prominent category names displayed on the top menu bar. After some deliberation, the team decided “Publication”, “Clients” and “Training” properly described what MediaStorm offered as an institution.

“Publication” highlights the role of the company as a distribution hub and it’s really where the team’s passion is. “At the heart, that is what this company is built to do. We are built to produce, and publish and distribute important projects that would maybe sit in someone’s shoebox otherwise,” said Storm. Those projects, which have given MediaStorm its reputation, have a prominent position in the landing page’s new video slider. Additionally, clicking the “Publication” tab reveals all the projects in a grid, which is a substantial improvement from the vertically oriented list of the previous site that required a lot of scrolling. Projects can now be organized and viewed by genre from the sidebar, which gives the viewer an idea of the scope of work MediaStorm creates.

A “Contributors” section provides bios of individuals who have collaborated with MediaStorm in some way, and there are additional subsections that allow users to view submission guidelines and licensing opportunities of published projects. The navigation is easy to understand and it clarifies the purpose and scope of the company’s publications.

The “Clients” section of the website brings to light the primary revenue generator of MediaStorm. Previously, client work was posted on their blog, and mention of the company’s availability for production and design work was tucked away in a roll-over menu. The new front page prominently highlights three client projects below the publication slider, and additional information is provided by clicking the “Clients” button in the top menu. The “Clients” section clearly illustrates what services the company offers and who they’ve created work for in the past.

Client projects are now listed on a single page grid under the “Projects” subsection, all of which include the title of the piece, the client name and a rollover description of the project. The new design increases the visibility of client work and Storm believes it will encourage a spike in the amount of commissioned projects the company produces.

“Training” is the last of the three major categories in the new design, and it is representative of MediaStorm’s goal to be a  resource for multimedia education. The front page offers a direct link to their workshop application, as well as two projects from past workshops as an example of the type of work that’s produced. Clicking “Training” in the menu bar provides information on the type of workshops available, when they are available, who has participated in the past and a link to their projects.

Additionally, the ever popular “Resources” page, which is a collection of educational documents and training opportunities, finds a well-suited home within this category.

---

Translating to code

Once Harper finished the design of the site, he handed over a series of Photoshop files as well as a style guide for reference. It was up to Jacky Myint to translate those images into a functional website. Myint, a graduate of Duke University and the Parsons School of Design, joined MediaStorm in 2009. Myint is, not surprisingly, enthusiastic about the intricacies of code. She remembers writing “Hello World” with HTML for the first time in graduate school, describing the experience as “pretty awesome”. As only someone who remembers such an experience could, Myint prefers to hand code her projects and did so for the new site. Using the free program TextWrangler, Myint used HTML, CSS2, PHP and JQuery, with each language playing a separate role in the site’s design and functionality.

HTML established a framework for the site, while CSS provided the styling and distinct look. PHP was used to pull information from a newly created SQL database, which was designed by an outside contract developer named Jason Burfield (it might surprise some to know that this is the first time MediaStorm has used a content management system to publish and organize their data). Lastly, the JQuery library provided some of the interactive design elements, like the project slider in the footer or the main slider of the mobile version. That mobile site, which looks exactly like the desktop version, is called by a “sniffer” Myint created to determine what type of browser a viewer is using.

One of the biggest challenges for Myint was creating a site that was cross browser compliant. Initially she wanted to use more modern coding languages like CSS3 or HTML5; however, compatibility issues with browsers like Internet Explorer forced her to use older versions of those languages. “Most of them (browsers) are ok except I.E. (Internet Explorer)…that’s the browser I keep cursing,” said Myint.

The benefit of being restricted, however, is that regardless of the platform or browser, Myint has managed to code a website that looks and functions like it should, no matter the users’ access point.

---

The heart of the site

In addition to wire-framing the site design, Harper was also responsible for creating the look of MediaStorm’s new video player. According to Storm, the first month of design work was on the player, while another six were spent in development. “Why would we go spend six months developing our own player instead of just using Vimeo or YouTube or Brightcove, or some other off the shelf solution? None of those guys actually did what I wanted it to do,” said Storm.

The player has a host of new functions including full-screen capabilities, but certainly the most fascinating is the ability to, and function of, the embed. “One of my key strategies was that people were not going to be watching our projects on our site,” said Storm. What’s included in the player’s embed is nearly all of the functionality of a MediaStorm project page. “My goal with the player was to take all of the stuff we had tacked onto the story page below the fold, and try to roll it into the player,” said Storm.

Whether users choose the larger or smaller player to embed,  they still have access to a complete video playlist,  all of the copy written about the project, and they can share it through email or any number of social networks. Additionally, users can purchase a DVD of the project, view a transcript and perhaps most importantly, embed a project from another embed. MediaStorm has also begun to include some pre-roll advertisements within the embedded players.

Storm felt strongly that he should have some level of control over those embeds. This desire led to one of the more innovative aspects of the new player. He explains, “if you embed our player on your site, I know that you did it, I can turn it off independently because I’m giving you a unique i.d. … that’s a pretty radical step to take from a copyright perspective. We’re saying ‘take our content’, but we still have complete control of it.”

MediaStorm has already taken the opportunity to remove at least one embed. Storm described the situation by saying, “the reason we turned it off was because it was embedded at such a small size that you could only see half the player. So for me it was like, ‘I don’t want people to experience MediaStorm in that way’, so we sent an email to that person and said ‘look, we’re turning this off for this reason’ and they wrote back to us and said ‘I completely understand’.” This ability is certainly powerful, but depending on the embeds popularity, ensuring that each one is on the level may mean many hours of labor. Storm responded to this by saying, “that would be a terrific problem to have.”

Storm is so confident about this new player, that he is making it available for licensing. A business or organization can purchase the rights to use and modify the video player, complete with all the above mentioned functionality. MediaStorm is now in the software business.

The individual responsible for developing this player, and for somehow managing to pull off all that functionality was interactive designer Tim Klimowicz. Klimowicz, who has been with MediaStorm since 2007, was trained in graphic design at the School of Visual Arts in New York. The final design of the player was given to Klimowicz in early January, and he spent the next six months coding the project in Adobe Flash using Actionscript 3.

For a guy who claims he’s “not a coder by trade,” the scope of the project was daunting. “I had many, many, many ‘oh shit’ moments,” said Klimowicz. Part of the difficulty of the project was packing all that information into the player, while keeping its file size to a minimum. “It couldn’t be a 1MB file that we’re serving everyone because that’s gonna get crazy,” Klimowicz explains. To make things even more difficult, because the player was to be licensed nearly everything had to be optional. “All the colors in the player are completely customizable, a lot of the sections are customizable, so you can move the about section if you want, you can turn off embedding, you can turn off sharing… the entire thing is customizable,” Klimowicz explained.

The first three months for Klimowicz were spent creating a solid foundation for the player and breaking it apart into its separate components. Klimowicz spent a lot of time learning about and researching the Actionscript he would need for those components through forums like Kirupa.com, and Colin Moock’s book Essential ActionScript 3.0. “That’s really it, just lots of reading, asking lots of questions,” said Klimowicz.

From that curiosity and research, Klimowicz managed to create a flexible, immersive player, which gives MediaStorm a level of control while being well-suited for a web community that values sharing. The impact could be substantial and with the addition of pre-roll ads, one that might open a significant new stream of revenue.

Good thing it’s only 250 KB.

---

Launch day

The finale for the redesign came down to a Tuesday morning in early June. “It was one of those days going in to the office where you thought ‘this is going to be a really great day’…and then I went in and pushed the button and it was live,” Storm says with a laugh. The button, it turns out, was Jason Burfield, who was responsible for creating the new database. From that database, Burfield enabled the new site to go live and just like that, nearly a years worth of redesign was made public. Each member of the team described their shock at just how simple the transition was, though re-checking each page to make sure links were working and videos were playing kept Stuart, Klimowicz, and Myint busy for much of the day. “It didn’t make sense to us that it would be that easy,” said Klimowicz about the launch.

There was no big celebration, no drinks or tears, but Storm did provide each team member with one of his famous hugs. “He likes to give it out on rare occasions when it’s due…so we all got a man hug, which is nice,” said Klimowicz. Stuart described the situation by saying, “he was hugging us and Tim and Jacky and I are still trying to bang away on the site, and we’re like ‘what, what’? We’re trying to make sure this is working!”

Fortunately everything was, for the most part, functional. Some last minute changes were made, but overall everyone described the launch as smooth. That ease in how the site turned on reflects the simple nature of the new design. While it’s certainly a new vision for MediaStorm, the innovation is in how it’s clarified much of the philosophy that has already come to define the company. MediaStorm creates stories, and they can do it for you, or they can teach you how to do it. If you like what they do, there are easy ways you can share it with someone you know. Keeping things that simple, clear and yet engaging is an extraordinarily difficult task. Evidence of that exists in the hands and minds of the individuals who make up this small Brooklyn-based production studio.

---

About the author: Currently the Director of Multimedia at the Maine Media Workshops and Maine Media College, Tim McLaughlin is a photographer, multimedia documentarian and educator located in Rockport, ME. Originally from Louisville KY., Tim has his masters of fine arts from the University of Florida and a bachelors from Centre College, but owes a great deal to the two years he spent at Western Kentucky University. Tim has worked with MediaStorm, the Eddie Adams Workshop, the Rocky Mountain News, the Mountain Workshops and most recently shot a film for the Rotterdam Film Festival.

Tags: Brian Storm, Jacky Myint, Jessica Stuart, MediaStorm, multimedia company, redesign, Tim Klimowicz, Tim McLaughlin

---

• ← Criticando el rediseño del sitio de MSNBC – es más grande siempre mejor?
• Tras Bambalinas: Revelando el rediseño del sitio web de MediaStorm →