Human After All

RE-CONNECTING CREATIVITY

Client: Human After All

Human After All is small creative design agency based in London. Their work includes the recent recent promotional material for the BAFTA Film Awards, and projects for clients include Facebook, Google, Adidas and Honda. The team of 13 also do their own side-project, like there four-year magazine project Weapons of Reason and the Delve the weekly film newsletter.

Team: Kojo Boateng, Sunil Pithwa (lead), Rosana Castano,

Project Duration: 2 Weeks

The Brief

To help create a clear delineation between Human After All client work and side projects.

To find space for their Human After All ad-hoc activities (events, talks and learning events) and differentiate them from their competitors.

The Brief

We began doing stakeholder interviews with the team at Human After all. We interviewed co-founders Paul Willoughby and Danny Miller, Ailsa Caine (MD) and Financial Director Meredydd Lloyd-Jones. They told us that they want the website to be a business tool to showcase the company’s work.

A few points from theses interviews:

HAA want to use the website primarily as a business tool and this is the core of their focus.The website is primarily managed and updated by the CEO using Processwire
HAA have created a style of illustration to accompany their client work, this has not all always been kept up to date and can take up to two weeks to create.
Pinterest is used by some of the designers who have almost 14,000 followers. This is a key driver of visitors to the website.
Their Behance page for is very popular within the design community.

THE DISCOVERY PHASE

We began by talking the team at Human After all. We interviewed co-founders Paul Willoughby and Danny Miller, Ailsa Caine (MD) and Financial Director Meredydd Lloyd-Jones. They told us that they want the website to be a business tool to showcase the company’s work.

User Interviews

We interviewed 10 people at all levels who took part in our survey. They told us that they used Google, Linkedin, Twitter and Instagram to research creative agencies. They used a mobile device but preferred to look at creative work on a larger screen. They also look at agency websites for inspiration sometimes sharing the work on email or via social media.

Survey

In order to understand their business needs, we did a survey to establish what potential clients looked for in a creative agency. Key findings were that people want to see the latest work and projects from previous clients. They also didn’t like contact details that are not clear, poorly written copy and sites which were not up to date or too cluttered. Two thirds of respondents preferred to work with small or medium sized agencies (1-80 people.)

Task Analysis

We did a task analysis with 5 people to see how they used the current Human After All website. When navigating to an article some users didn’t realise when they tapped on some articles that they had left the website and were on the Creativity Connected tumblr page.

Once on Tumblr, users found it difficult to navigate back to the main website. Within a few clicks users were directed away from the website. They also scrolled endlessly down the page trying to find the Contacts information on the Tumblr page. Navigation was inconsistent across mobile and desktop, making it difficult for propel to drill down into sub-categories on the Work page.

Competitor Analysis

We were given a list of 5 competitors by Human After All, which we used for our feature analysis and looked at 20 sites for our design analysis. Looking at features, we found only 2 websites we looked at had created separate areas of the website for non-client work.

We found that most used large images to showcase their work. Social media is widely used, in most of the cases to feed updates on the websites. Not all agencies showcase their awards or other their clients.

Creating Personas

Based on the results of our survey and interviews, we created 4 personas to help us identify the key features based on the types of people who would use the website. These ranged from a graphic designer looking for inspiration, to a creative strategist looking for a company with a small agency with a big vision.

THE DESIGN PHASE

We worked with the team at Human After all team to prioitise the features they felt were important. We then did a Design Studio workshop to visualise these ideas on paper. After three rounds of drawing, focussing on the homepage we had generated over 80 drawings in two hours.

Some outcomes from the initial work shop were designs which used large images to showcase work. Homepage layouts which allow people to quickly see what services the company offer.

Paper Prototype

Taking a mobile first approach, our team did a separate drawing session based on these ideas. It was during these sketching sessions that we came up with ‘By ü’ which elolved into ‘Made by üs’ – the umlaut echoing the company’s logo. We felt this sub-brand was a great concept for Human After All to house their side-projects.

We created two prototype for mobile and desktop, which we tested with staff at Human After all and 5 graphic design students from London College of Communications. Key findings were that the Made by üs category was either understood as a home for side projects or people were curious about what it was and tapped on it. People liked the is of large imagery, but were unsure which images would be clickable.

Interactive Prototype

We created an prototype in Invision which we tested with four people from Human After All and 3 people in the field. During testing with Human After All, it also became clear that the tumblr blog would was still an important part of the current website. Also defining their areas of specialism and category’s, so it was easy to identify specific work for clients.

When testing in the field, participants felt ‘Made by üs’ sounded like a statement about the who created the website. We also introduced Twitter and Instagram feed to the home page, to make some updates less formal and human.

Lo-Fi Prototype

We developed a digital wireframe with a square grid structure. We introduced large photographs to showcase the client work and rationalised the navigation and sub-navigation to sign-post the section and the range of work available.

In the visual design, we introduced colour hovers over images to clear define areas and proximity. We introduced a four column grid to create more dynamic layouts. We made category more obvious adding a logotype and a clear description on the page. The layout made better use of the available space. Some feedback was about proximity between images and text something we would like to explore further with the client, to ensure people can clearly identify content areas.

Visual Design

Our design Rationalised the site structure with an emphasis on the needs of potential clients. This decision has also freed up real estate allowing for larger images above the fold compared to the previous website. Giving Human After All a showcase for their work, creating a separate area for client work by creating a separate area which highlights client work, self-initiated projects through the new Made by Us section.

The Final Design

Our design rationalised the site structure with an emphasis on the needs of potential clients. This decision has also freed up real estate allowing for larger images above the fold compared to the previous website. the Made by üs section has given Human After All a place to showcase their work. By creating a separate area for by client by type of project we have filtered how people come to the site based on their specific needs.

Our Recommendations

We would suggest further testing before proceeding on to the next phase of the project. We recommended a ‘social first’ approach to updating the website with new social features like Instagram and twitter allow all staff to make quicker informal updates on projects/ And connect them to broader design community in a visual way. We also would like to explore integrating the Tumblr API for Creativity Connected blog into their current content management system, allowing the new website to inherit all the previous rich content.