How We Re-designed Marble Media.
Last year we made the decision to tackle the redesign of our old website. After nearly three years it was clearly starting to age. We’ve grown up a lot in this time, and produced some very effective and beautiful work that we are very proud of. We’ve just not had time to update our own site, until now! So here’s what we did.
First, we critiqued the existing site to see if it felt like it reflected our long-term goals and objectives. In short, it didn’t. It wasn’t appealing to the kinds of clients we now have and want. This was true for several reasons – a clouded offering, a dated and uninviting aesthetic and a lack of personality, something we strive for in all of our projects. So we made a list of objectives for the new design:
1. Deliver a better overall structure and flow, that shows we’re creative experts in the fields of user experience (UX) and user interface (UI) design.
2. Create new, more modern art direction for the site.
3. Create a mobile version of the site using responsive design, something we recommend to all our clients who get at least 15% of their traffic on mobile devices. (We get about 20% mobile traffic/ 8% tablets).
4. Improve our on and off site optimisation. (The Google Penguin update played havoc with our ranking and showed us how important it is to work alongside quality, reputable search marketing experts who work inline with Google.)
5. Publish a bi-monthly newsletter including articles to update our clients on industry trends and studio insights, whilst confirming our love for the subject and showing off our latest projects.
We then had to assess our potential clients to understand what key criteria they required from a design agency. We narrowed this down to three key things:
We agree that you’re only as good as your last project, so we decided to put our recent and best work up front.
As a small agency our new clients are often concerned that we might just disappear over night. Ironically, staying small has kept us in business and let us stay nimble during economic squeezes. So we want to reassure them – and mentioning how long we’ve been around early in the site flow certainly helps.
Typically our clients like to see that we’ve worked with similar sized companies and on similar sized projects. Our portfolio delivers this to some degree but we make this even clearer on the homepage by adding some brands we’ve worked with in the footer. It’s important to us that we work with clients of various sizes, and from different industries, so that we have a broad perspective of business methods on and offline.
Key criteria decided, we began building user case studies and journeys. This helps to highlight how users arrive on our site and what routes they are likely to take. We designed a path which lies somewhere between where we expect users will want to go and where we actually want them to go. Any possible routes off this path we consider ‘strays’, so we’ve made sure the design ‘helps’ users get back on the path.
Once we had agreed what we wanted our website to achieve we began building pages and processes as wire frames. We find this is a really effective method of quickly designing the structure and to some degree the content of a site. Wire framing helps clients to focus on the truly important aspect of delivering content without being clouded by the more subjective aesthetic. It serves various other purposes too, like showing where you’re missing content, how much space you have and approximate positioning, and even things like appropriate tone of voice (with titles and subtitles). We worked out a really simple structure for our new site, focusing on driving people to our portfolio.
We decided we wanted copy that was light and approachable, as we really didn’t want people to feel intimidated or bamboozled with industry terms. From a brand perspective, this fits Marble well as we don’t tend to take ourselves too seriously. One issue we’ve come across in the past is that our site presents us as a bigger agency than we actually are. There are of course pros and cons to this but on the whole, we’ve discovered that leaning more towards the open approach helps to qualify potential clients earlier and therefore improve efficiency. So, on the new site, we explain that, although we may be a boutique agency, we are both experienced and efficient with managing large-scale projects. We also highlight that the advantage of our small size means that our clients always deal with the designer of their site or system, instead of an account manager.
In our previous design, we placed our portfolio on the first page in one big hit. This seems fairly efficient, however, looking back we can see how this presents users lots of options but no clear direction. In short, it was just too much to digest. We often explain this as a brick wall of information, lots to look at but none of it particularly stands out and there doesn’t seem to be a way in!
We needed to stagger the approach and ease our users into the website with manageable chunks of information. So the idea was to use full screen images to fit any size browser and if the user scrolled, bite sized information from other sections of the site would be revealed. Considering ongoing content strategy at this stage, we could see that the full screen homepage images would always display individual projects on different devices and in suggestive environments. This infers that we don’t just consider the user’s likely requirements but also the possible context in which they may be viewing one of our client’s sites.
We like to try to squeeze every last detail into a page or section of a site. In the ‘process’ section for example, we use unique retro pixel character illustrations, which resemble Mike and Simon (Founders). The characters really helped lighten a fairly complicated and potentially dull section of the site. In the about us section we use photography to give potential clients a peek into our working lives, ourselves and our studio, again helping to prepare their expectations for our boutique agency.
At least 80% of our new projects require a mobile alternative, so we had no excuse for not having one ourselves. During our UX process we constantly consider how the mobile version might need to work. Often, we find clients want to pour every detail about their company into their websites. But this leaves very little to discuss when you finally meet. We try to consider timing of content and we find that considering mobile and desktop devices simultaneously helps with this. The limited screen revenue of a mobile device forces you to remove unnecessary content. This in turn results in a leaner site with just the right amount of content to tempt a potential client into getting in touch.
We use responsive design (media queries and css) to implement mobile websites. Keeping our design minimal and light and not too dissimilar from the full screen version, we went ahead and squeezed it into the smaller box. The main change we had to make for mobile was the navigation. Instead of text links we use a defined set of icons which fill a substantial part of the screen when tapping the menu button in the top right. These buttons are nice and easy to tap and eliminate the frustration of attempting to tap a tiny link. We also use colours in the nav and site sections to define the different areas helping to ground users and offering cross over between the desktop and mobile version. This is particularly important for users returning to the site from a mobile having previously visited on a desktop device.
Overall we’re really happy with the new design, we launched on the 10th October and have since picked up a design of the day award from CSSAWARDS, received lots of great feedback from associates and colleagues, a nomination for the prestigious awwwards and most importantly several new clients.
We’re really looking forward to seeing the results of the next 12 months and will of course keep you posted.
Do you have a project you’d like to discuss with us ?
If so, you can contact us via the following: