Xtend-ovate

Freelance Project

Client: Xtend-ovate

Based in the south east of Ireland, Xtend-ovate is a construction company that specialise in domestic extensions and renovations. The company was established in 2017 by Daniel Finn who has 13 years experience as a stone mason and bricklayer. The team consists of highly sought-after and skilled tradesmen.

Challenge

Up until this point, Xtend-ovate had used word-of-mouth as their primary means of advertising. They required a simple website so that they would be more discoverable, gain more customers, stand out from the competition and increase customer engagement.

Driving Motivation?

Ireland's Climate Action Plan aims to reduce C02 equivalent emissions from the built environment by 40%-45% relative to 2030 projections. As part of the plan, the aim is to retrofit 500,000 homes to a BER level of B2 or the carbon or cost optimal equivalent. Therefore, there will be an increased demand for construction workers who specialise in renovations.

Overview

I designed a three-page responsive website for desktop and mobile, and built it on wix.com. The UX process for this project included research, analysis, design, prototyping & build. 

My Role:

UX Design: Customer & Stakeholder Interviews, Flow Diagram, Sketching, Wireframes

UI Design: Pattern Library, Copywriting & Custom Icon Set

Build: Responsive Website Design

Marketing: Print Design

Research & Analysis

Customer Goals

What questions are the customers asking that the website needs to address?

"Who are Xtend-ovate?"

"What services do you offer?"

"Pricing/quote for a job?"

"Availability, project turnaround times & deadlines?"

"Examples of

 Xtend-ovate's  

previous projects?"

"Contact information?"

"Customer reviews?"

Company Goals

What are Xtend-ovate's main goals with the website?

1. Make Xtend-ovate more discoverable

2. Grow their customer base

3. Increase customer engagement on phone & email

4. Highlight recent projects

5. Highlight services

Information Analysis

My first task of the research process was to establish  the main questions customers ask when they first contact Xtend-ovate. I wanted to define the goals, context and behaviour of the customers. Next, I spoke to the Xtend-ovate team to determine what they wanted to focus on and prioritise with the website design. Then, it was simply a case of working to align the customer and company requirements, ensuring product integrity for the website design.

UX Design

Flow Diagram2-01.png

Flow Diagram

User Flow

The above diagram outlines the user flow of the primary navigation links for this three-page website. This flow diagram outlines the website's usability and sets out the groundwork for the design sprint.

Sketching

Screen Layout

These are the initial rudimentary sketches of the website. Using the information of the flow diagram, I wanted to quickly work out the screen layout, hierarchy, navigation, copy & labelling.

1/5

Wireframes

I mocked-up a medium-fidelity prototype of the website based on the initial sketches so that I could start to define the content and rules. The above image demonstrates part of the wireframe that I developed. It was a useful aid when I began to build the website on wix.com.

UI Design

Colour Palette

#065260

#8BC541

#FFFFFF

#000000

#767676

#404041

Buttons

Button Enabled

SUBMIT

Button Enabled

Button Hover

SUBMIT

Button Hover

Form Fields

Title

Hint...

Input Filed Enabled

Title

|

Input Filed Active

Title

Hint...

Please fill in this field!

!

Error Message

Thank you for submitting!

Success Message

Typography

Header 1

Avenir 40px

Header 2

Avenir 28px

Header 3

Avenir 26px

Header 4

Avenir 20px

Header 5

Avenir 17px

Quotes

Avenir Light Oblique 18px

Links

Avenir 16px

Large Copy

Avenir Light 28px

Standard Copy

Avenir Light 18px

Small Copy

Avenir Light 12px

NAME, TITLE

HIGHLY SKILLED TEAM

Links

HOME

ABOUT US

SERVICES

Link Selected

Links Enabled

Digital Controls

Menu Icons

Toggles

Slide Buttons

Check Boxes

Slide Arrows

Radio Buttons

Progress Bar

Pagination

Pattern Library

As part of the user interface design I developed a pattern library based on Xtend-ovate's brand guidelines. It includes direction for the use of colour, typography weights and sizes, buttons, form input fields, navigation links and digital controls.

pexels-jeshootscom-834892.jpg

YOU DREAM IT - WE BUILD IT

At Xtend-ovate we have a great working relationship with some very talented architects and engineers. Our company's architect can provide a certificate of exemption for extensions that do not require planning permission.

Copywriting

I worked closely with Daniel to develop the copy, tone of voice and language for the content, links and buttons of the website. It was particularly important to reassure potential customers that Xtend-ovate comply to all building regulations, employ high quality building processes and use the best materials.

Home Extensions

Home Renovations

Attic Conversions

Electrical, Plumbing
& Heating Upgrades

Bathroom Refitting
& Upgrades

Window & Door
Upgrades

 Custom Icon Set

In addition to extensions and renovations, Xtend-ovate's services include attic conversion, electrical, plumbing and heating upgrades, bathroom refitting and, window and door upgrades. I digitally rendered a series of basic, outlined icons to represent the various services. 

Final Result

Final Web.jpg

Finished Desktop Site

Key information is on the homepage, including the introduction, about section, list of services and testimonials. The recent projects page features a number of case studies with before and after pictures of the build. The contact page features all contact details and an email form to submit enquiries or request a price. Carefully selected stock imagery helps to capture the different textures, materials and processes - making it more visually engaging and helping Xtend-ovate stand out from the competition.

MobileApps.jpg

Finished Mobile Site 

It was crucial for Xtend-ovate that the mobile version of the website was carefully considered, well deigned and that it complimented the desktop website. Recent analytics confirm that 70% of customers visiting the site are using a mobile device. For the mobile version of the website, I removed the stock imagery from the top of the Recent Projects and Contact pages. I did this for two reasons – to ensure that visitors to the site get to the information they need immediately and to make these pages less cluttered.

Print Design

In addition to the website design, I also created artwork for letter heads and business cards using Xtend-ovate's existing brand identity. The business cards and stationery feature the website URL, enabling Daniel and the team to reach more customers and raise awareness of their online presence.