The site for electric vehicle technology firm Better Place happened to be so stylish and well-organized that we thought we’d feature it on Design Focus.
It’s a clean and focused corporate website that shows a progressive, professional, and practical company — exactly the image an engineering firm would want to present. And it incorporates a lot of design, marketing and SEO features that make the site notable. It also incorporates the content management system WordPress, which makes updating content easier, and up-to-date content adds to the site’s overall value to visitors.
In this post, we’ll show you some of the smart decisions the website’s designers made, and offer some constructive criticism that can be used to enhance an already brilliant website.
Keeping it Colourful
The colour scheme is clearly incorporated into all the design elements, even the photos and video stills used on the site. They even edited images to incorporate their signature light blue hue. Visually, the site seems very bright and light, which helps the company distinguish its eco-friendly services from dirty, old technologies.
The Lay(out) of the land: Plotting country-specific sites
Because Better Place has an international presence, they’ve actually created a handful of international websites that carry a similar overall theme but are suited to each individual market and language.
They’ve done a great job keeping a similar look and feel across the sites despite language differences, and, at the same time, tweaking the design and layout to suit the different audiences.
You can find both obvious and subtle design variations in the approach to each different location. The Australian site, for instance, has a more energetic and youthful look than the more staid and conventional English site.
We think sticking to a single colour scheme is a good practice and one that helps these sites maintain a unified look, and stay looking simple and clean. The Aussie page did this by keeping light blue as its main colour, but went further by introducing other soft colours, which we thought was a great touch.
Dealing with domains, hostnames, and file structure
With its various international websites, Better Place has clearly put a lot of thought into the presentation of its various Web addresses. Where they can, Better Place uses the local domain (ie. betterplace.com.au); where they cannot, they used the hostname (ie. china.betterplace.com). The local domain may be unavailable due to local domain naming rules or because this domain name has been bought by someone else.
Another option is using sub-directories like “betterplace.com/china/”, but we like how they’ve used hostnames. As a rule of thumb for creating specific national sites, it’s good to use local domains where possible, and hostnames everywhere else.
We think the page URLs could be better organized from an architectural perspective. For instance, within the parent category “The opportunity”, a child page called “Energy” is given the address: “http://www.betterplace.com/the-opportunity-energy”. We think a better option would be “http://www.betterplace.com/the-opportunity/energy.html” or even “http://www.betterplace.com/sustainable-opportunities/energy.html”, which adds the descriptive keyword “sustainable”.
Road signs and routes: Navigating betterplace.com
We think the site’s well organized. It has two navigation areas: one at the top and one at the bottom of the page. The top navigation is divided into five parts: The opportunity, the Solution, the Company, Global Progress and Experience. Each parent menu item has its own children breaking the content into different pages, which is a good practice for SEO purposes.
For even better SEO, we think they could add some more keywords into these navigational links. Also, the “Learn More” links, for example, could easily be “Learn More about Sustainable Energy”, if that’s a key search phrase according to their research. Links are vitally important for SEO, even internally, because they’re some of the first clues a search engine looks at to determine what any given page is about.
The bottom navigation is more for corporate and legal pages. For instance, they have a link to the “Press Room” for reporters as well as a link to the terms and conditions page. For regular visitors, these pages can be considered as secondary in importance so having them in the footer is a smart practice from an information architecture perspective. The bottom is not the first place people go looking at for things.
Links to the company’s social media profiles on Twitter, Facebook, LinkedIn, Flickr and YouTube are also at the bottom. We generally like to see social buttons featured higher on the page so they’re more easily seen, and because they can get lost at the bottom. If these social elements are important, they had best be where the other important things are.
Titles and descriptions: The importance of META data
META data is found in the “head” area of webpage code, and includes information such as titles and descriptions that help search engines determine what your page is about. These META fields should incorporate keywords whenever possible.
Better Place is a company in an emerging market, so it stands to reason that it’s hard to find reliable information on what keywords people are searching for, and there may not be many to pick from. In emerging markets, SEO is a good vehicle for visibility since few sites have yet figured out what terms people are people are searching for. Researching and using keywords can give a site like this a great advantage.
That said, the description fields on all the pages we checked were left blank. More specifically, the tag is present but empty. So putting something in the description field would help enormously.
Headings make content stand out
We’re happy that Better Place used heading tags like <h1>, because they’re an important factor in how search engines determine the content of your page. In order to get the most out of headings, however, Better planet has to re-order its headings, given that heading tags rank in order of importance. We found that on an example page, the <h2> at page top should be <h1>, and the <h1> should be <h2>. The <h3> tags, however, are solid. Even though they’re slightly off, we’re just glad to see headings used!
Keeping it simple and easy to manage
The Better Place layout is very elegant, and because it relies, in part, on WordPress, it can be easier to update and maintain. This can be a huge benefit for whoever is in charge of making day-to-day changes.
Better Place has a complex handful of websites each with many webpages of their own. The designers behind Better Place have put a lot of work into making its websites look attractive, appear simple, and be easily navigable. And while we made some architectural suggestions, we’re very pleased with the overall decisions that have gone into creating Better Place’s Web presence. Great job!