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.
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.
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.
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.
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
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?"
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
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.
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.
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.
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.
Input Filed Enabled
Input Filed Active
Please fill in this field!
Thank you for submitting!
Avenir Light Oblique 18px
Avenir Light 28px
Avenir Light 18px
Avenir Light 12px
HIGHLY SKILLED TEAM
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.
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.
& Heating Upgrades
Window & Door
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.
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.
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.
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.