Interactive Design - Project 1

28 April 2023 - 8 May 2023/ Week 4 - Week 6
Sim Jia Min 0349784
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Project 1: Landing Page Design Prototype

---

INSTRUCTIONS (MIB)

---

Project 1 - Landing Page Design Prototype

Project details:

Instructions:
Choose an existing website with design problems that you would like to address. Analyze the website's design and identify the areas that need improvement. Develop a concept for your landing page that addresses the design issues and improves the user experience. Create a wireframe or a mock-up of your landing page design. Develop your landing page prototype using any prototype software of your choice (Figma or Adobe XD).

Deliverables:
A one-page design concept that describes your landing page and the design issues you are addressing.

Requirements:
Your landing page should include a clear and concise headline that describes the purpose of the website. The landing page size
width is 1366 pixels. Follow the preset in Figma or Adobe XD. The landing page should include a call-to-action (CTA) a button that directs users to the most important part of the website. It should be visually appealing and easy to navigate. The landing page should adhere to web design best practices, including accessibility and usability.

Chosen bad-designed website:

Figure 1.1: Ministry of Health Malaysia Official Portal https://www.moh.gov.my/index.php?mid=1477

As I always found that the local government website design is always so outdated and tacky, I think this is a great opportunity to use it as a bad-designed website for refinement. 

Design issues:
- look too bland and outdated for an official government website

- the English translation is not fully done, a few parts of the translation are missing 

- not enough white space between the two sections: "public, private, staff" & "latest news, media...." 

- the "staff" button should be somewhere else since this website is mainly built for the public

- too much white space between the social post panels
- The quick link bar on the right side: except for the top 5 logos, visitors probably can't recognize the rest of the 3 logos, so they shouldn't be included

What is ok?:
- colour scheme match to the "health" theme, it looks like a hospital worker's suit colour
-  fonts are readable, but some of them are unnecessary to be bolded

References:

For references, I look up one Malaysian government official website and one foreign country government official website.

Figure 1.2: Ministry of Foreign Affairs Malaysia Official Portal https://www.kln.gov.my/

Not the best-looking website landing page in general but at least it's clean and simple, and compared with some other Malaysian government official websites this is actually something quite presentable already.

Figure 1.3: Official Website of Mississippi (United States of America) https://www.ms.gov/

This certain government website won the Best Government WebAward 2022, which is the main reason why I took it as a reference. The fonts, colour scheme, and layout are modern, clean, and professional-looking. 

Figure 1.4: Wireframes

I create some wireframes on Miro before proceeding to design while keeping some original elements from the original website, I did some necessary changes to fix the design issues.

Figures 1.5 & 1.6: Progress on Adobe XD

Figure 1.7: Progress on Adobe XD

The texts in the design are copy-pasted from the original website, some of them are generated from ChatGPT.

After getting feedback from Mr Shamsul, I did some further refinement to the designs:

Figure 1.8: Final look of the landing page design (with guides)

SUBMISSION

https://xd.adobe.com/view/0e61163f-f035-489e-ba38-c36ddc2770c4-5b32/

Figure 1.9: Final submission of landing page design prototype

Font used:

- Bembo Std: Heading

- Century Gothic: Website name, header, navigation menu, footer

- Open Sans: Body

---

FEEDBACKS

Week 6:

- Overall look clean and simple for a government website, it does look better than the original website

- Choose a bolded font for the serif font

- The CTA is not obvious enough

- Use a complemented colour scheme based on green, maybe can mix with grey colour

- Be consistent in capital letters and small letters

---

REFLECTION

As a first-time user of Adobe XD, I was initially concerned about doing the task of designing a website landing page, but I was also glad to learn to use the software and put my creativity to the test. As I started exploring the software, I was pleasantly surprised by how simple and user-friendly the interface was, it is easy to navigate. Of course, there were moments of frustration as well. There were times when I couldn't figure out how to make a particular element look the way I wanted it to, so I look for online resources available to me, such as video tutorials and forums, which helped me to fix any issues I encountered. As I played around with the software, the more comfortable I became with it. Overall, designing a website landing page using Adobe XD was a rewarding experience.