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 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.
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
Button Enabled
Button Hover
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.
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
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.
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.