Case study

Tabung Haji

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Overview

Lembaga Tabung Haji (TH ) is an Islamic institution that continuously strives to provide various facilities which are comprehensive and systematic for the welfare of Malaysian Hajj Pilgrims. Tabung Haji aims to ease the user experience when using the websites to get the information needed effortlessly.

Role:

My primary role is as a UI/UX Designer and I did graphic design for all the infographic content in the website. After the website went live, I maintained the hero banner design on weekly basis.

Tools:
  • Figma
  • Adobe Photoshop
  • Adobe Illustrator

Solution

We ensure to incorporate Hajj as the major information to be shown in the landing page with mega menu for the navigation to include other business portfolios under Tabung Haji. We also take into account the responsive design so that it will be intuitive to use in various platforms. I introduce a new design concept to be used for all infographics in the website. The goal is to have clear and accurate information as well as easy to read for older generations should they want to use it as references.

Design

My design process always starts with an inspiration boards. Here I put on links and screenshots some website or any inspirations with the goal to find the design direction the shareholder wish to pursue. In this process, the shareholder may input their own preferences too. Once the design direction has been decided, I proceed with designing several landing page design options and once selected, the rest of the inside pages will follow the theme of the landing page.

So as in Tabung Haji, as a giant Islamic entity in Malaysia, we push the islamic pattern as the background. The design is based on 1-3 grid column layout with the first column become the navigation links and the rest of the column being its contents.

The colour comes from the Tabung Haji logo and we use it as the accents color as header and links, but with a different shades of the accents colour.