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.
Before the redesign, the website’s information components can be categorized to:
- Navigation Header
- News Reel
- Closable Slider
- Internal Shortcuts
- Article (News, Press Release, Announcement, dll)
- Live Twitter Feed
- The Minister’s Profile
- External Shortcuts
- Navigation Footer
The ministry also gave us a set of rules about the content of the website that we must account for
From here, we made assumptions on the business needs of Kominfo
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.
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
To make some user personas, we also looked at the web analytic reports. Specifically, the audience interest and the audience demographic
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.
Step 2: 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.
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.
We also designed the information architecture for the home page based on the business needs and the user needs.
We sketched our layout ideas for the mega menus and the home page.
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.
Konsiderasi Usability dari Carousel
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.
Step 3: Visual Design
We start by choosing fonts, colors and shapes for the elements in the website.
We also design the logos for the shortcuts.
And the navigation menu
Here you can see the side by side comparison of the wireframe and the visual design.
You can see the live version of the design here
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.