Focus Group

The client requires a website creating to promote their business in the local area surrounding Hull. They are called Acorn Roofing and require somewhere to tell their potential customers about their business, show the portfolio of work and give them the contact details they require to contact them. They obviously want to portray a reliable, upfront and fast service to their customers. The service will be used by people who need their roof fixing, which is obviously, something that usually needs doing fast, but at the same time, certain jobs can be bigger and take longer to consider, the client needs to show that they can handle any job, regardless of how small or large the task may be. I need to make sure the customer is aware of the company’s reputation by showing that they have had years of experience in the market. This can be done using before and after photos of a roof in which the company has worked on. Social networking can also be linked with the page to help advertise the company further for free, by showing people that the work the client does improves the neighborhood and will create intrigue and more potential customers.

I need to look at competitors to see what works for them, I contacted many local businesses to see how their website create leads for their businesses, many did not reply or were unable to give me the information I required. I also did a bit of research of a couple of interesting sites, some I thought were good, some I thought were awful, I did a bit of research on the amount of staff they had and how much the company brought in financially. I then got a group of people together, allowed them to use the website for a few minutes and then asked them questions about their experience so I could understand what are the best things to implement in my own initial designs.

Hobson & Porter is a local business that deals with “Commercial, Housing, Healthcare, Industrial and Education property”. It staffs approximately 132 people and has average yearly revenue of £48,804,256. Their website is broken into 6 sections, home, about, projects, news, contact, search and social networking. I sat with a focus group and decided what was good and bad about this website.

Dodds Roofing Services is a local roofing company that deals with commercial and industrial properties. They are a much smaller business in comparison to Hobson & Porter as stated on their site H&P deal with multi million pound investments while Dodds Roofing are on a much smaller scale. You can see this in the style of their website and the design, again I sat with a focus group and tried to determine the good and the bad.

Willerby Roofing Company is a Yorkshire based company that works on commercial properties. Key aspects of the work they do include solar and loft conversions, they aim to hit a different target audience compared to H&P and Dodds. They tend to a large area but aim to complete a lot of work in this area. This is very much how Acorn Roofing operates, so the feedback I get from my focus group is going to be very important to the development of my initial designs.

Bracknell Roofing are a nationwide roofing company that deals with commercial properties. They are part of a multi-national group Etex group which has a yearly revenue of 1.8 Billion Euros. Operating in 42 countries with roughly 13,500 members of staff worldwide, this company are pretty big. I should definitely be taking what I learn from our focus group for this site and seriously considering it for implementation in my initial designs.

Letchworth Roofing are a large contractor working in the area of Lancaster. It deals with Industry, commerce, building surveying, retail, health, education and churches. They have a workforce of over 50 people and have made in exccess of $8 Million. They have been operating since 1971 which is still 8 years less than H&P who have made 5x times more than Letchworth. This would indicate that H&P are one step beyond it’s competitors, or that Letchworth aren’t up to the mark, let’s see what our focus group make of their site.

Which one of the five do you prefer & hate?

Hobson & Porter is more proffessional. They look like they do bigger projects, but depending on the size of your build, you may think they aree too big.

-Yes I would agree, it is bright, takes full advantage of the screen, colourful and simple.

Dodds is the worst, it looks more complicated with too many tabs. It just doesn’t grab me.

-Its not very informative, not easy on the eye, the images are too small.

References:

http://en.wikipedia.org/wiki/Competitor_analysis

http://en.wikipedia.org/wiki/Focus_group

http://smallbusiness.chron.com/market-roofing-company-57536.html

http://www.manta.com/ic/mtz7kvh/gb/hobson-porter-ltd?utm_expid=82789632-21.i-w9zu_KTIaAx03OIeHK9w.0&utm_referrer=http%3A%2F%2Fwww.google.co.uk%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3D%26esrc%3Ds%26source%3Dweb%26cd%3D3%26ved%3D0CDAQFjAC%26url%3Dhttp%253A%252F%252Fwww.manta.com%252Fic%252Fmtz7kvh%252Fgb%252Fhobson-porter-ltd%26ei%3DCgBFVLvZHOO07QbChYHwAw%26usg%3DAFQjCNFLKmC22RceraS_Eskfw7acEWpBiw

http://www.hobsonporter.com

http://www.doddsroofing.co.uk/Roofing_York_Home.htm

http://www.willerbyroofingcompany.co.uk

http://www.bracknellroofing.com/About-us.aspx

http://www.letchworthroofing.co.uk/Home-Home-Page-41-mi.aspx

Advertisement

Wireframes & Designs.

A wireframe is like an architects ‘blueprint’ but instead of a building its of a webpage. It is the general hierarchy of the content, it excludes the images, buttons, colours, style, colour and graphics an focuses solely upon the functions, hierarchy of content and the different scenarios the site can be seen, desktop, tablet and mobile. Much like designing a logo for the first time, you must make sure it works in both black and white. The wireframe is drawn up in black and white, this can be done in multiple ways, there are many resources available for developers and designers on the web but you can also draw on paper, whiteboard or even a mockup within photoshop itself. Due to the simplicity of the concept of making wireframes, they are very quick therefore allows you to create many concepts in a small amount of time.

I also created physical designs with colour and images to help me visualise and decide which one would be best. I used colours that would best portray the business based upon the colour research, to provoke certain emotions in the user.

Here are my three wireframes & their physical design…

Number 1.

This wireframe gives the user something relate to, it tells the story of someone who comes home to discover their roof is leaking, then called acorn roofing to get it fixed. You get to see as as user the result of using the company, this tries to my brainstorm researching the sales techniques, having interested the user, now at the end of the page, a telephone number to contact the business. This method works in theory but comes across as cheesy, childish and unprofessional. I decided not to use this as my design.

Number 2.

The most professional and easy to follow wireframe, this is the one i decided to take through and actually design as a final website. It gives the user what it wants, a description of the company, confidence with using their services because of previous customer’s comments on the work that had been done and finally the contact details. This wireframe cuts to the chase and gives the user what it wants.

Number 3.

Very similar to wireframe number 2 in the sense that it is designed to cut out clutter and give the user what it wants, its style is also very similar. The drawbacks of this wireframe is that the ‘above the fold’ section of the site is simply an image with the logo and contact details which doesn’t particularly entice the user to scroll. The contact section of this page seems to be quite messy also.

References:

http://en.wikipedia.org/wiki/Website_wireframe

http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399

http://uxmovement.com/wireframes/the-importance-of-tying-personas-to-wireframes/

http://wireframes.linowski.ca/wp-content/themes/darwin/images/PersonaTemplate.pdf

Brainstorming

As you can see from my brainstorm there are a few areas in which I need to cover in initial research before I can start considering the technical requirements. A lot of the elements in the brainstorm I have already covered in my blog such as typography.

Something I found interesting was the flow of content, from a sales background I recognise there five major steps to closing a sale with a customer. I understand that it is different on the web as you can’t hear what they’re saying and you can’t talk to them, but you can still apply the same principles. The five steps to closing a sale are:

1 – Making sure you understand your customers needs, and making your service relevant to them. This is done by understanding your target audience which I have already done in my research.

2 – Come across as confident and trustworthy, as they will only put trust in you if you trust in yourself. In normal situations you would build rapport with the customer so that you become friendly and someone they can trust. As I can’t do this through the web, I will have to use other resources that available such as using colour, typography, content and design to create such an experience.

3 – Pitch your service/product to the customer, and as we don’t know anything about the specific customer I have to be very broad in how we approach this. This has to relate to everything single customer, essentially we are pitching blind, with umbrella phrases and statements that will relate to vast amount of people visit the site.

4 – Objection handling is usually where the customer would present their reasons for not wanting the service/product and you turn round and use hard facts to win them around. Again this is not possible on the web, so we have to consider alternative methods such as a FAQ page which is easily relatable and maybe a testimonial page.

5 – Closing the sale is the most important of all steps but also relies on the previous steps being completed properly. You sum up all relevant information, relate to the customer with the information you know about them all while making them feel like your doing them a favour, they are getting something valuable.

Using this approach you could turn a casual visit to the site into a lead for the company, and potentially a sale. Once completing all five steps you provide the customer with the telephone number so they can call the company.

So, explaining how the flow of the page works, I also need to work out the actual content of the site. Firstly the most important thing is the homepage with the contact detail, secondly the portfolio of work for the customer to be able to look at and see the quality of the service provided, this should have rollover images with before and after shots with feedback from the customer. Lastly there should be an about us page for the customer to read a bit about the company so they can decide themselves if they like the sound of the company. The about page should contain details the company, how many staff they employ, what year they were founded, their values and vision.

In line with certain sales techniques that I am aware of from a previous job, offering a guaranteed better rate than any competition is a good way to win over customers, also offering free incentives will mean the customer will feel like they are getting a better service.

Design elements that I need to consider are colours and typography, I need to make sure they are relevant to the client needs and appeal to it’s audience.

Selecting the Logo

The Selection Process

I decided to create the website logo to make it look truly professional.

These are the initial designs that didn’t get chosen:

It was a tough choice turning down some of these ideas as they were designed to represent a roofing company, middle right looked to clip-arty, second one down on the left didn’t work as you shouldn’t have gaps in a roof, so having a gap in the logo just was a silly idea. While I thought it was a good idea to have a visual with the text, I didn’t think any of them worked enough and that they all overcomplicated the design therefore I chose this design;