The Problem:
An outdated flash-based website, that wasn’t available on mobile devices and also had usability problems such as annoying popup pages.

I initially sat down with the main stakeholders of the agency — the CEO and VP of Business — to gain a deeper understanding of who the website’s target audience was, and what actions were we trying to elicit from its users. 

From this discussion, I deduced that there were two main user groups to whom we needed to cater to, so I went on to shape these users into our personas and shared them with my team (which comprised of a creative manager, content writer and a business development executive). My personas were more focused on users’ goals, needs, motivation and on the information they might come looking for on the website, rather than on demographics. 

Keeping in mind the personas I designed, I called in a team meeting in which we went into rigorous (sometimes heated and hot) discussions on how to structure the content around the website, most importantly the sitemap. The point in question was how would we like our users to consume the information: Would it be better to break the information down and present the details all at once or make it more compact by hiding less important links one-click level down.

First Iteration
We thought that a detailed navigation broken into bits and pieces would be more beneficial. In this case, a user would not have to scour for information. But soon the drawbacks started becoming evident. The navigation looked cluttered and seemed to cause an information overload. To fix that, we revisited this first version again.

Second Iteration
We brainstormed and cut the navigation short by figuring out which were the absolutely necessary links and which ones could be grouped together. Some, like the Blog which wasn’t directly a part of the website’s navigation was moved in the footer.

Research
Initially, I explored a couple of websites in the similar domain i.e. digital agencies, to get a feel of what the current industry trends were. The team and I spotted a few of the patterns that were very dominant on all of these sites that we explored and that would suit our own needs: We found ourselves fixated on the trending pattern of lengthy pages with a lot of scrolling divided into distinct sections.

Flow
For the landing page, the user journey that I planned was as such that I wanted a visitor to get a complete glimpse of the agency’s capabilities on the very first page as he scrolled down from top to bottom. To achieve this, I adopted the inspired pattern and methodically divided the page into different sections, turning it into a sales pitch.

Persona Convergence
I asked myself the question that what design strategy we could use to lure in both the business owners and our curious visitors? A show of creativity was my answer! For this, I tweaked a conventional slider a bit, and coupled some illustrations with a placard style text box that would also look good on phones. 

Next, I went on to transform this low fidelity wireframe into a high fidelity visual mockup. The website had to look fun (to reflect our company culture) and appealing, but at the same time we did not want our audience to perceive us as a bunch of frivolous people: finding that right balance of fun and seriousness in my design was the real challenge during the art direction. I did two iterations after which the color schemes, font faces, illustration styles, custom iconography and UI elements were finalized.

First Iteration
This version was done very rapidly, so that the team had something to look at and decide what direction were we going to take. Initially, I was afraid to use any bright colors because I thought that they might not be pleased with it, thinking that it’s not helping us establish a very positive brand image. However, when I presented the design in front of the team they though it was kind of dull  and the use of grey monotones although complemented the red brand color well, made the layout look mundane. Plus, they felt that the design elements didn’t really stand out from each other. I then did a second iteration for it.

Second Iteration
This time around, I unleashed  the creative in me, and took two weeks’ time to fearlessly experiment with my ideas. I introduced a bright and playful tone of red as the background for the main slider area that complimented the agency’s logo. Also, I felt that in the previous mockup using a grid structure throughout the page made it look monotonous. So for the new layout, I broke that monotony by using an illustration in the centre of services section and arranged icons circularly around it. This time, the team was very pleased with the cleanliness of the design and also the bubbly image that it portrayed.

I collaborated with the content writer helping her with writing copies for the website in a Powerpoint presentation. I then came up with ideas for suitable illustrations and icons to go with this content.

Work
For every project done by the agency, a one-page case study was prepared specifically keeping in mind a brand manager’s needs. The page design was crafted as such that each project was to show a few screenshots, the project’s challenges, the ideas the agency came up with, the achievements and client’s testimonials.
For navigation between the projects, next and previous buttons were also provided.

Team
It was important that we introduced our company culture so that prospective customers could get to know that our working environment was a breeding ground for creative ideas. To do so, I used an interactive image slider that comprised of various photos of our workplace. Also, I intelligently utilized the responsive grid structure,  and made separate widgets for each of the departments clustering the respective team members around it.

Contact
For clients to be able to get in touch with us, we wanted them to contact us without any hassle and as easily as possible, through every medium that was available, be it social media, email or a query form. We incorporated a Google Map to help with the directions to our office. We also  added an illustration of the office building so when someone came looking for us, they could easily recognize they’re in the right place.