Tasked with redesigning a website that hadn’t been updated in more than a decade, filled with flash animations and gratuitous geocities gifs.
2 Weeks, January 2017
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.
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.
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.
Hawkes Media supplied a text-based list of clients for one page, but I convinced them that company logos are a stronger visual presentation. It gives the prospective client more confidence in their work when you see a full screen of logos. In addition, I also got them to reduce some of the text they envisioned in favor of more imagery. After all, they are a media company. Show your best work instead of writing about it.
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.
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.
The current website can be seen here.
The old site's homepage