Select Page

Iwan Kurniawan

User Experience Designer

Toward a Global Social Innovation Company

Hitachi Singapore Corporate Website

Hitachi Asia Ltd., a subsidiary of Hitachi, Ltd., is the regional headquarter for seven countries across Southeast Asia. The  Singapore website serves as a portal for visitors from Singapore looking for the company’s products and corporate information. It’s also a gateway to 20+ Hitachi business group’s websites.

The business objective of the redesign is to strengthen Hitachi position as a Global Social Innovation Company. Concurrent with this objective, we also wanted to design a better user experience, fix some design flaws and improve the key metrics.

I led the redesign efforts for Hitachi Singapore corporate website in 2017.

 

My Role
  • User Analysis
  • Information Architecture
  • Sitemap
  • Sketches & Wireframe
  • Interaction Design
  • Visual Design
  • Interactive Prototypes
  • HTML/CSS (Supporting Role)
Tools
  • User Research
  • Persona
  • UX Heuristic Review
  • Card Sorting
  • Analytics
  • User Testing
Year

2017

In Southeast Asia, people well recognise Hitachi for its home appliances, but the company actually do a lot more than that. In fact, Hitachi’s core business is social innovation: a collaborative creation to solve some of the pressing issues in society with its advanced technologies such as high-speed rails, nuclear plants, healthcare systems, and many others. The company wanted to elevate this message.

The Problems

Business Problem

We wanted to change the public’s perception of Hitachi brand from “Home Appliances” to “Social Innovation” business.

    Design Problems
    • The UX heuristic review suggested that our website was weak in terms of navigation and information architecture.
    • Illogical, overlapping and ambiguous category name increased the cognitive load of the users and prevented them to accomplish their goals efficiently.

    The Solutions

    Information Architecture

    • Rearrange the content so that it is logically classified
    • Eliminate overlapping and unclear category
    • Create more efficient category names in the same language that our customers use

    According to Hick’s Law, the more choices we present our users with, the longer it will take them to reach a decision. First thing first: we need to simplify the number of product category.

    Card Sorting is an excellent method to find out about the categories that make more sense to our users. Utilising this method, we reduced the number of options from 23 to 8. We grouped the product list into high-level categories.

    Using the same approach on a broader scope, we determined the overall structure of the website.

    Design Exploration & Low Fidelity Prototypes

    1. The F-Pattern is the most common user eye-scanning patterns when it comes to blocks of content. Our eyes are trained to start at the top-left corner, scan horizontally, then drop down to the next line until we find something of interest.
    2. Proximity principle: items that are related stay close to each other. We group and connect all the content associated with corporate information and assign particular importance to local information.
    3. The Hero Image is the first immediate impression of the audiences. This is a huge opportunity to promote Social Innovation Business and should be designed delicately to capture the user’s attention.

    Social Innovation Business case studies. Here is a large screen real estate where we put our case studies to serve as evidence of Hitachi’s vision and capabilities.

    Wireframes

    We systemised sketches into more presentable prototypes to our stakeholders. This development also provides more clarity for user testing purpose.

    Desktop
    Mobile

    Hi-fidelity Prototypes

    Hero Image

     

    A hero image is a large image prominently placed above the fold. It’s a huge opportunity to promote our flagship case studies and solutions such as Robotics, Transportation, or Energy.

    Grid Systems

     

    The grid is the skeleton for the design. Why use grids? It is a tool to provide rhythm and consistency and helps us to produce effective alignment and organised design.

    The grid is not necessarily boring though. The content after the hero image, for example, is a grid-based layout segmented by the colourful jigsaw puzzle. It helps visitors to find the content related to their interests without too much effort.

    Social Innovation Case Studies

     

    As the old saying goes, if everything’s important, nothing is, so I avoided trying to present all of the available content equally.  By giving significantly more space to one of the key businesses, users have never any doubt the first thing that they should be looking at. This is further emphasised by the choices of the image and the headline.

    Mobile Prototypes

    ← Previous

    Next →