C.Hardy Aerial Services

The Brief.

I was approached by Mr Chris Hardy - a local aerial installation specialist in the Lake District - to design and build him a brochure website. He has been in operation for over 20 years and felt his business needed to have an online presence. He wanted a website that acted simply as a means for would-be customers to find his contact details and get in touch to book his professional services.

During our initial internal interview, we discussed whether there were any other goals of the site, one of which was to be found on the first page of Google when a user typed in 'aerial services' & 'Lake District'. I had asked Mr Hardy if there was he had any initial content he was wanting to show, it became apparent that there was very little to use. I had recommended that showing more content would not only help him gain trust with users and create more of an engaging experience for them, but help him achieve his SEO objective also. I suggested that listing the services he provides and his USPs on the site could be beneficial and make him stand out against his competitors. After some deliberation, Mr Hardy agreed that this could be a good idea and thus, his requirements were as follows:

List contact details
Showcase services
List unique selling points
Rank highly on search engine results

This was going to be an efficient brochure website that reflected Mr Hardy's services - direct, no fuss and gets the job done effectively. Though the website was going to be simple in it's output, the aim of the design was to still create a user-friendly interface design which is easy-to-learn, supports users’ goals and is satisfying to use. Due to his finite technical prowess, Mr Hardy expressed little desire in wanting to update the site himself. This gave me further insight as to how the website should stand the test of time and not feel dated until the opportunity of updating content arose.

Project Planning.

Working alongside Mr. Hardy I was able to validate the problem. I created a project map and outlined project goals and objectives. This allowed me to determine the what the first steps were to be and what decisions needed to be made. Further to this, we could deduce expectations of who provided what, the timescales we would be looking at and thus provide an overview of all project-related data.

Exploration.

Agreeing upon the scope and objectives of the project, I set about first conducting research on services available in the Lake District. I looked at both sole traders then steadily cast a wider net to larger businesses. It became apparent that similar types of information were being shown to the user: contact details, services and testimonials. However there were a range of different information hierarchies that meant they was no one set way of presenting the information. There were differing user flows between these sites and though one or two of them felt chaotic, there were some sites that provided clear information that was easy to find. Regarding branding, a few sites had simple themes running throughout their sites but some unfortunately lacked in creating a sense of professionalism and ultimately trust. It would seem direct and no-fuss brochure sites are commonplace amongst this type of profession.

I wanted to gauge what would be most important to the user and though applying best practise can answers a few of those questions, I

asked a sample of users on what would be important to them, gather feedback, observe how they interacted with these sites and whether they were able to find pertinent information.

Usability Testing.

I started gathering data on these websites, starting with ethnographic field research. I gathered a sample of eight people ranging in age, sex, web-browsing proficiency. The subject would be given my laptop; I used screen recording software so that I didn't have to watch over the subject's shoulder and thus could reduce the impact my presence would have. This meant I could analyse how they were interacting with the various sites in a more natural environment when collecting the data, in the hope for more reliable results. One by one I asked them to perform a series of tasks on each site that would reflect the requirements of the brief. I asked each subject to vocalise what they were doing as they were undertaking the task to pinpoint what their thought process was.

After this first round of testing, I decided to then bring the subjects together to form a focus group. I would ask them what they liked about the site, where the pain points were and if they could change one thing about this process what would it be, amongst others. From observing the conversations that arose during the session, I was able to deduce what the users explicit and implicit needs were. To ensure that the group stayed on topic, I mediated the session. This in turn helped to reduce the risk of groupthink or other bias. The data that resulted from the testing showed:

There was too much text on the home page, users felt less inclined to read. Imagery and visual aids were deemed helpful
For the majority of sites, contact details were easy to find and were in an expected position
The sites with more of a basic design faired poorly in user engagement and trust
Services, when listed, was seen as helpful content
FAQs were seen as useful to most but not considered essential
Sites with testimonials seemed to generate more trust with the user
Lack of information hierarchy made the website harder to scan
Users felt a dedicated page for individual services was a useful approach; it kept the home page concise

From analysing the data, it seemed the websites that created useful user experiences were the ones that had clear sections of information, had contact details in prominent positions of the page and had a defined brand that generated legitimacy and trust. The sample of users made the distinction that aerial services isn't exactly the kind of everyday site upon which people browse but instead were searched for when someone needed specialist services for when things went wrong. This insight gave a clear indication that pertinent information was to be easily discoverable, the business was known to give good service and was easy to get in contact with.

User Personas.

To help in characterising the type of interactive behaviours and the type of user who would be visiting Mr Hardy's site, I created user personas. This was to help associate characteristics with a user and help in ascertaining the interactive behaviours. I found that interactions between the user and website would have to create clear feedback loops without subjecting them to any unnecessary fancy bells and whistles that may confuse or deter them from completing their goals. Reflecting on further considerations showed that word of mouth is instrumental in drumming up new business for this type of trade. To extend this on a website, testimonials and reviews should be present to drive forward that element of trust and accountability. Moreover it seemed some people liked to find information and get in touch quickly whereas others would be more cautious and take the time to see what was being offered to determine whether the services were relevant to them.

Wireframing.

After collating the user data and feedback, I started to draft out a few preliminary ideas to deduce what the information hierarchy of Mr Hardy's home page would look like. This extended to the blueprints of any potential sub-pages. A meeting was had to discuss the site's content; I had prepared a few questions to figure out what types of information Mr Hardy wanted on the site. Shortly thereafter I received the website copy from Mr Hardy, however there wasn't enough of it to incorporate the type of structure the research data had pointed to. Suggesting that more content such as testimonials and more detail into his services would be beneficial to his SEO requirement, Mr Hardy preferred that the site was to only feature his contact details, services and his USPs for the initial launch.

I set about designing the wireframes working with the content that I received. I referred back to the initial drafts and the approach seemed straightforward enough, though questions such as 'What should follow the hero - the USP section to show personality or Services to be more useful?'. I put myself in the shoes of the user (and referring to the user personas) to determine what structure would be more user-centric. This would be something worth testing. Combining data with best practise was going to be key in the site's structure as there was no set model when looking at competitor sites. This was especially true of the mobile version as very few of these sites had their site mobile optimised. Considering elements like imagery, Mr Hardy had notified me that unfortunately there was no imagery or any other media that he could send me apart from his logo. This needed careful consideration as to how I would approach the branding of the site and what content could be used as a substitute for a lack of imagery.

Further to this I designed an alternative version with testimonials, FAQs and dedicated product pages. The testimonials would feature a customer reviews from Yell.com. This would hopefully give legitimacy and an err of trustworthiness amongst would-be customers. Moreover the dedicated product pages (Repair, Installation TV and Internet) would contain a more thorough definition of Mr Hardy's services to provide the user with a better understanding. An additional section would sit underneath this main body of content to house further information such as troubleshooting tips as this was considered useful information in the research phase. I had also included a Live Chat function within this alternative version to invite users to contact Mr Hardy in real time. However he wasn't a fan of this idea and preferred the phone call and contact form approach.

To establish whether this version could be a feasible possibility, I decided that both versions should be subjected to the same usability testing to measure what the impact of having more information on the page had on users and whether it was considered more user-centred. Should the results yield positive results, this would bolster the case of creating this design in a future release of the site.

The proposed alternative version of the wireframe

Early iterations of the wireframe

User Flows.

I presented the wireframe for the initial launch to Mr Hardy, to which he gave the thumbs up on the proposed structure and information hierarchy. User flows were then storyboarded to show how the navigation and sending a message functionality would work. Moreover I drew further step-by-step user flows for the alternate version. As this version consisted of more pages, I wanted to review the flows during further testing to see any potential points where users might diverge. I aimed to make the user journeys as seamless as possible to establish good customer acquisition and a satisfying user experience.

Test and Test Again.

Further testing was required to determine whether the proposed wireframes and user flows made sense to the user and whether the felt they could complete their goals efficiently. I presented the concepts to the same sample of people, first in the form of ethnographic field research and then one-on-one interviews. In the first round of testing I asked them to conduct the same series of tasks in the first testing phase and asked them to vocalise their thought process. I observed their actions and conducted analysis. In the second round of testing, I asked each subject in the sample in turn what they liked the about the flows, what didn't they like, was it easy to perform the required tasks, amongst others. I found that for the initial launch wireframe:

100% found the contact information within 10 seconds
100% found it easy it to send a message
100% were able to discover the services and USPs

In addition, for the alternative version:

67.5% of users found the FAQs section on the home page useful
87.5% of users were able to find further details into the services offered
87.5% of users felt the testimonials and yell review offered legitimacy and trust

I was extremely pleased with the test results and the felt the wireframes were ready for the UI phase. I fed back the test results of both wireframes to Mr Hardy to which he was also pleased and happy to proceed with the next plan of action. Further to this we discussed setting up an account for Mr Hardy on the CMS upon which the site would be built on. A user account, domain name and package deal was set up shortly thereafter and I walked Mr Hardy through the capabilities and what kind of SEO I'd be able to implement upon building the site. We also discussed what the KPIs were to be; we decided that click-through rates on subsidiary pages, number of messages sent via the form and the uptake in calls. However the last KPI would be harder to measure as calls made could come through different sources of information and could result in inaccurate data. Mr Hardy did specify that he would like to start asking new customers whether they had been on the website prior to making a call to him. This seemed to be a good alternative for measuring the KPI. Though if any visual representation was needed, the data would have to be analysed and entered manually in a spreadsheet before any correlative assumptions could be made.

UI Conceptualisation.

Reviewing the logo Mr Hardy sent me, I detected a colour scheme and a typeface. I found a secondary, complimentary typeface for the former. There were no images to work with, so I thought an illustrative approach could work harmoniously with the amount of content that was supplied. Using illustrations seem to provide a light-hearted and friendly theme. This would be subject to future testing to determine whether this adds an element of trust amongst users. I created icons that ran throughout the site and found a suitable, location-based image for 'Why C. Hardy' to give an immediate association with his user base. Clear signifiers and affordances were implemented on the UI to ensure usability of the site, promote engagement and reduce any potential pain points. The design of the site had to take accessibility into consideration, pertaining to the colour contrast in the site's text (and whether it would pass the WebAIM contrast checker), the font sizes used were legible on various screen resolutions, including mobile, and that the contact form fields had clear labels. Moreover I ensured feedback systems were also in place, such as the anchor-style navigation and CTAs, as well as system messages once a user had submitted a message via the form. I took into consideration that the the mobile and desktop design could be replicated using the CMS. The alternate version utilised both the supplied copy and lorem ipsum to act as placeholder text. This was extended to the subsidiary pages. Additionally the navigation was also amended to incorporate the increased number of links and to represent a familiar design pattern that other competitors have seemingly established.. This also gave Mr Hardy a better idea of how much additional content that he would need to supply for the alternative version.

The following designs show the first iteration of the site, without the additional content. The development would focus on these designs first and put them into production.

These next set of designs show how the alternate version would look. This version includes amendments to the navigation, the addition of testimonials, 'Read more' links on each Services summary, an FAQ section, more content in the Why C.Hardy section and an example of a dedicated product page (T.V.).

Development.

Once the designs had been finalised, I set about conducting SWOT analysis on the templates available on the CMS platform to determine which was best fit-for-purpose. I decided to opt for a blank template as I had a custom design to build from and the analysis on the other templates didn't yield any greater results. I referenced back to the information hierarchy on the wireframes, cross examined the UI style guide and set out the appropriate building blocks for each section of the page within the CMS. Starting with the header, I designed the necessary elements and links on the page and tested that they performed as expected. I worked my way down the home page in a similar fashion. The illustrative components did need some tweaking in the source file as the CMS automatically adjusts the images to fill the page. Content effects were added after the implementation of all the elements to enhance user experience and engagement. I set up all the remaining necessary functionality on the back-end and tested it in a staging environment. Additionally I implemented SEO techniques to satisfy one of the primary requirements of this project; I ensured every image had a description including keywords, establishing which copy was a H1, H2, p tag etc. and the inclusion of meta tags and descriptions.

Once I felt everything was in place, I asked Mr Hardy to browse and play around with the site in its staging environment; fortunately he had ran into no obstacles. I wanted to include one more person to test the site to be sure of no bugs before going live. I asked one of the subjects from the research sample to also explore the site, test links, send a message etc. fortunately again, there were no bugs or obstacles to speak of. Both myself and Mr Hardy felt the site was ready to go live. I published it and congratulated Mr Hardy on his new online business presence.

Post Production.

Since its launch, Mr Hardy informed me he has received positive comments by his peers and customers on his website. Regarding the alternative version of the site with more informative content and customer reviews, Mr Hardy took a look back at the UI and started working on supplying the additional information. This is something that will need future testing to determine the usefulness and usability of the update. One point of contention would be the integration of Mr Hardy's excellent service rating on Yell.com within the CMS. I will have to research into 3rd party applications to see if there's any suitable functionality that can be integrated in the way I outlined in the designs. Failing that however, I would resort back to the UI to amend the design and try to bring forth an alternative solution. Additionally I'd like to conduct further testing on the site to ascertain whether the use of illustrations on the site invoke feelings of legibility and trustworthiness amongst users. It would be an interesting discovery if found that real images are better suited as users can see the kind of work carried out by Mr Hardy.

Having measured the KPIs on the site as well as viewing the heat map for the site, it seems that users are using the navigation for 'Services' more than other links. This tells me that not only are people interested in the work Mr Hardy does, but also that the contact details are in such a prominent position, the 'Contact' section sees fewer interactions. Nevertheless Mr Hardy informs me he has received a number of enquiries via the booking form but still the main point of contact by customers are via phone calls. A few users also seem to try and interact with the summaries in the Services section. This indicates to me that users think this area is interactive and therefore expect to see more content regarding the relevant service. The alternate version would show this additional content and could provide a means of measuring the drop-off rate between home and product pages to show if users are indeed wanting to find out more about the desired service. Once the alternate version had been developed, I would like to conduct an A/B test on the home page to determine whether the additional content and other proposed changes had a positive effect on user interaction. The results of the A/B test would be analysed and presented to Mr. Hardy to decide whether or not the changes should be implemented. Beyond the heat map, I was interested in the site speed to see whether the imagery i've used has made a large impact on load times. Fortunately to my relief the CMS has shown that the site's speed is 'pretty fast' but there could always be further adjustments I could make i.e. compressing of all imagery, to make the site run even faster.

Mr Hardy has been very pleased to find out that his site now resides on the front page of Google results when a user enters broad search terms such as 'Aerial Services, Cumbria' and 'Aerial Services, Lake District'. Mr Hardy seems satisfied that the requirements of the brief have been fulfilled and would like to pursue further updates as time goes on.