Creative website for creative agency

Website design for a creative agency

Project brief

This project is part of my internship project in which I had to design a website for a creative agency end to end.

My role:

Project timeline:

Tools & methods used:

User research, UX Design and UI Design.

One week

User research, competitive analysis, persona and scenario, wireframing, high fidelity prototyping, visual design and usability testing.

Overview

A website design project that gives you full freedom to be creative sounds like a boon to show your creative design skills but can also slide you away from user experience, user goals and business pain points.

Empathize

Research

I started this project with quick research by surfing through the internet reading articles and blogs to get an idea about the market, business and client pain points.

It helped to generate a hypothesis about the project and user needs. From my rough research, the findings I got were.

  • Clients will judge an agency through its previous work, agency resources and financial background.

  • To stand out agency needs to specialise in a niche-specific market and make their purposes clear.

  • People do not hire agency but their culture so it's important agency shows passion in their work.

  • Subscription basis payment system would be more desirable.

1. Need high conversion through website. 

2. Website targets potential customers and market.

3. Inclusion of creativity in the website to stand out from the rest without compromising user experience.

1. Long navigation through agency websites without knowing whether it's worth their budget and time. 

2. Getting overwhelmed by the number of services company offers. 

3.Unclear quotations with hidden charges and no option to keep track of their project progress after booking.

Business pain points

User pain points

User research

Now it was time to bust my myths by gathering some in-depth data through user research. I conducted an online survey on around 30-40 people who were marketing managers, consultants or potential clients to gather insight about their past experiences with the creative agencies, what are their expectations from them and what problems do they face while working with them.

The survey included questions like:

 

  • How would you normally search for a creative agency?

  • How often would you trust an agency which provides quality services, is in your time and budget but has no major client list?

  • What method would you prefer for pricing?

  • Try to remember the last time you rejected a creative agency what was the reason?

  • What problems do you generally face with a creative agency?

  • Tell us the features/information which you would want your go-to-agency to have on their website?

User Persona

Hypothesis vs User Research

User research helped to clear my myths and assumptions I made earlier on the project. One of the biggest was the payment method a client would prefer while booking a creative agency. 

Other conclusions were:

 

  • Clients mostly come through referrals and recommendations rather than google search or social media.

  • The major client list is not a big issue until and unless the agency fits the client's time and budget.

  • Lack of communication can lead to problems like unclear quotations and charges, gaps between what was presented and what was delivered and lack of understanding of business needs

  • No option to keep track of progress resulted in skipping of project deadlines.

Define

Problem Statement

Clients wanted to book a niche-specific agency which can understand their business goals. They also wanted to have transparency between them through good communication both via offline and online mediums.

User pain points can be divided into four categories

  • Quality

  • Trust

  • Cost

  • Time

Ideation

User flow

I created a user flow to empathize with my user on each step of their user journey on the agency website. It helped me to come up with potential problems my user will face and ideas to solve them to make the user experience on website seamless and meaningful both while surfing the website and after booking the agency.

Sitemapping

Sitemapping was done to understand the structure of the website. It made navigation easier while creating high fidelity prototypes and to deliver it to the web developer to show how the content will be organised into screens and sections and how our user will transition from one section to another.
Home Page

High Fidelity Design

After brainstorming and user research I started off directly with high fidelity UI design. Low fidelity designing was skipped due to the fact the agency needed their website to be creative, interactive and which breaks the general rules of web design. Jumping on to high fidelity design gave me more options to brainstorm creative UI ideas more easily.
One on One chat function is provided on the homepage.
On the home page, the agency services are given priority over their portfolio as the second most type of clients who lands on agency website via internet need to know what agency offers so that they can make up their mind in a first glance whether the agency is the right fit for them or not saving their time from long navigation across the website. As far as the clients who come through referrals are concerned they already know about the company services and can skip to the portfolio to check the quality of work produced.
Latest projects are shown on the homepage. The users can directly move to the portfolio to check the quality of work. 
Two call to action is provided on the homepage so that the user doesn't need to move back and forth on the page for booking. Apart from homepage call to action has been provided on each and every page of the website with different terminologies as the human brain scans for themes and patterns that help it to process the information faster. This psychology of repetition used here will let user correlate the action of working with the agency by the time they will reach CTA.
Portfolio
Projects page with case studies
The case studies include project timelines to give an idea about the company's efficiency and quality of work with regard to deadlines. It also gives an idea to the user regarding the company's work ethics and approach followed for a certain project.

Two contact forms

I have created contact form aka quote generator for a creative agency website. I came up with two form options for mainly two types of clients.

1.Those who come through recommendations and need a direct quote.

2.Those who are new to website and want to drop general enquiry.
The team page is made which speaks for the company's brand values and work culture i.e professional people in a fun environment. The team page is designed to give the user a glance of the agency's work environment that helps to build trust between the agency and the user.
The main problem that arises when working with the agency is after booking them. The users were not able to keep track of their project progress which led to miscommunication leading to missed deadlines or poor deliverables. I designed a live chat option where users can keep track of their project progress by just entering their credentials along with project id which will be given to them at the beginning of the project. Here users can avoid calling the agency daily or long threads of emails for quick and short queries and feedbacks regarding their project.

UI Design System

Font Used

Proxima Nova
Regular
Bold
Thin
Heading 1
Heading 2
Scale 1.25 Major Third
Heading 3
Heading 4
Base size 50px
Heading 5
Heading 6
Heading 7
Heading 8
Heading 9
Heading 10

Colours

#272C35

#141414

#FFFFFF

#FF6627

© 2020 by Surabhi