I was approached by the Managing Director of City Web Consultants, an agency based in Newcastle and London, to re-design their main agency website.
The challenge
I was sent over the URL to the existing website, as well as the original .PSD files for the design. It’s safe to say that the current site was clearly dated, and in dire need of modernisation.
I was told that time was of importance here – as they were looking for a speedy redesign before an annual conference. Working under pressure is something that I’ve become accustomed to over my career – so this was absolutely no problem.
Initial thoughts
The elements on the website were clearly in need of a little more space to breathe. Everything seemed so packed in together – which considering the website was not in any sort of grid system, left some components looking MASSIVE when viewed on a larger screen.
The site had a fixed frame on the left-hand side of the site, which housed a search bar and team photos at the bottom. That was all. A search bar could easily be moved to the top of the screen, and we wouldn’t be dedicating that much precious screen real estate so few features. To add to that, it seemed to cause absolute mayhem when viewing on a mobile device.
I did like the use of branding colours though – maybe use a few shades less – but it was consistent with the logo.
My Goals to accomplish for this project
When I started this project, I have a few ideas already on what I would like to improve for this website.
- Improve, improve, improve! Bring the website into the modern era, with a mobile-first approach.
- I.e. get rid of that frame on the right-hand side!
- Give some breathing space on the website as the current website feels too much information are cramming together.
- I want to make it easier for users and potential clients of CWC to navigate within the website and be able to easily contact them.
- Let CWC’s work speak for themselves – with a clean, informative layout for displaying their portfolio pieces. The work they were producing was brilliant – in stark contrast to the website!
The wireframes
I went straight to work and started sketching using the traditional method of pencil, ruler and paper (can’t beat it!). The rough sketches were then converted to digital wireframes using Mockplus.
I opted to put the website in a 12-column grid, as is standard with my work. I proposed that certain elements break the grid, as and when necessary. I shared these with the stakeholder, who was impressed at the proposed layout of the new design.
I explained over a call with him how the new grid system will work, as well as examples of how the design would transfer to mobile devices.
For the design, I opted to split the main header into a Create & Consult section – so that when visitors arrived onto the website, they could immediately select what they were there for. This would lead users to the specific section of the website, tailored for their specific need.
In contrast to the old site. I wanted the elements of the website to be able to breathe. I afforded a lot more whitespace to the new design, as well as using a lighter font, with a bigger line-height. This allowed the design to be a lot easier to read, and easier on the eye in general.
A consistent call-to-action at the foot of the website was implemented into the design so that users would be able to get in touch with CWC as and whenever they liked.
Hi-fidelity design
The design was ready to be put into hi-fidelity – which I proceeded with using Adobe Photoshop.
The copy was still a few weeks away from being fully-approved, so for the purposes of the design I had to use Lorem Ipsum dummy text.
Although I liked the brand colours used in the original concept – I muted them down hugely, opting to use only a few shades. Instead – the focus was on nice, clear imagery. For the purpose of the design, I had to use some stock imagery – but I passed on guidelines and recommendations for replacement images should they be in a position to use their own.
Styleguide
I also produced a style guide for the website, which contained guidelines around Primary & Secondary colour palettes, fonts and any elements that weren’t included in the original design.
What I achieved
- I believe the new redesign of CWC is much, much better than the site before. It no longer looks outdated and neglected and effectively displays the work CWC produce in a fitting manner
- I have simplified everything on the page for users to easily navigate through the page.
- I believe the reading experience is better than the current as everything is not clustered together and having some breathing room between each section.
Overall
The client informed me he was extremely happy with the redesign, and left me this feedback on the website I originally found the work on.
Absolutely hit the brief and delivered what I wanted.
Will happily work with Steven again.
True to his word – I have worked with the client again on multiple projects.