Adam Davis / Design / July 31st, 2013

Redesigning 352media.com from the Inside Out – Part 2

Last week, I shared Part 1 of my experience designing our company’s new brand, including our website. I explained the core fundamental stages; the brainstorming, planning, iterating and implementing feedback, as well as balancing a plethora of unique ideas. This article is a continuation that concentrates on the more granular aspects: layout, design, photography and content, some of which are still in development today.


Having a design direction for our homepage allowed us to focus holistically on the entire build; specifically, our case studies and interior pages.

Responsive Design, Layout, and Further Planning

The team’s general consensus: Go responsive. While this sounds like an easy decision, we had an aggressive timeline closing in on us. We needed the site done in six weeks. And don’t forget, we still had our old site talking (literally) to potential clients.

We had well-written proposals literally sitting on desks at highly respected companies. The profound ideas we were offering to our clients starkly contrasted with our own visual representation of our old brand.

Design is psychological — consciously or subconsciously, it triggers emotions that contribute to the decisions we make every day. No doubt you’ve searched for a product, landed at a new website and immediately hit your back button. While the product may have been great, it’s possible that website simply didn’t look good. Ultimately, that reduces its level of trustworthiness.

During development, I introduced the idea of not making the site fully responsive for the initial launch. Instead, we could have implemented a basic mobile landing page while we concentrated on polishing our desktop version; at this point, I was obsessing over every pixel. In the end, that idea was shot down by our ambitious team, and we put together a clutch responsive strategy for mobile.

Layout Goals


  • Show our work – show it BIG!
  • Case studies that showcased  the people behind the work, our process, our challenges, client relationships and the outcomes.
  • Photography with great composition, angles, personality and culture.
  • A marriage of content and design that matched our new brand.
  • A flexible blog geared toward clients, industry professionals and peers. A blog that focused more on content and less on clutter.
  • Less experimental, more usable. Interaction design that made sense.
  • Social integration — not the traditional “in your face” social integration, but something subtle and communicated with the peers who were interested in getting to know us and following us.
  • Lastly, but most important, making our site human.

We agreed the case studies needed more planning. Not having time to create digital wireframes, I stood in front of a whiteboard. I drew out ideas and discussed them openly with Pete Bernardo, our Design Director, and Erin Everhart, our Director of Digital Marketing.

I sketched out a vision for how our case studies would “flow,” starting with the beginning of each project and moving through different stages. I created a few layouts based off of a one-, two-, three-, and four-column grids, but alternated these layouts in design for good variety. Luckily, these concepts reduced abstraction and allowed us to move forward.

WhiteboardThe whiteboard in Atlanta

The Design

Working in Agile

We’ve shared extensively about our agile process. We treated this project the same. We created a full prioritized backlog based on our target audience and user types. We met each morning and each of us gave a brief description of what was accomplished the day before, what tasks we were planning to accomplish that day, and brought up any roadblocks preventing us from accomplishing those tasks. This was an opportunity for our team to flesh out new ideas and discuss development strategies.

Flat Design, Skeuomorphism, and Trends

Caught in a trend dilemma — flat design vs. skeuomorphism — I was conflicted. Does flat design lead to diminishing returns or a sterile feel? Shouldn’t a portfolio site be more about the work and less about “fluff” or “decoration”? These are just a few examples we battled with during the process. Flat design allows for less bloat, more focus on the content and less tail wagging, a concept espoused by Jony Ive.

Every designer has wanted to “wow” their visitors with impressive designs. I’ve always strongly believed that a digital agency’s site should let its work speak for itself but also portray brand personality.

This again, resulted in balance.

We agreed to take a more liberal design approach with our case studies. We decided to get more creative, as long as that creativity improved the experience and understanding of the project we were showcasing. The pages devoted to our company were intentionally designed clean and minimal to focus on content, photography and typography.

Typography

Early on, we experimented with Futura, which soon became part of our brand identity. I deliberated extensively between Bold and Book on the site headings and ultimately settled on bold. The switch to Bold provided a level of personality that meshed well with our company culture, and the different type weights created good hierarchy while maintaining a unity throughout the design.

352 - TypographyFutura Bold, Book, and Helvetica/Arial

Photography

Luckily, we have Nick Forneris, a veteran photographer at 352. We all knew it was a necessity to have unique photography throughout our new site. I worked closely with Nick to establish a solid direction. With Nick in Gainesville, this was a challenge to coordinate between him and our offices in Atlanta and Tampa.

As the shoot progressed, Nick and I Skyped back and forth as he shot in Gainesville. He dropped RAW images on our server. I pulled them down, edited and integrated them into the design from Atlanta. I snapped a picture of the design complemented by Nick’s photography, then sent him a text message while he was out shooting so he could examine how things were looking. He adjusted and continued.

SMS to NickMeshing design and photography on the fly

“That moment, a cool sense of innovation swept over me. This was a huge turning point in the project.”

Collaboration: Case Studies, Landing Pages, and Content

From this point on, Tim Pratt and Krissy Scoufis — both fellow UX Designers — and I worked closely together on the design pieces. We crafted 5 different case studies, 4 of which, went live with the initial launch. This is where I had the chance to flex my creative muscle and have a little fun.

Our content design approach took a major leap forward. Erin, who wrote 98 percent of the content on the site, was a huge partner in the creative process. It was both challenging and liberating to debate over how each headline should read, how the body copy should flow, and what images or illustrations made the most sense to unify the content.

At times, we knew we wanted a specific photo and wrote the content around that. Other times, it was the opposite. Sometimes it felt like a series of battles to determine the best course for the site.

Content DesignContent design

“Erin and I continuously threw mental punches at each other’s work, which I believe, stimulated our minds and ultimately delivered a better outcome.”

Communication was huge. Two headstrong individuals going at it over content and design called for greater understanding, and giving it 5 minutes for each other’s ideas to sink in.

Though the landing pages were designed rather minimal, they were crafted with our users in mind. I let the content speak while providing a “behind the scenes” look at 352 in the trenches.

I had an idea to incorporate a Twitter hashtag system that allows users to find out more depending on what page they are on. We created #352solutions, #352work, #352culture, and #352careers. Just a simple non-obtrusive social integration method that’s there if you’re curious.

352 Work - landing pageOur work landing page

The Big Takeaway and Moving Forward

I always welcome feedback, as I enjoy analyzing different perceptions. I could pick apart this site and explain what could be improved in full detail. I won’t.

“I had to choose the best course of action, utilize the right tools and resources, and maintain a consistent vision. It was a learning experience.”

As designers, we tend to evaluate our work based on an idealistic vision of a perfect design. Mixed with ambition, this could be a designer’s poison. I lost sleep over this project. Everyone on our team did. In reality, a design will never be perfect. High creativity in one area lacks in another. Poor usability on one page is greater on the next. There will always be room for improvement because design is an iterative process. Instead, seek an experience in which you learn something valuable.

Through my quest for deeper understanding, I’ve gained an uplifting thought from this project. As compromise is produced by constraints, designers and developers can be judged by their wisdom of compromise. Selective compromise is an art in itself, as it uncovers the severity of flaws. The reduction in blatant flaws is what shapes a designer’s ability to grasp vision.

Brainstorming, planning, design, content, development, interfaced with technology — all interconnected. It came together. This is our brand; this is 352.

In the end, we haven’t designed a masterpiece, just the means to tell a great story. And I’m eager to see where this story takes us next.