Rethink and Redesign of Iamsterdam.com

Redesign the tourism portal of the website iamsterdam.com

I have strong interest in visual and UI design on top of my study field of user experience design and research. When Google firstly anounced its Material Design Criteria, I was eager to apply and to try it out on real cases. This is a self-motivated project I did in two days to redesign the old version website of iamsterdam.com under the criteria and framework of Google Material Design. I considered myself as a typical target user (ie. tourist) of this website and fully utilized my personal experience and knowledge on the redesign. By considering the priority of user intention, information and interaction of the original website were evaluated and restructured so as to enrich and improve user experience. Information architecture, wireframes, visual comps were exhibited along the process.

Personal Project

10/2014

Information Restructure

Responsive image
Responsive image
Responsive image
Responsive image

The information are confused while structure and layers are overlapped from time to time in the old version of iamsterdam.com website when user scrolling down the page.
The original website involves three mixed portals respectively for tourism, locals and business. However, I chose to focus on mainly restructuring and redesigning the tourism part to fully utilize own experience.

As a portal for public especially for tourists, information on main page is too overwhelmed and it is not efficient to search for target information. One of the user said: "I don't know where to begin". There is too much information in an illogical layout.
Thus, I began with firstly reorganizing the information inside this website, and focused mainly on the main pages and more effective functions.

. . .

Wireframes to address key functionalities

Iamsterdam-wireframe1.png
Iamsterdam-wireframe2.jpg
Responsive image
Responsive image

The redesign web page focuses on improving and enriching interaction and user experience. Main page will only provide modules about on-going events and the most practical informations and suggestions. Business collaboration from third parties are also considered to display on this page. Users get to know detailed description by clicking and unfolding each card. This prevents too much information on the page and causing confusions.
Design considerations were given to reponsive layout across platforms.

Users can easily explore or search for information by a left toggled menu. Information about specific selections will be sorted out according to locations, activities or combination. It can be resorted in the same page at anytime through resetting the toggled menu. Detailed aforementioned information will appear in cards while user scroll down and click more.
Such a process of exploring and discovering, users are more involved into the content of the website through simple redesign.

Responsive visual layout and mockup

Responsive image
Responsive image

Responsive image
Responsive image

Usability Test Suggestions

The draft version of interaction and visual design was based on my initial expeirence as a designer and tourist. For further implementation, usability test with assistance of Google Analytics to quantify conversion rate and A/B testing can be carried out. Examples were given below:

Conversion rate of landing on valuable information page and exploration function

Iamsterdam-test1.jpeg

Conversion rate of landing on page of Iamsterdam card, bussiness partner

Iamsterdam-test2.jpg

A/B testing for the conversion rate of landing on hotel/ticketing booking page, business partner

Iamsterdam-test3.jpeg

A/B testing for the placement and effectiveness of search function

Iamsterdam-test4.jpeg