High-level wireframes v1

Logo

Primary items

• Products
• Where to buy

Secondary items

• Projects
• Controls
• About us
• Contact

Tertiary items

• Warranties
• Privacy Policy

Google Analytics data shows that the product pages, contact and where to buy are the most visited pages. However, after our discussion in the scoping session contact details should be slightly hidden to reduce unwanted contact.

Main reason for signup (from a user's perspective) should be the headline.

In the LAF we've used "Be the first to hear about new product releases."

E-Mail and Name fields show up after first click

Integration with Mailchimp

Social link - facebook

Any other social links needed?

Link to contact page

Smaller links to privacy policy and warranty pages

‍

Showing one of the featured products in (nearly) full screen.

All elements to be animated.

This hero section could be realised in a few different ways. Depending mostly on how often this section needs to be updated.

1. We create a new individual layouts every time this section should be changed.
2. We create 4 different layouts that content can be added into.
3. A combination of 1 and 2.

This whole section could also be a slider.

Similar to:

"Specialised in commercial and industrial lighting we’re produly leading the New Zealand market in superior quality LED highbays and LED floodlighting."

+ Contact link and instructions which topic people should get in touch about.

This section is mainly for SEO reasons and to make sure people get in touch for the right reasons.

2 -  4 other products being highlighted in a slider format linking to the single product pages.

‍

The full product selector will be housed on the home page. (Nav-bar will only anchor link down to it)

From the data we have this will be the most used item on the page.

Presenting this one right up-front provides a UX that is as smooth as possible. (Either people scroll down or see it as the first item in the nav-bar)

Main reason for signup (from a user's perspective) should be the headline.

In the LAF we've used "Be the first to hear about new product releases."

E-Mail and Name fields show up after first click

Integration with Mailchimp

Social link - facebook

Any other social links needed?

Link to contact page

Smaller links to privacy policy and warranty pages

‍

Different filter criteria and categories

• Applications (Outdoor, Indoor, ...)
• Installation (Recessed, Wall-mounted, ...)
• Lamp type (LED, HIE, ...)

Selection on the filter narrows down products shown in product grid.

Once scrolled to this element the sidebar animates in from the left and stays there until scrolled past this item.

Holds all single products

Sort functionality with dropdown to select options

or

Two different views (e.g. list and thumbnails) button to switch between them.

Search bar

Image & name

What other information needs to be shown here?

Could add icon in corner to highlight products which are new or 'designed by Evolve Lighting', etc.

Hover effect revealing more information

Main reason for signup (from a user's perspective) should be the headline.

In the LAF we've used "Be the first to hear about new product releases."

E-Mail and Name fields show up after first click

Integration with Mailchimp

Social link - facebook

Any other social links needed?

Link to contact page

Smaller links to privacy policy and warranty pages

‍

Ca. 5 images per product

Most images are clearcut / technical

Section also to work as product gallery

Lightbox optional - depends on design

e.g

NIMBUS HALO

PROFESSIONAL SERIES

GLARE CONTROL LED HIGHBAY

The Evolve Halo is a performance driven highbay offering plenty of innovative features like low glare shielding for comfort and centre mounted microwave sensor for balance. High-end components like the pure aluminium heatsink give the Halo exceptional heat dissipation for superior reliability and longevity. High output Samsung LED Chips and Mean Well control gear ensures you will save on both energy and maintenance costs while meeting the highest performance standards.

Fields for Headline, Subline, Lead, Body

E.g.

INCREDIBLY LOW UGR
GLARE CONTROL RATING

or.

LIFETIME OF 70,000 HOURS TO L70

Highlight important numbers or key benefits in an engaging way. The number itself being the biggest part.

Different compontens to be used:

• Big Image + Headline + Rich text block + link
• Small image + Headline + Rich text block + link
• Icon + One line text
• Rich text block

Can be used for features but also for a paragraph about warranty (with link to warranty page), a list of possible applications, or any other product specific information.

Backend functionality to customise each component. For example to switch left/right orientation or leave fields blank.

Feature components can be added multiple times on the same page. So a feature component could also be added below the specifications or code generator.

Multiple tables with about 3-10 rows. No columns.

Test results and file downloads. Each with headline, lead, body text, file type + download button

(For IES-files, additional pictures, PDF spec sheets, PDF instructions sheet, S-doc, etc.)

File downloads

Consists of three parts:

1. Product filter
2. List of all product variations
3. Detailed view per product

The detailed view may hold a picture of the product variation, a table with specifications and downloadable (IES)files.

Select product features in the product filter section to display a matching product.

Click on product variation in list will bring up detailed view.

Download files

Full width element that links to the relevant projects single page. Section mostly just links to one project but in some cases might also link to multiple project pages.

Introduction, paragraph

+ Two columns

Column 1

2 Links for buying online

Column 2

Link to 'store locator' page

Show links only after interaction

Possibility to add a product specific link to buying online. Fallback option to just link to home page of online store.

Headline

Multiple boxes with image, name and subline/category.

Probably similar to 'Other highlighted products' on homepage.

Links to different product on click. Section must be able to look good with only 2 but also 10 items.

Main reason for signup (from a user's perspective) should be the headline.

In the LAF we've used "Be the first to hear about new product releases."

E-Mail and Name fields show up after first click

Integration with Mailchimp

Social link - facebook

Any other social links needed?

Link to contact page

Smaller links to privacy policy and warranty pages

‍

Similar to functionality on current page.

Big map

Store locations all marked on map

Possibility to enter an address and find the nearest store or click on store highlighted on map

Grid of distributor's logos

Click on logo takes the user to distributor's web presence

2 links boxes to the online stores.

Main reason for signup (from a user's perspective) should be the headline.

In the LAF we've used "Be the first to hear about new product releases."

E-Mail and Name fields show up after first click

Integration with Mailchimp

Social link - facebook

Any other social links needed?

Link to contact page

Smaller links to privacy policy and warranty pages

‍

Possibly headline, lead and body paragraph at the top.

Full width images with short description linking to single project pages.

This page consists of three parts

1. Big image slider with images from the completed project.
2. Rich text block with possibility to add links, , pictures, video. Content talks about costs, the client, challenges, problems and solutions.
3. A list of products (less than 10) used in this projects. Probably similar to 'Other highlighted products' on homepage.

Main reason for signup (from a user's perspective) should be the headline.

In the LAF we've used "Be the first to hear about new product releases."

E-Mail and Name fields show up after first click

Integration with Mailchimp

Social link - facebook

Any other social links needed?

Link to contact page

Smaller links to privacy policy and warranty pages

‍

Possibly headline, lead and body paragraph at the top.

List with pictures/ engaging graphics showcasing the different types of controls (3 different items)

This page consists of two parts.

1. Rich text block with possibility to add links, , pictures, video. Content talks about costs, the client, challenges, problems and solutions.
2. A list of products (less than 10) that fit the selected controls.

Main reason for signup (from a user's perspective) should be the headline.

In the LAF we've used "Be the first to hear about new product releases."

E-Mail and Name fields show up after first click

Integration with Mailchimp

Social link - facebook

Any other social links needed?

Link to contact page

Smaller links to privacy policy and warranty pages

‍

Name, Email, Message

Entries get send as an email to one specified address.

reCaptcha

One phone number

One email address

Headoffice address with link to 'where to buy'

Main reason for signup (from a user's perspective) should be the headline.

In the LAF we've used "Be the first to hear about new product releases."

E-Mail and Name fields show up after first click

Integration with Mailchimp

Social link - facebook

Any other social links needed?

Link to contact page

Smaller links to privacy policy and warranty pages

‍

Rich text block with images/ graphics.

Will be designed after draft content is supplied.

Nice way of showing the strong and proud connection to NZ.

Will be designed after draft content is supplied.

Engaging way of visualising the design process

Will be designed after draft content is supplied.

May include a slider or interactions on hover, etc.

Main reason for signup (from a user's perspective) should be the headline.

In the LAF we've used "Be the first to hear about new product releases."

E-Mail and Name fields show up after first click

Integration with Mailchimp

Social link - facebook

Any other social links needed?

Link to contact page

Smaller links to privacy policy and warranty pages

‍

Rich text block with simple formatting.

Download page as PDF button

Social link - facebook

Any other social links needed?

Link to contact page

Smaller links to privacy policy and warranty pages

‍

Rich text block with simple formatting.

Social link - facebook

Any other social links needed?

Link to contact page

Smaller links to privacy policy and warranty pages

‍

Add Facebook pixel code snippets

We'll discuss this item further. From what we could find Mailchimp tracking can be integrated with Google Analytics but requires no work on the website itself.

Add Google tag manager code