Creating Low Energy Impact Website

Creating low energy impact websites

Sustainability is at the core of our business. We are continuously working to implement processes that are in compliance with our vision and values. When developing a website, we will ensure the following are met throughout the project development cycle:

User experience

  • users have to be able to access the information efficiently
  • the navigation has to be easy to understand to avoid clicking the wrong pages
  • essential information has to be easy to access
  • use existing patterns and only break them when needed (logo left top, contact page as last menu item etc)
  • test the on-site search for efficiency, so users are able to find what they need using common queries e.g. phone number -> contact page
  • easy to find information through Google, make sure pages are tagged with the right keywords
  • when linking rich media show filesize/warning if possible to inform a customer about the size of the content, for example, “download pdf [146mb]”. or make sure to inform visitors when links are external.

Media and Content

  • images are always optimally compressed
  • reuse images when possible
  • optimal file format for images (svg/png/jpg)
    • JPG = photos and colourful images
    • SVG = vector based illustrations, drawings and logos
    • PNG = in case SVG is too large, transparency
  • web fonts, popular Google fonts are more likely to be cached


  • make sure all caching methods are used
  • use popular hosted libraries like Bootstrap and jQuery
  • retina images only served on retina devices
  • clean, efficient code! (ask a developer to check)
  • use of Javascript: make sure the impact on the end user is minimised
  • lazy loading, only load content if it’s going to be seen by the users
  • consider preloading pages, no need for a refresh when loading another page


  • hosting with renewable/green energy
  • green/sustainability policy
  • ask web developer for any optimisations we can do?

Conscious Tradeoffs

We sometimes have to make tradeoffs, we have to make sure they are conscious tradeoffs, examples of these are:

  • High-quality videos
  • heavy use of javascript
  • different pages
  • external links
  • breaking common UX patterns to create some kind of delight

Discovery & UX

Why Discovery & UX ?

So many reasons..!

Think about it… Would you write report without doing any research or knowing who it was for…?

When it comes to creating websites, we always discover who the client is, their budget, their motivations. It’s important to remember that we should always understand the basic UX context as well:

  • Basics: User groups and what goals the project helps them meet or pain it helps relieve
  • UX development happens on every project anyway, just often implicitly / intuitively, however if we follow a (light) process this will make sure we don’t make false assumptions
  • Risk management: If the client doesn’t know these basics are they really ready to do the project..?
  • If we don’t know them, how do we know how to approach it? How can we quote for it?
  • A simple questionnaire (before we quote) is all it takes.

UX first

  • Makes much more sense than Mobile first!
  • Is a recognised strategy in industrial design, and B2C business in general:
    Design products/services for the user!
  • Of course our customer, the client, has requirements: they will (always?) be
    best served by designing UX first.

Agile UX (!)

  • UX needs to be tailored to every project, and that is always a work-in-progress
  • Deliverables are not end-points but snapshots, needed for communication and validation
  • Launching a site is not the beginning nor the end of the client’s relationship with their users…
    It’s the start of (data-driven) optimisation and evolution: the UX should facilitate this
  • Be creative! E.g. Is a different approach to Personas useful for a particular project?

Main Steps

1. Discovery (Questionnaire) + Compilation

  • Them (sector, products/services, background, future, etc…)
  • This project (motive, risks criteria for partner selection, key dates etc)
  • User Groups + Goals / Pains (customers, partners, internal)
  • Can also infer groups from Analytics / other data if available.

Then compilation:

  • Compile and describe back to the client in their own words to check we are
    correct and to reassure them –  Chose appropriate documentation format for project: e.g. Summary UGs, UG Map / graph.

2. Persona Development

  • Can be valuable even for smaller projects, as memory/empathy aid
  • Can be done in 30 mins (pretty presentation is slooooow)
  • We should sell to the client that they can use elsewhere
  • Start with user groups
  • Don’t forget internal user groups, especially if have specific needs of the site
  • May need to conduct survey / conversations with users directly
  • Details: Who they represent, Demographics, Key traits (1 word), Touch points (e.g. devices, real world, phone), goals, pains. Also orgs goals for them
  • Memorable (e.g. alliterative names like Memorable Melanie)
  • Validate: Internal communication with those closest to each, and if possible
  • Direct communication with representative sample.

3. User Journey Development

  • Can be valuable even for smaller projects, to clarify IA
  • We should sell to the client that they can use elsewhere
  • Start with user group’s goals –  people go on journeys to meet their goals (which may be to relieve pains)
  • Trigger(s)?
  • Starting points  – May be offsite – important to consider as may require a landing page for example
  • Validate: Internal communication with those closest to each, and if possible direct communication with representative sample.

4. Site map

  • Identify content and functionality required to enable the Journeys
  • Iterate a overview structure to contain these (work in progress until the end!)
  • Re-evaluate quote and timelines based on this?

5. Narrative arc/funnel -> Hierarchical Wireframes

  • For each key page in Sitemap consider Hierarchy of content/ functionality
  • Can use Narrative Arc/Funnel as a tool to aid this.

6. Layout wireframes + Click model

  • Wireframes are falling from favour.. Higher-res mockups, even interactive click-models, more useful (see how text will fit,
    interactions etc).

7. Design/Mockups and so on…

What are User Journeys?

Not just a UX deliverable!

The are a series of steps (typically 4-12), which represent a scenario in which a user might interact with the thing.

You are designing:

  • Demonstrating the way users currently interact with the service / website / product
  • Demonstrating the way users could interact with the service / website / product.


  • Demonstrating the vision for the project – user journeys are a great way to communicate what you are trying to achieve with stakeholders. They show an example of what the future state of whatever it is you are designing could be. Along with personas they can be one of the key outputs from the requirements gathering stage at the beginning of a project
  • They help us understand user behaviour – User journeys can help you work out how users are going to interact with your system and what they expect from it
  • They help identify possible functionality at a high level – by understanding the key tasks they will want to do to you can start to understand what sort of functional requirements will help enable those tasks
  • They help you define your taxonomy and interface – By understanding the ‘flow’ of the various tasks the user will want to undertake you can start to think about.


Not just a UX deliverable!

  • Start towards the beginning of a project in the discovery or requirements gathering phase,
    normally after personas. This is both to visualise the user requirements and help feed into other design activities such as information architecture or wireframing. However, they can also be used further down the line when scoping out pieces of functionality in more detail
  • Focus process on ‘User First’
  • Clarify Client requirements: for us and for them!
  • Communicate: to client, devs, QA.


First personas:

  • User’s goals
  • Motivations
  • Current pain points
  • Overall character (personas)
  • Main tasks they want to achieve
  • Text based
  • UML Activity Diagram
  • Story board
  • Experience Map.

At each step:

  • Context – Where is the user? What is around them? Are there any external factors which may be distracting them?
  •  Progression – How does each step enable them to get to the next?
  •  Devices – what device are they using?Are they a novice or expert? What features does the device have?
  • Functionality – What type of functionality are they expecting? Is it achievable?
  • Emotion – What is their emotional state in each step? Are they engaged, bored, annoyed?


How to Add a Website to Bread Board

We use Bread Board to keep track of all the websites we work on. So, if you’re a project manager then you will need to add all the websites you work on to Bread Board (BB).

Here’s how to do this:

  • Install and activate the plugin to the website you’d like to add. For the time being, make sure you run only version 1.1.1, do not update to the latest version
  • Within the admin area of the website you’d like to add, navigate to the BB admin page (under Settings) and copy the token key
  • Create new client within the BB admin area.

Then, add the following info:

  •  A self-descriptive title, i.e. “name of the website”, add “- dev” to it if needed
  •  In the content area, add a little background information about the project/client
  •  Website URL
  •  Security token (that you got from the plugin)
  •  Where the website is hosted
  •  Client info i.e: name, email and phone number
  •  The email address of all the Wholegrain team members that took part to the project, i.e: PM, developers & designers


  • Select the status at the top right (live OR development + signed for support)
  • Publish
  • Then, go back to the BB admin page (under WP Settings), add the full URL of the new client post in the “Bread Board URL” and save.

Handling Enquiries

Here’s how we manage projects, from the initial enquiry:


Most of our new leads come via the phone or through or website. We don’t really ‘do’ sales, we just build great relationships.

We keept track of all of our projects using RedBooth. You can read our RedBooth Guide to find out how we use it.

Telephone enquiries

If you take details of a new lead over the phone, be sure to make a note of the details and record it in RedBooth under the Wholegrain Leads workspace. This ensures that we can keep track of it, whether you take the enquiry on yourself or pass it to someone else.

Website enquiries

These always go first to Amina, Vineeta, Mohib and Rachael. Mohib or Rachael will add these leads to RedBooth as appropriate and only assign you if this has been requested. There will be details of the enquiry and next steps in the comment box when you go into the task assigned to you.

Once you have all the details you need, you can then prepare a quote for the proposed project using Quotient. If you do not have access, Mohib or Rachael can help you with this.

Project Management

Once you begin working on a project, you are expected to keep track of all the billable and non-billable hours for it so that we can invoice appropriately at suitable intervals. You can find out more about tacking these project hours in the Granary article on Time sheets. We will soon be recording everything in Hopper, which will make this much easier.

To keep track of the tasks that need doing, we create a new workspace for each project in RedBooth and add tasks for the team on the project here. It’s handy if you record hours here too, so you can quickly see how long was spent on each task should you need to check or confirm anything.

Unless it’s a really small job, we invoice 50% of the quote upfront before we start work on a project, then the remaining 50% plus extras at the end. Rachael takes care of the invoicing and you can find out more about the process in The Granary article, How to raise an invoice.




Communicating with clients

The way we communicate with clients is especially important because much of our communication takes place via email and over the phone. It’s always preferable to meet a client in person at least once, as meeting face to face helps to build stronger relationships, although of course this is not always possible.

Below is a list of the ways we connect with clients, but whatever channel we use it’s always important to be friendly, honest and open and to be mindful of the language we use in any communication and how the client may receive this.


Much of our communication with clients is via email. Please read our email guidelines for best practice when writing emails.


We take turns manning the main phone line through Soho 66. If you will be manning the phone line we will send you a short video with instructions, so you know how to ensure calls are also directed to your (work) mobile.

There are a couple of articles in The Granary that may be useful to have handy when dealing with phone enquiries:

Phone Handling

Questions to ask of new enquiries.


We often use Skype to hold face to face client meetings when we are not able to meet in person.

Internal Communication

Of course it goes without saying that here at Wholegrain, we treat each other with kindness and respect, and communicate in a way that reflects this.

Being a team that works mostly remotely can pose a challenge. However, regular communication through a variety of channels helps to stay in touch and build strong relationships with our colleagues, wherever they may be in the world. Here’s how we do this:


We use Slack to communicate as a team. You’ll be added to our team Slack following your induction and you should always sign in when you are working so that the team can easily get hold of you. Slack is a bit like an internal twitter – you can send group messages, personal messages and tag someone with a @reply. It’s a great way to stay in touch with each other and not only for work related chats! We have several channels within which we talk about things we care about and get to know each other better. It also possible to make calls with Slack, although this works better some days than others!

You must have your details up to date on slack, such as your phone numbers (work and personal in case of emergency) and Skype ID. This is important so that a member of team can contact you or pass your details on for clients to reach you.


We use RedBooth to keep track of all projects – all your tasks will be sent here and you can create your own tasks as well. Its features enable you to assign tasks to individuals or groups, comment on a task, message your colleagues (although we tend to stick to slack for instant messages as we all have this open more of the time) and much more.

Your role will define which workspaces or tasks you will be involved in. There is a Wholegrain Guide to RedBooth here on the Granary, with further information about how we use it to manage projects.


It is recommended to have a Skype ID in addition to Slack. You can use an existing ID if you have one. This is both as a backup to our internal channels (and it’s nice to see each other sometimes when we’re working remotely!) and is also great for contacting clients, especially those we are unable to meet with in person.


Why Wireframe?

Many a time, project managers in the process of creating an awesome website for a client often jump straight from a client brief, into building the required web pages. I have recently come to learn that regardless of how exciting this process might be, it is probably much like an architect building a house without the blueprint. That’s right, even web designers need their very own blueprint, but in our world, it’s often referred to as a Wireframe.


Wireframing is a fun and important step in the web development process which requires a small investment of time prior to starting a project, but saves you from losing a lot of time later down the line. I guess many designers and project managers in the web industry have previously had experience of sending a first mock up to a client, complete with dummy logos, and lorem ipsum, only to have the client return with comments that focus purely on the aesthetic of the dummy logo, and not on the functionality of the page itself. The danger with this is, the client isn’t getting the opportunity to witness the full birth of their new website – and are instead seeing things from a half grown perspective. I wholeheartedly understand why that can get confusing for clients, because they won’t be sure if what they are seeing is the final thing, or a design proposal.

That is where the wonderful wireframe comes to play, to eliminate the gap between great ideas and great confusion. A wireframe is a simple way of understanding the layout of a website from a structural level. It allows you to reflect on the client’s brief and use what you know to arrange their content in the most efficient way, and also to define the information hierarchy of your page designs. For both designers and clients, it’s the best way to imagine the layout and interaction of their page without being distracted by cute typography and pretty colours.


As illustrated above, it will always involve a header, a body, and a footer – everything else can be structured within that, including columns, grids, and spaces to put images at a later stage of the designing journey.


The great thing about including wireframing as part of your project’s process is that it allows you to take a step back from the computer, pick up a pencil and some paper, and draw to your hearts content (along with your clients content). I find that drawing my wireframe by hand first, allows me to understand the fundamental calls to action and other interactions needed on a page. This process becomes a lot more intuitive when it is mindful of the client’s content. Here, you are creating the Information Architecture of the site – yayy, you’re an Architect!

Once I am happy with my drawing, I proceed to recreate it within a wire framing software so that it is in suitable condition/presentable enough to share with a client. Some great digital tools you could use include Go Mockingbird, MyBalsamiq, and Ux Pin. Once I have created my wireframe digitally, I invite the client to view it and comment on the layout, allowing us to work together to implement any fundamental structural changes needed at an early stage. One of the greatest benefits I find is knowing that the project becomes more efficient with wire framing and also UX time too, if the client is able to expand their budget to accommodate that as part of the services they choose. It saves designers and project managers alike from having to later undo big designs or custom coded work, so, happy wireframing!

Taking on an old website (built by someone else)

Sometimes, we may get a request from a company to work on an existing website that was built by someone else. These requests are rarely as straightforward as building a new site, or working on a site that we built ourselves and on occasion, it is not advisable to take on such a project.

Here’s our 3-step process of what to do in these situations:

1. Quick Review

We spend up to 1 hour reviewing the site for free. Based on this brief review, we decide whether:

a. It is a nightmare – don’t touch!

b. We need to review it further (see point 2. below)

c. The website looks clean and simple. We can work on it without detailed review.

If the website looks fine, we can simply quote for the whole project, in which case 50% should be charged upfront. For simpler jobs we can quote our hourly rate and provide an estimate for approval, then invoice on completion.

2. Detailed Review

The client will need to pay for a detailed review. Typically this will be around 6 hours of work but we can adjust the quote based on the complexity of the site.

If the offer of a detailed review is accepted, we will send the client a full report outlining any problems we identify, ranking them as Essential, Recommended or Trivial.

If the client accepts a quote for a detailed review, we should invoice 3 hours upfront – regardless of the full quote – and the rest should be invoiced when we send the final report.

3. Recommendations

Following a detailed review, we will then offer our final opinion, which will be one of the following:

  • All good. We can work on the site with no repair work required
  • We found a few issues that need fixing before we can work on the site. Provide a quote to fix them
  • The site is a hornets nest. Recommend that they build a new website. If they are interested, provide a quote. If not, then simply turn the project down.

The detailed report is good for both us and the client. They should be happy about getting the ‘review report’ because they may want to go back to the previous developers with some questions or ask them to repair it. At the very least, they can make an informed decision about developing their site further because they know what they already have and what problems they might face.

Questions to ask of New Enquiries

When we first start speaking to potential clients at the enquiry stage, there are of course bound to be many questions we need to ask! Below is a list of queries that may be useful at this stage.

Do please bear in mind that although we do need to gather as much information as possible, the enquiry stage is also the first stage in building a relationship with potential clients, so any conversations should be handled sensitively as always. The below questions should of course only be asked at appropriate intervals and as part of an ongoing conversation, to avoid anyone feeling overwhelmed in the early stages.

Questions to ask before an initial quote:

What’s your contact name, email and phone number?

What are you trying to achieve with your new website?

Why do you need a website (what are your goals and aims)?

Would you be able to describe your business in 3 sentences?

What’s your current company brand (colour, fonts, business cards, brochures)?

Do you have any particular likes/dislikes in terms of design/functionality?

Who are your competitors, and how do you differ from them? Do you have any ideas how your web presence can be better than theirs?

Who is the new website aimed at? What would the visitors come for and what’s their background?

What sort of content and features do you need?

What’s your budget? Our guidelines are £4-6K+ for theme modification & £20K+ for custom built

What platforms/devices will people visit your site on?

What hosting do you need? Do you anticipate large or regular traffic? Please share details.

Further questions for a more specific quote:

How many page templates will you need?

What sort of functionality are you after (what do you want each page to do)?

What services will you be selling on your website?

Do you have any websites that are doing what you’re trying to achieve in a way that inspires you?

How many weeks do we have to complete this project?

Is there anything specific – for example browsers that you want us to make the site work on? For example, on IE some effects may not work, so we may have to find alternative ways of showing the same thing without the effects

Will you be able to provide design for 3 displays – mobile, tablet and desktop? If so, could you please provide them in photoshop (well layered and named layers)?

Things to note/highlight about a theme modification:

We can change the colours to match your preference and any existing marketing materials that you have.

All images and wording will be unique to you.

We will change the navigation links to include the pages that you need.

In future you would be able to add more pages if required.

It is mobile compatible, so the layout will change to fit smaller screens on tablets and phones.

We can remove things like Facebook and Twitter links that you don’t need.

That should be enough to get started!

Once we are at the deposit invoice stage, head over to the Welcome Pack template to create your own version of this, to let the client know what else you will need before we can start work.

Happy relationship building!