UX Design

March 2021 Semester 4
Ng Ming De (0335594)
UX Design (GCD 62304)
Convergence

Instructions

For this project, we are to make a mobile website mock-up for an existing travelling magazine in a group.

Here is the brief:

The travel magazine is called Convergence and they want to have a clean and minimalistic look while also have a vibrant color to keep their logo color.

Convergence Website: https://convergence.malaysiaairports.com.my/

Fig 1.1 Convergence Website

Fig 1.2 Convergence Website

Fig 1.3 Convergence Website

Upon first impressions, the website looked like an article website rather than a travel magazine. Everything was just dumped onto it and has no purpose. It lacked a call to action button, inconsistent layout, overall it was lacking. We made survey for the general public to share their experiences with us on the website.

Google Form Link:
https://forms.gle/bsHprBg2adYc8FsB9

Google Sheets (responses) Link:
https://docs.google.com/spreadsheets/d/e/2PACX1vQCCPXTgiM9WTvIa7qXth1ZPc4bv6XJ20dKoSDYL5AAcJ9LY1jadSl59jQ1MgntQPsMzA_CjAdqfzMW/pubhtml

Fig 2.1 Moodboard

Here's our proposal slide:

Based on the survey responses, we made a wireframe:

Fig 3.1 Wireframe

Fig 3.2 Wireframe

Using the wireframe, we made tried a first attempt using figma:

Fig 3.3 Figma 1st attempt

We even traced the logo and icons at the footer of the Convergence website as these two are to be retained from the original layout.

Fig 3.4 Traced Logo

Fig 3.5 Traced Footer icons

Fig 3.6 Footer icons in mockup

Fig 3.7 Footer icons saturated

We also added a navigation bar with the topics and bookmark as it would be easier to access and when scrolling through it will always stay on the screen.

Fig 3.8 Navigation Bar

Then, we did some experimenting on the colors for the homepage.

Fig 3.9 Experimenting

Mr Allen kinda like the yellow-orange tones so we picked up from that and continue working on the homepage. After some tweaking and refinement, we compiled everything.