My Process: Responding to Leads and Designing Websites

A WEBSITE CASE STUDY ON PROCESS

Images: pexels.com and freepik.com

  • Company

    Clickshift

  • Project deliverable

    Website

  • Responsibilites

    UX / UI design and Webflow Prototyping

  • Software

    Figma and Webflow

  • Project timeframe

    On-going

Website address

https://clickshift.webflow.io/

In a rush?
Go straight to the website designs.

BACKGROUND

ClickShift Ltd is a UK based courier company providing movement of goods services through its website. Inactive, the website needed a modern redesign to improve the brand image.

ClickShift before redesign

The purpose of this article is to demonstrate how I went about redesigning the website from getting a lead to initial designs.

This article will show you:

  1. What to say in your First Meeting.
  2. How to Write a Proposal.
  3. How to Write a Statement of Work (Scope document).
  4. How to Understand the Problem.
  5. How to Plan.
  6. How to approach Design.
MAKING A START

A website project starts with a lead, your client is interested and the ball’s now firmly in your court.

What should you do? 🤔

Ball’s in your court. Now what?
STEP 1

Make Contact

You’ll need to find out more about the requirements for the project by asking questions like:

  • Who are you speaking to?
  • What is their role in the business?
  • Are there any other stakeholders/decision makers?
  • What does the business do and how they provide value/Unique selling point ?
  • What are your products and/or services?
  • Where do they sell?
  • What outcomes are required from the website project?
  • What is working/not working? What needs a solution?
  • Who are their customers?
  • What metrics do they use to define success?
  • What is your budget?
  • What must be included in the proposal?
  • How did the last design experience go?
  • What is the timeline?
Make contact with your client
Photo by Anna Shvets from Pexels

Show that you have understood what has been discussed by summarising your meeting and confirming what needs to be seen in the proposal.

Determine a timeline for the next steps and provide an estimation based on their budget.

From the information you gather define what they need in the proposal document and the solution that you will provide.

For further information: First Client Meetings: What Questions to Ask

If the website sounds complex you might need to organise a face to face meeting but for small websites (5 pages or so) you should get enough information to write a proposal.

STEP 2

Write a Proposal

The website proposal is your way of convincing the client that your company is right for the job. But how do you go about writing one? What information should you include?

Write a proposal
Photo by Retha Ferguson from Pexels

The proposal should contain the following pages:

  1. Who you are.
  2. Goals and objectives of the project.
  3. Recommended solution.
  4. Benefits.
  5. Price and timeline.
  6. Testimonials.
  7. Case studies.
  8. Next steps.
  9. Terms and conditions.

I wrote How to Ace your First Website Proposal. Unfortunately this won’t show you how to layout the pages so go ahead and Download the Proposal I Sent to my client. It’s based upon the Futur’s Perfect Proposal, which I’d recommend as a starting point.

STEP 3

Write a Statement of Work (Scope Document)

A Statement of Work (SOW) is an agreement between you and your client about what’s included in your website project and what is not.

It lays out what deliverables are to be produced, how much the service will cost, the timeframe in which the contract will be fulfilled and the terms and conditions.

SOW’s take a ton of time to put together, so do you really need one?

The simple answer is yes.

With all large projects your client will want to see exactly what they are going to get for their hard earned cash. A SOW is essential to avoid scope creep and any arguments down the road on what was or wasn’t agreed.

Once this has been agreed and signed by both parties, and let me congratulate you for getting this far… you can move onto the website discovery phase and get on with the job!

For more information about SOWs read : How to Write a Statement of Work by the Digital Project Manager.

Kick off meeting
Photo by Christina Morillo from Pexels
STEP 4

Understanding

This will be the first kick off meeting after the contract has been signed.

You’ll look at getting more information from the client by asking some questions:

  1. What is the business problem?
  2. What are the business goals?
  3. Who is the target audience?
  4. What is the user’s primary pain point?
  5. What is your solution?
  6. What is the primary user goal?
  7. What is the business’s unique selling point?

These questions are necessary so that the project sets off in the right direction. By understanding the business problem, objectives and end users, you’ll be able to design a website that:

1) Speaks directly to the users and solves their problems and…
2) Maximises the chances of success by meeting your client’s business goals.

Photo by cottonbro from Pexels
1. BUSINESS PROBLEM

The current ClickShift website is inactive with little traffic. Couriers rarely pick up jobs from the website.

2. BUSINESS GOALS

Modernise, improve website credibility, monetize and streamline processes.

  • The solution was to modernise ClickShift in order to increase website credibility with its users.
  • An improved brand image and trust in a company leads to longer dwell times and conversions.
  • Monetize the website. The courier will pay a percentage of each job to ClickShift.
  • Improve current booking system and instant job placement with couriers.

Measurable target examples

Your client will advise on these metrics. For example:

  • 10% increase in site traffic.
  • 5% increase in online sales. 
  • 12% increase in courier signups.
3. TARGET AUDIENCE

Online shoppers and private private individuals who are looking to quickly move goods.

The secondary audience relates to ClickShift’s professional courier members who will be moving goods.

4. PAIN POINT

Finding a reliable and speedy courier company to move goods is a difficult task.

In fact, 4 in 10 consumers said that speed of delivery is important to them and they are prepared to pay a premium to have their goods transported quickly.*

*Source: Mintel

5. SOLUTION

A platform that connects customers with couriers, providing quotes for the movement of goods.

Keep this simple, it will make planning easier.

6. USER GOAL

Get a quotation’.

Focusing on the main user goal will help to focus the website.

7. UNIQUE SELLING PROPOSITION

ClickShift’s unique selling proposition is speed, ‘Quick listings and quick matchings’ and this competitive advantage will be promoted on the website along with a host of other benefits/features.

The USP can be used on the homepage and will complement the user goal.

Following the kick off meeting you will want to find out more about the business’ competitors and users. This will involve research and creating user personas.

  • Research competitors.
  • Research users.
  • Define a user persona.

You can find out more about my approach to defining user personas and their needs in the following case study, ‘My process of creating a buyer persona from an online survey’.

For the purpose of this article let’s now move onto the visual design which will involve looking at the client’s brand.

VISUAL DESIGN: CLIENT BRAND

The brand direction is important in determining how users feel when they come to the website.

What is the ClickShift Brand?

  • Trustworthy Not casual and unconcerned.
  • Professional Not salesy.
  • Credible, dependable.
  • Approachable and business like.
  • Clean and simple, cut to the chase.
  • Memorable.
  • Confident and supportive.
  • Humble not boasting.
  • Energetic, upbeat NOT slow.

By understanding your client’s brand you can make better decisions on font choice, colour palettes, image selection and written content.

WIREFRAMES, MOCKUPS & PROTYPING

After I’d determined the visual brand I moved on to creating Pinterest boards where I gathered inspiration to progress website ideas for layout, visual style, typography and colours.

Recommended reading: My UX website design process.

The purpose of the homepage is to provide quotations whilst promoting a professional and trustworthy image of the company.

Callouts (1 – 6):

  1. Horizontal navigation – Main page sections, login/signup and signup for couriers. Blue button serves as a secondary call to action.
  2. Quotation form – Placed at the top of the page to maximise visibility and engagement. Green button serves as a primary call to action. ‘Need help’ button placed out of the way but visible should users need to speak to an operator.
  3. What users say – Provides social proof and engenders trust in the business’ services.
  4. Why use us? – Users needs are speed, reliability and great customer services. This section reminds the user of why they should do business with ClickShift.
  5. How it works – Demonstrates the simple 3 step process from quotation to delivery.
  6. Footer and mailing list signup  – Quick links to main areas of the website. Mailing list signup to reconnect with website visitors through latest rewards, special offers and discounts.

Designing forms

  • The purpose of these forms is to firstly allow registered customers to login quickly and easily through their emails and social media accounts.
  • Secondly, new account creation, will help to collect leads by promoting the benefits of sign up through discounts and other incentives.
  • When designing forms there should only be one primary call to action on each page. In the above visual I refer to the green ‘Login’ button and ‘Sign up’ button on the create an account page.
  • All other secondary buttons are displayed as ‘ghost’ buttons – transparent buttons with a simple border in order to differentiate them in importance from the primary call to action.

I can help your business to improve the effectiveness of its website and increase conversions.