Newsletter

We designed our website mobile-first: here’s everything we learnt

Posted on 11th November, 2016 by Miles Walker

Branding, FirstFound News, Web Design

Like most digital agencies, at FirstFound it’s all about our clients. And, while this means that they always get the best service, internal projects inevitably get put on the back burner.

One such project was our own website.

We knew it was time for an update to help us showcase our position in the market, but how could we get the work done with so much client work on the books?

Planning

With any website project, one of the most important steps is getting the briefing right, to give us an understanding of project requirements. After a planning process with our internal stakeholders it was agreed that we needed to;

  • Communicate our core values
  • Showcase the diversity in the services we offer
  • Create a brand that showcases the size of our organisation
  • Create a brand identity that reflects our culture

Research and Ideas

The first step was to start the research process by looking at our current website and comparing this to our competitors. We evaluated their strengths, weaknesses and progressive web techniques.designing-mobile-first

We focused our attention on user experience and looked at design elements that would help us to achieve this. Because the web is always moving forward, it was important to understand the basics of minimalism and timeless design techniques rather than trends.

We wanted to create a website that didn’t go out of date quickly. Starting with the basic design principles such as visual hierarchy, typography and colour selection.

FirstFound Branding

For the branding, we looked at colours that would help us reflect our brand culture and core values – diverse, friendly and vibrant. After extensive research and several colour variants, the winning colours of orange and blue were chosen.

This wasn’t always on the cards – initially, I wanted to move away from orange but decided to remix it to preserve the brands already established identity. The second orange was a little softer than the original.cool-and-warm

Orange is referenced in psychology as bold, enthusiastic and warm – everything we stand for. This meant I could use it to emphasise certain messages and reflect our culture. As warmer colours look bigger on cooler colours I introduced a secondary colour ‘sky blue’. Blue is associated with trust, calm and friendliness, the perfect choice to use alongside the energetic orange.

Using a combination of the two colours with blue as the primary colour and orange an accent colour helped us create a clearer user experience. Orange was used to highlight key elements such as calls to action, navigation and other important actions.

Using Logos to Assist User Experience

The business is made up of specific specialisms all very different in kind so I thought it was important that this was represented visually.logo-setI wanted to create relatable and friendly icons with depth and focus. Creating visuals that followed this brief would reflect who we are/want to be as a business.

While the logos are all designed to look different they are all built using the same ‘shapes from shapes’ layout principle and materialised using shadows and edges. They reaffirm we are a full circle agency with plenty to offer.

In the end the logo set served two purposes; reflecting our personality but also gently helping with the websites UX.

Adopting a Mobile-First Design

With our brief and branding laid out in front of us it was time to move on to the next part of the planning, and perhaps the most integral stage, the design.

We knew that we wanted to put handheld devices and minimalism at the forefront of our implementation, so we took the ‘mobile-first’ approach.

Combining timeless design techniques with minimalism allowed us to explore the simplicity of design and user experience whilst focusing on the things that are important to us as a business.

Stripping back unnecessary elements led us to the positive design you see before you. And by using animation we were able to highlight calls to action as well as reaffirming the actions of our users.

Website Functionality

As one of our core values, building personal relationships was an important part of the new website design. With this in mind, we looked at the UX and ways to make it easy for our customers to get in touch.

By incorporating a contact form on every page of the site as well as using floating buttons for our telephone details we were able to build in key functionality on every page that worked on every device.

We created a floating action button that was ubiquitous across the site and allows users to contact us with one touch.

contact-ff

What we learnt

Through the whole design process for our new look, we explored literally hundreds of options from colour choices and layouts to functionality and style. What we kept coming back to, however, was the need to reflect our core values and show our brand culture.

Your turn

Creating a brand or a website for your business is much more than choosing a colour scheme and a logo. Whether you’re starting a new business or looking for a branding refresh, our in-house design team can help.

Want to talk website design? Fill in the form to get started

Have something to say?

Leave a comment, we would love to hear your thoughts

seven − three =