Case Study: Que Pasa website redesign

Well… we’ve just finished work on a redesign for the Que Pasa website and while we’ve got two minutes spare waiting for our next project to come through, we thought it might be a fun exercise to put down a basic outline of the evolution of this project, from the initial pitch through to the final design solution, so potentially six months from now we can look back at this and (hopefully) see how our design process has progressed (or at the very least not regressed too much…).

The existing Que Pasa website

This project started a couple of months ago when we saw a speculative tweet from a friend looking for an agency to redesign the Que Pasa website. We’d just finished our last project so immediately replied saying that they should employ us for the redesign!

We were put on the list of possible agencies which was cool, but rather than hanging around twiddling our thumbs, we set about designing a mockup of how their site could look if we redesigned it, as a kind of pitch for the job.

We spent a bit of time looking at the existing site and trying to understand it’s mechanics, which bits were working and which bits needed an overhaul and it was pretty obvious that the whole site needed restructuring from the bottom up in order for it to work successfully.

Our mocked up redesign for the pitch

The design work for the pitch was actually a fun little project for the afternoon, encompassing a bit of IA work, some super simple wireframe sketching, the chance to play around with some photoshop tutorials that we’d previously bookmarked and ultimately the creation of a quick and simple mockup of how the site could look once the underpinning architecture had been sorted out.

We didn’t want to spend too long on this just in case nothing came of our efforts, but chance would have it that our solution almost exactly matched their vision and requirements for the redesign, so having liked what they’d seen, we successfully landed the job and shortly afterwards went along to the Que Pasa HQ to meet the team and discuss the redesign in a little more detail.

Rough site map sketch

The team was devoid of any dedicated UX / IA presence, so the first challenge was to get our Jakob Nielson heads on and understand the requirements and site map a little more clearly…

We’d fairly quickly figured out what was wrong with the site during the pitch, so now we had to combine our thoughts with Que Pasa’s requirements and the basic site sketch that we’d been presented with in our first meeting and come up with an underpinning structure and homepage template that the rest of the site could then follow.

After grappling with Omnigraffle for a while, trying to figure out what the hell it was doing, we put together a basic first set of wireframes to help get everyone involved thinking on the same track. 

Due to the fairly light, simple nature of the site, this pretty much went off without a hitch.

Quick first look at the homepage layout

The only questions that arose were to fairly standard really, what order should the nav go in, do we need sub sections and if so where, basic content placement and hierarchy, character counts, right hand column usage, footer usage… all very important, but nothing that would really hold up any initial design exploration, so off we went.

To begin with the two main elements of the homepage were set out to be three promo boxes that would showcase and then link into the specific sections outlining Que Pasa’s main services and secondly, a showcased content carousel that would cycle through several of the company’s latest and most important news items.

The first design direction

The three promo boxes were under constant discussion regarding where they should sit, how important they were, what should they actually contain or do, should they even be there…. and this uncertainty had quite an impact on the way that the homepage was developing around them.

They were finally dropped from the homepage and reintroduced deeper into the site, but not before several iterations of the design had been through the system.

The carousel was also the source of much debate, again it’s placement on the page and relative importance to the surrounding content, but also and most importantly, what should actually go in it.

Another design direction

Initially we had envisaged it just housing images and text, but requirements then shifted so that it would also contain the company showreel in a Vimeo player – so there was a technology integration issue and also the two different media types to accommodate.

We went round the houses for a while with this, reached a few pretty cool solutions, but finally a decision was made to completely drop the video, which in turn simplified the carousels functionality and subsequently the design needed for it.

The colours we used across the site were very clean and simple from the beginning. The Que Pasa logo is made up of a dark grey and a fairly rich blue, so it made sense to incorporate these as the primary colours of the design.

The chosen design direction

The three main service sections were originally going to be heavily colour coded with their respective pinks, oranges and greens and the initial designs featured them heavily on the homepage, but as the content was refined, the need for the colour coding became less and subsequently the palette was stripped back to mostly greys and blues, with the three brighter colours only appearing as an occasional link/title colour on specific service content.

A few really minor tweaks were made to the designs once the final decision on the homepage content had been made and once the definitive look and feel was in place, we had to make sure that the grid that it sat in was flexible enough to accommodate all the content that would populate the rest of the site, but because the design had already had several iterations and the sizes had been refined along the way, we actually managed to pretty much nail the grid first time.

The last of our 8 days on the project was spent putting together guidelines for the developers so that once work begins, everything is accounted for and in place for a quick and painless build.

The grid and spec's for the homepage

Although coding hasn’t started yet, once it does, we will have to allow a bit of extra time to make sure that the site looks the way it was intended, making sure the producers are formatting and inputting their content correctly, ensuring that the image editors have understood any templates/masks we’ve provided and most importantly undertaking a thorough QA of the site as whole once it has been populated to ensure that everything is displaying correctly.

As a whole this project has flowed pretty smoothly and been fun to work on. There could have been some more definitive decision making earlier on from both camps so that we could have spent some more time refining and populating the chosen direction, but as a lot of the site is brand new and a huge proportion of the content that will fill it doesn’t exist yet, we ended up designing blind which is always going to lead to a bit of to-ing and fro-ing.

Everyone seems happy with the final solution so we’ll just have to hold tight and see what happens during the build phase, when the new site goes live it’ll live here so keep an eye out for it appearing sometime soon, but for the time being it’s onto the next project!