Stuck to Unstuck; getting our own website design project moving

Working on your own website can be one of the hardest things for a design agency to do. I even recorded a podcast about how difficult this can be. Our old site was showing its age and as a business we’d moved on – we needed something that better represented who we are and what we do today. We tried kickstarting the process several times over the past year or two and fell into the trap of always beginning with the case studies. We felt that we lacked the ability to tell our own story. On each attempt we always stalled as we lacked a cohesive communication strategy for how to write about ourselves.

Old website design to new

Following research into our analytics it was clear that users were looking for more content about us, who we are and how we work. Our old site had a major deficit here, so we came to realise that before we can figure out how we should talk about our work, we should first figure out how we talk about ourselves. Talking about the work should then follow naturally. We needed to make the written content – rather than the case studies – our primary focus.

We collected notes accumulated over time from various team members but always seemed to fail at bringing them together into a unified message that we felt reflected us. We lacked the objectivity to take a step back and write about ourselves in a way that felt approachable and successfully communicated us and our values to potential clients. As part of the UX process we’re used to helping craft copy to reflect other businesses every day, but we were too close to this problem to think objectively about it. So we enlisted the help of Anna from InkSpiller.

Anna ran a workshop that helped us establish our core values, tone of voice and do a bit of soul searching about what Every Interaction stands for. Using this and nuggets from our various past notes she began to construct a new brand communication strategy that lead to the 1st draft of a new copy doc.

We didn’t want to put any constraints on the exercise by writing for a predetermined sitemap, instead we wanted the message to be correct and backwards engineer a set of pages from the new copy. Anna set about writing in a web-friendly way, and through several iterations with us built up a version of the content we all felt gave an honest and fresh perspective on Every Interaction, what we do and what working with us might be like.

website copy card sorting exercise

Once we felt the copy was right, we took Anna’s words and put them through a card-sorting exercise. As natural groupings of content began to distill, labels started to form that gave us the shape of our new sitemap. This was a particularly useful exercise as it made us realise we had 3 distinct ‘about’ sections that we wanted to include; Working with us / Our approach / About us. We created a new sitemap and wireframes to test the updated navigation structure and page content in situ before starting on the design.

When we started this process we were thinking of replacing the entire website anew. We had grand plans for new case studies and an updated resources section, all built using a static site generator rather than wordpress. However we knew that creating an entirely new website was no small task, and fitting it around client work may take many months, or longer. We didn’t want this great new copy to sit unused for all this time, so instead we decided to make an interim update to the existing site.

Without replacing the CMS or making too many changes to the templates we began work on an updated design that allowed for the new content to be put to use and give our site a slightly fresher look. This involved a navigation update, new fonts, a new template or two and subtle tweaks to existing templates to bring it all in line.

The case studies have remained largely unchanged, but as a stopgap before we have time to replace them we decided to start writing project stories on our blog. We link to these from the case study pages and they do a good enough job for now of fixing our case studies biggest shortcomings. We’ve put these live for both LooWatt and Barrocal so far and intend to extend these over time for other projects.

liked to loved

Part of the challenge was making the homepage feel more alive, and adding something that instantly communicated what working with Every Interaction is like in a fun and engaging way. It started with a definition that came out of a mentoring session of what we think UX is and how we use it. Distilling it to it’s most simple representation UX is about getting you from A to B. In this visualisation UX is the ‘to’ or an arrow from the beginning to end point – it’s the journey, and we wanted to express that working with us and bringing design thinking to your organisation is about going on this journey. We liked this concept and extended it into a range of statements, starting with A – B. The final result is the animated panel on the homepage you see today.

Overall we’re very pleased with the results and exceptionally glad we took a content-first approach and enlisted the help of a specialist copywriter to help get us there. We plan to treat other sections of the site as future micro/side projects that we can continue to work on and evolve over time, and hopefully start to think of our own site as a ongoing and iterative project rather than something we let linger and grow to dislike.

We’d very much like to hear your thoughts on the update – drop us a line.

 

Every Interaction September 23rd 2016

You might also be interested in...

  • Cyber security campaign gone wrongCyber security campaign gone wrong The Home Office here in the UK recently launched a new campaign to raise awareness about cyber security for both individuals and businesses called Be Cyber Streetwise. The campaign consisted of print ads and a website which focussed on a […]
  • Every Interaction Featured as Top UX Agency in UKEvery Interaction Featured as Top UX Agency in UK Top chefs and food critics say that the most memorable meals aren’t the ones that have long ingredient lists or are complicated to prepare. They’re the ones that include high-quality ingredients that let the natural flavours shine […]
  • From vision to reality. Creating a new hotel.From vision to reality. Creating a new hotel. Back in 2011 I worked with branding agency Winkreative who had been approached by property developer José Antonio Uva. Winkreative were tasked with helping communicate his vision for the transformation of an estate in Portugal’s […]

Product Design

The ‘Product’ is the website, service, application, interactive thing being worked on by the business. The practice of Product Design is similar in a lot of ways to UX Design. It involves the coming together of many specific design disciplines...

Call to action (CTA)

A call to action is a marketing term that refers to a prompt that invokes a response leading to a sale. When referring to a call to action (CTA) in the digital design world we usually mean the interactive element that leads to the next step in the experience - something that needs to be clicked or tapped.

User testing

User testing refers to a technique used in the design process to evaluate a product, feature or prototype with real users. There are several reasons why you might want to undergo usability testing, the most common is that it allows the design team to identify friction in a user experience they are designing, so that it can be addressed before being built or deployed.

WYSIWYG

WYSIWYG (pronounced WIZ-ee-wig) is an acronym for "What You See Is What You Get". It helps identify an an interface that allows user input resulting in an output that is rendered in a similar way. For example; a word processor application interface might resemble a piece of paper,so when printed the user can see how the output will appear.

Content Management System

A content management system (CMS) is an tool that allows a website editor/administrator to manage the content that is displayed. Websites are made of HTML and CSS to create pages. Pages can be hard-coded but would require technical development skills to make changes. A CMS usually allows a person without coding knowledge to amend existing and add new content to a website using a WYSIWYG interface.

Responsive Web Design

Responsive web design refers to a web page that dynamically adapts its layout to fit the size and orientation of the device on which it is viewed. A responsive design allows for a more optimised user experience across desktop and laptop computers as well as smartphones and tablets of varying sizes.

User Stories

User stories allow the functionality of a product or service to be expressed as written descriptions of an experience as seen from the users perspective. The writing of user stories creates a list of design and development tasks to complete in order to create any required functionality.

User Interface

A user interface (UI) is a conduit between human and computer interaction - the space where a user will interact with a computer or machine to complete tasks. The purpose of a UI is to enable a user to effectively control a computer or machine they are interacting with, and for feedback to be received in order to communicate effective completion of tasks.

Personas

A persona in UX Design is the characterisation of a user who represents a segment of your target audience. On a project you might create any number of personas to be representative of a range of user needs and desires. The solutions you design must answer these needs in order to deliver value to your target audience.

Card sorting

A great, reliable, inexpensive method for discovering patterns in how users would expect to find content or functionality. Card sorting is used to test the taxonomy of data with a group of subjects, usually to help inform the creation of the information architecture, user flow, or menu structure on a project.

Brainstorming

A technique used to generate ideas around a specific topic. Often done in groups, but can be done individuals. The process usually involves writing down all ideas around a topic onto paper, a whiteboard or stickies often implying some kind of association.

Minimum Viable Product

An MVP is a product that has the minimum set of features to prove the most essential hypothesis for a product. Businesses building a new product can create a Minimum Viable Product to prove that an idea is viable and warrants further investment. A further benefit being that the next stage of development can be informed by feedback obtained from testing that MVP.

Sitemap

A sitemap is a diagrammatic representation of a hierarchical system. It usually depicts the parent-sibling relationship between pages in a website, showing how sub pages might be arranged underneath their parent groupings. This arrangement forms a map of the site.

User journey

A user journey represents a sequence of events or experiences a user might encounter while using a product or service. A user journey can be mapped or designed to show the steps and choices presented as interactions, and the resulting actions.

Prototype

A prototype is draft representation built to test ideas for layout, behaviour and flow in a system. Prototypes are an indispensable tool for resolving a large number of potential issues in a concept or business before too many resources are deployed to put a design into production.

Wireframes

A Wireframe is a visual schematic that conveys a basic level of communication, structure and behaviour during the design of a system. Wireframes are low-fidelity designs that bypass including a detailed user interface or visual design, conveying just enough to get across the core idea.

Usability

To say something is usable is a qualitative statement about how easy that thing is to use. Usability is an assessment of how learnable a system is and how easy a user finds it to use. The usability of a system or product is a key factor in determining whether the user experience is a good one.

Information Architecture

Information architecture is the design and organisation of content, pages and data into a structure that aids users understanding of a system. A more organised system enables users to more easily find the information they require and complete the intended tasks.

UI Design

User Interface Design is the discipline of designing software interfaces for devices, ideally with a focus on maximising efficiency, responsiveness and aesthetics to foster a good user experience.

UX Design

The practice of User Experience (UX) Design is the coming together of many specific design related disciplines to improve the usability, responsiveness, uptake and aesthetics of a product or service.

User Experience

A general term that covers all aspects of a user's participation while engaging with something that has been designed. Usually when talking about User Experience in the digital design field it refers to the interactions, reactions, emotions and perceptions while using an app, service, website or product.