When I joined the team at Icon Graphics in 2011, one of my main goals was to start migrating our sites to responsive web design. Naturally, this brought me to our site, which had been developed before the advent of responsive design…and when Flash was still a norm in web design.

Icon Graphics’ 2009 Site Design: non-responsive, with a Flash animated header banner.

Content Strategy

Of course, client work always takes precedence when you’re a design company. But even as we focused on our clients, I began developing a content strategy and branding guide for the direction I thought would be best for our company to move. Over the course of a week, I wrote up a branding guideline for our visual and written work based upon the reputation we’d already earned by the longevity and breadth of our experience along with how we’d like to be perceived going forward. This branding guideline helped as I began to restructure the site and rewrite our content. I began a notebook in Evernote to easily share my ideas with my team members. (I converted this notebook into a visual guide here for ease of sharing with you.) My boss and coworker were both thrilled with the guideline, mood boards, and initial copy.

I took the research I’ve done for years on best practices for communication and design and combined it with what I knew of our company’s strengths and goals and created a list of things to keep in mind as we communicate with clients and work with our own branding and overall company representation.

Branding guidelines written to help as we reworked the Icon Graphics website design and content, along with as we communicated with clients and vendors.

Then, I began looking for visual representations of what would constitute as something visual that supported our goals. It’s not a very formal mood board, but it worked for visually communicating my vision for the company.

Visual elements that I felt communicated aspects of our branding guidelines.

Between running my own semi-successful blog and doing lots of research on content organization and structure, I had a pretty good idea of how we should approach both our portfolio and our blog posts. I outlined all categories we should use, along with tags and what their function would be.

A series of categories and tags to help us keep content and portfolio items organized.

Finally, I wrote up a general suggested game plan for how to implement all of these strategies into our daily office lives.

I took both the branding guidelines and mood boards and came up with a list of actionable items I believed we should pursue to help the growth of the company.

Design, Copywriting, SEO, and Development Assistance

We brought Jeremy, a talented PHP developer, on board in 2013, which was just the push we needed to begin redesigning our site. My coworker, Kim, spearheaded the redesign based on the branding guidelines, restructuring, and copy I provided. After Keith, our employer and owner of Icon Graphics, approved Kim’s homepage and template design, I took the design and reworked it to ensure maximum responsiveness. I wanted to be sure that the design didn’t lose any of its charm as it scaled down for tablet and mobile views, along with ensuring that content and the user’s experience of the site were the main focus at each break point.

I also chose and manipulated several photos for use as our rotating header images. I wanted the photos to showcase our tagline of “STAND OUT” while also fitting in with the color palette Kim selected for our new branding efforts.

At this point, our new developer, Jeremy, began working on programming the site as I began working on interior page designs for our contact forms, portfolio, blog archives, blog posts, and team pages. All throughout this process, I revisited the initial scope of the site and checked in with Keith, Kim, and Jeremy to make sure that what we were doing reflected the needs of our company, met web standards, and served the needs of site visitors and potential clients.

The initial design of the website was just the homepage, so I set out to make sure all interior pages had a cohesive design system in place that meshed well with the template my coworker had created. This started in part with the blog archives page. I didn’t want it to look like an accident or afterthought, and realized I could re-use the styles from it for our Team page.

A simulation of how the blog would display, taking into account each article’s title, meta information, featured image, and excerpt.

Using the same styles as the blog archives, I designed a way for us to display photos of each team member, along with their name, title, and biography.

Next was individual blog posts. We needed to consider how to best display the meta information (date, categories, author).

There was no need to adjust the typography styles for blog posts since those styles were in place already, so I focused on how tags should be displayed after a post, how to share our content, and what an integrated Disqus comment system would look like.

At this point, Keith felt the copy on the site was too playful and not robust enough. With the aid of an SEO measurement tool, I rewrote the entire site, making sure to appeal to both search engines and people using them. The copy on the current site is the end result of what I wrote.

Portfolio Organization and Mock-Ups

The final piece of the puzzle was figuring out how to upload, organize, and display our extensive portfolio. I spent some time talking with Keith and Jeremy, along with brainstorming best organization methods, and came up with the following:

This is an email I sent to our entire internal team for input. I wanted to outline the problems I foresaw us having as well as provide a detailed, practical solution.

After getting approval for this direction, I worked with Jeremy on implementation. To help, I created an animated gif to demonstrate both my vision for the design of the portfolio and how selecting a specific portfolio item would trigger the lightbox.

An animated gif I created showing the basic category and listing of portfolio items, then what it would look like when someone hovered or tapped on an item to activate it, and finally what the full image would look like when in a lightbox with a title and description.

Finally, it was time to load our portfolio. The problem I ran into was that there were many projects where we didn’t have physical proofs of the final products. Rather than posting just the files as they were, I set out to create realistic scene mock-ups in Photoshop for various print pieces. I used smart objects to make updating these mock-ups quick and easy. The following are mock-ups that I created from scratch specifically for Icon’s design portfolio.

Conclusion

I’m very proud of the work I put into the Icon Graphics site redesign. Some of the strategy options weren’t implemented for various reasons, but the process of planning and organizing and writing and designing for such a large project, along with helping to oversee the progress and ensure quality, was a process that helped me grow as a designer, writer, and web professional.