Keppel Integrated Engineering website

06 Aug 2009 | By Lee Xian Jie

Like many engineering firms in Singapore, Keppel Integrated Engineering used to have a static website they had to update by hand, which was rarely. Although they had already hired a web programmer, they needed a web consultant for the design process. We delivered a set of comprehensive mockups complete with User Interface transitions and stock photography for the web programmer’s reference.

Keppel Integrated Engineering Homepage

Mockup of Homepage

Optimising for Search

The old website created little opportunity for people to find Keppel Integrated Engineering using a search engine. Instead of using subsidiary’s names like Keppel Seghers, or generic descriptors like Environmental Division, we opted to use words like Thermal Waste Management and Water & Wastewater Treatment. By putting Keppel Integrated Engineering’s core businesses on the homepage and titling the links simply what they are instead of what business units they fall under, we dramatically increase the potential of someone landing on the website.

We then reinforce this with strong copy and a relevant image that changes when users hover over different businesses. If no hovering is done, the images still automatically change every four seconds to feature each business. We decided to use simple graphics in favour of complicated flash animations because a focus group participant, a Dubai-based engineer who also purchases parts, said that while graphics are important, he is unimpressed by flash graphics when he visits corporate websites because he just wants to view the company’s track record.

Show, don’t tell

His view was echoed by other participants in our poll. Therefore, rather than simply stating that Keppel Integrated Engineering is an established leader, we showcase this through the company’s histroy and actions by pushing case studies and press releases to the homepage just below the navigation.

Six design elements

Arrows. Instead of developing the spur in the Keppel logo as a main design motif, we mirrored it vertically to form an arrow that is consistently used as a website design motif on the bottom left and section introductions. A simplified form is used as a current page indicator on the navigation bars.

Ribbon. A poll respondent commented that as a job seeker, she appreciates easy access to job information and relevant human resource contact details. However, she relates her difficulty in locating the careers page on many corporate websites as the page is often sandwiched between other irrelevant links. We took out “Jobs” from the main navigation bar and placed it on a ribbon jutting out on the right of the navigation bar. The ribbon is also chosen because it complements Keppel’s logo spur.

Whitespace. White space is not wasted space. By increasing the amount of whitespace padding around all the elements on the page instead of squeezing in another case study or press release, we balance negative and positive spaces to reduce clutter and make things easier to read.

Buttons. Contrary to popular belief, buttons are not considered to be outdated. In his book, Seth Godin calls these buttons “bananas” because they quickly direct web users to relevant information, likening users to “monkeys” who will not let go of your site once you give them these “bananas”. Barack Obama’s campaign website is a pertinent example.

1

2

  1. Keppel Integrated Engineering’s old website.
  2. Barack Obama’s campaign site.

PNG transparency. Transparency is gaining popularity because it allows for better image-content integration. It is for the same reason we used it as a side navigation overlay on the banner image.

Gradients & drop shadows. Web 2.0 characteristics such as gradients and drop shadows give a sense of depth and realism.

Mockup of Business page.

Focus group testing

A blind focus group of 5 potential users was held after a preliminary mockup was finished to verify poll results and for us to better understand users’ emotional touchpoints. During this blind focus group, participants were shown the general design complete with colour scheme, design elements and copy. The company logo and actual businesses were concealed to reduce preconceived opinions of the company that may sway perception. Instead, the 5 users were simply told that they were being shown a website of a company in the environmental engineering field.

“This company seems to support sustainable environments for future generations and looks trustworthy because they show their projects upfront on the homepage. I’m busy so I just want websites to give me info quickly.”

“Most websites of environmental engineering companies I go to have lots of photos of nature. It’s cliche. But this website gives me a sense that the company has a socially responsible business portfolio. And I like how easy it is to navigate around without thinking too much. Other conglomerate websites are just too confusing.”

“This website like it is for a very stable and established company. I could probably learn a lot about what the company has achieved but I need to know more about the company culture and working environment. I immediately noticed the Jobs thing, which is seldom so obvious. That’s nice. And also, if this company offers scholarships, I will want to find that on the Jobs page.”