Image Matters

The company website

A big website update for a small company

Hopping in the deep end

Image Matters is a small company based in Leesburg, VA with an office in Bloomington, IN. They do a lot of government contract work so they compete with some much larger companies that have far more resources.

I took on a contract role here after I graduated with my Master's degree and before I left Bloomington.

My role was straightforward, use the old content but completely overhaul the information architecture and visuals for a more modern web experience. With the limited resources, we agreed the site should be as easy to update as possible for non-technical employees.

This is what I started with.

After the update

This is what I built. Each section is modular and entire responsive website is created with Wordpress for quick and easy content updates.

Roles

Project Lead
Sole designer
Sole developer

Methods

Competitive analysis
Stakeholder interviews
Wordpress development

Artifacts

Sketches
Wireframes
Visual design
Wordpress components
Style guide and page templates

Content heavy pages

Each of the interior pages were largely the same. They included a banner, a list of projects and a wall of text. The projects were incredibly interesting but you wouldn't know because there's so much to process.

Breaking up content

There were interesting things to say so I gave them an interesting way to say it. A viewer could process the information in chunks rather than all at once. While building the page I made sure these patterns were scalable. A lot of new work was coming in and the company wanted to present a holistic view of their offerings.

Design patterns

I had 3 months to design and develop about 27 responsive pages from scratch. That timeline included getting sign-off and buy-in from the Chief Marketing Officer, the project's primary stakeholder.

The only way I could do this was to create a system of design patterns and build pages based on those. The design process took longer than the stakeholders were comfortable with but development process was much faster than it could have been.

Added scope

80% of the way through the development process I was approached by the Head of HR. She saw what I'd been building for the rest of the site and hoped I could include the Careers section in the redesign.

A new way to apply

I took this opportunity to create consistency across another section of the website and work directly with the Head of HR to build something that would attract new talent.

Leaving a style guide

Nearing the end of my contract, and the end of the development process, I started on a style guide. This was my chance to pass on what I'd learned about working with Wordpress and document the tips and tricks I'd used to create the website.

The style guide was tailored to those with more technical knowledge. I made the page templates open enough for someone, with no knowledge of HTML, to add and edit content. Page templates could be changed when the situation calls for it.

Reflections on the project

This was my first professional design project after grad school and I think it shows. Reflecting on it, the site designs lack a level of polish and thought that I've come to expect from my own work after a few years in the field.

I had a chance to implement a lot of things I learned while earning my degree but one thing I wish I'd put more emphasis on is the customer. At times I felt more like I was designing for stakeholders than customers.

Even today it's really cool to see the vast transformation from the previous site to the one I built. The creation of something new has always been my favorite part of the design process.

Let's work together

I'm looking for new problems to solve.

Get in touch

Hi@Joelski.design

⌘ + C to copy

or open Mail