KOMINFO Website Redesign

My First UX Hands On Experience

22 Oktober 2015

Last April I participated in a website redesign competition held by Indonesia’s Ministry of Communications and Information Technology (Menkominfo). Me and my team decided to try using some of UX design process in our work. Because the 2 week deadline, we could only realise some of the process as follows:

Step 1: Research

First we research the initial state of the website. We did it by doing a web analytics research via Google Analytics, Alexa and SimilarWeb. We also did a user testing in the form of tree testing to validate our information architecture redesign.

Initial State

Before the redesign, the website’s information components can be categorized to:

The initial state of the ministry’s website
  • Navigation Header
  • News Reel
  • Closable Slider
  • Slider/Carousel
  • Internal Shortcuts
  • Article (News, Press Release, Announcement, dll)
  • Live Twitter Feed
  • The Minister’s Profile
  • External Shortcuts
  • Navigation Footer
  • Footer

The ministry also gave us a set of rules about the content of the website that we must account for

The information that must be included

From here, we made assumptions on the business needs of Kominfo

Web Analytics

After discovering the needs of the business, we then look for the user’s needs by examining reports from the web analytics. 38,20% of traffics come from Google and other search engines, making them the main source of traffic to the ministry’s website.

Keyword Research

With search engines being the website’s main traffic source we conduct a keyword research to discover the purpose of users visiting the website.

Based on our findings, we then made assumptions on the user’s needs

User Research

To make some user personas, we also looked at the web analytic reports. Specifically, the audience interest and the audience demographic

Tree Testing

To test our assumptions that the initial navigation bar is confusing to users, we conducted a tree testing to 7 respondents.

From this test, we discovered that 43% of the had to redirect themself to choose the right answer. This confirms our assumption that the navigation bar need reorganization.

Results from our tree testing

Step 2: Design

Information Design

We start by designing the information architecture of the navigation bar. Following the UX design process, we conducted a card sorting test to determine the best way to organize the links.

Card Sorting

The test‘s output is a Dendrogram that we use to determine the grouping of links in the navigation bar.

To meet both the business and user needs we decided to use 3 big groups and making them mega menus.

Information architecture for the navigation bar

We also designed the information architecture for the home page based on the business needs and the user needs.

Information architecture for the home page

Interaction Design

We sketched our layout ideas for the mega menus and the home page.

Sketching rancangan mega menu

From the information architecture that we made, we designed 2 variations of the home page. The designs differs in the placement of the ministry’s profile, which is part of the business needs. Both of the designs were tested with A/B Testing to 35 respondents. We ended up choosing the second (right) design with 54,3% votes.

2 home page design for A/B Testing

After considering the usability problems that may arise from a carousel, we decided not to use it. Instead we considered some alternatives patterns such as overflow, single, equal grid and masonry grid. We ended up choosing the masonry grid pattern to replace the main carousel in our previous design.

Overflow & Single Pattern
Equal & Masonry Grid Pattern

Step 3: Visual Design

We start by choosing fonts, colors and shapes for the elements in the website.

Style Guide

We also design the logos for the shortcuts.

Shortcut Logos

And the navigation menu

Navigation Menu
Mega Menu

Here you can see the side by side comparison of the wireframe and the visual design.

Home Page

Final Design

You can see the live version of the design here

Closing Words…

Due to time constraint and our inexperience at the time, we ended up not making user personas. We also didn’t win the contest. I personally suspect the reason is because we violated the rule by using a masonry grid instead of a carousel, but we’re not really sure.

But in the end, this was a great experience for us. This is my first hands-on experience doing UX design process and it opened my eyes to the wonders of UX design. Doing the research was eye opening and it made so much sense to me.