Hawkes MediaDesigned and developed a new site to showcase a media company’s work and clients.

Goal

Tasked with redesigning a website that hadn’t been updated in more than a decade, filled with flash animations and gratuitous geocities gifs.


Visit the Site



fullsize screenshot of site



Understanding the Brand

Hawkes Media Group is a full-service digital media production company based near Boston, Massachusetts. Their need for a new website was urgent. One of their staff tried to create a new website 6 months earlier, but was too busy to complete it.



contact page



Assessing the Problem

Compared to their old, busy-looking site, the client wanted to showcase their work in a much simpler, direct and focused way. The first thing I did was gain an understanding of what a digital media company needs on a site and who they wanted to attract to the site.



sketches



mindmap



Designing the Site

I created sketches on paper of a simple interface with a consistent layout. Then I created wireframes for each page. I also used a mind map and information architecture I’d created to guide me along the way.



wireframes



Once the wireframes were finished I made a low-fidelity prototype and showed it to the client for feedback. This was followed by higher fidelity wireframes. Taking all these steps made for fewer changes as we moved ahead because the feedback helped me remove what the client didn’t like. The triangles and diagonal styling I used on the header and footer to give the site more character were stripped away and the Merriweather font was changed to a more plain and modern looking Open Sans typeface.



their work page



Coding

During the development of the site I found a way to give the client access to a CMS so that they could collaborate and make minor changes using Webflow. The project was developed using custom code that I would paste into the Webflow editor along with editor itself for a couple smaller things. CSS Flexbox was used for most of the site and it saved a lot of time with layout. JQuery was also used on some items like the mobile navigation.



Check it Out

The current website can be seen here


The old site's homepage is below


their work page