Skip to main content

Interactive Design / Project 2

07.11.2024 - 05.12.2024
GAN YI KIAN / 0374572
Bachelor of Design (Hons) in Creative Media
Interactive Design / Project 2
Website Redesign Prototype





Lecture

Week 6
Holiday

Week 7
CSS Selectors


Week 8
Independent learning week

Week 9
Box Model


Week 10
Cool website

Position


Week 11
Completed the web prototype of the final project 2
Bootstrap Link
Mr Sham introduced us to this website, which helped us create a website for the Final Project.



Project 2 | Website Redesign Prototype

Objective:
Transform the previous web design proposal into a functional prototype to demonstrate the visual effects and user experience of the design improvement.

Task requirements:

Interactive prototype

Use tools (such as Adobe XD, Figma) to create a clickable prototype.
Include key pages:
  • Homepage: navigation bar, main visual area, and core content display.
  • Core content page: such as "product" or "service" page, reflecting content organization.
  • Contact page: display form or other interactive methods.

User experience focus
  • Usability: intuitive navigation and interface design.
  • Interactivity: interactive simulation of buttons, hover states, and forms.
Submission method

Submit an online prototype that can be accessed through a link, or a downloadable file.

My plan:
I will use Figma to create a prototype around LINGsCARS website, focusing on user experience optimization and design aesthetics. My reference site is Volvo Malaysia.

I decided to design the Homepage and Contact Page. For the Core Content Pages, I chose to create a page about the service and a page for user login.


I also made some navigations. If you are interested, you can go to my work Project 1 to try it out.


Key features of the prototype

1. Homepage design
  • Visual focus: The header located at the top of the page is also the main informative and visual area of the site, which has adequately contrasting images and unambiguous buttons that invite and help the user to develop an immediate feeling of understanding the purpose and the main offering of the site – its product line.
  • Navigation bar: A fixed navigation bar is introduced to enable users to access key sections like “Home”, “Products”, “Services” and “Contact Us without necessarily scrolling across the page.
  • Featured content display: From a card design perspective, it is very convenient and easy to recognize how the generally popular product or promotion is highlighted.
2. Core content page (Service page)
  • Content organization: Clearly display all kinds of service information and arrange them by category, so that users can quickly find the services they need.
  • Interactive function: Design a hover effect for service items, provide a brief description of the service and quick links to help users understand the specific content in depth.
3. Contact page
  • Form design: Including fields such as "name", "email", "title" and "number", the form is simple and easy to use.
  • Additional information: Social media links and map placeholders are added, providing multiple contact methods.
The considerations behind design decisions

1. User-centered design
  • The organization of content and design of the navigation bar and other available interfaces adheres to ease of use to guarantee that a user will locate the desired information as fast as possible.
  • It is easy to use and this is evidently ensured by taking into consideration the accessibility, for instance, the text color contrast, clear label prompts of form areas, etc.

2. Visual consistency

For color and font, focus on consistency, and in addition to that there is correspondence to the brand image.

In this sense, use reasonably different levels of spacings, as well as alignments to achieve the most clean and neat design decisions.

3. Adjustment of details of social relations

Interactive effects are incorporated into objects like buttons, filters, and navigation bars to create the feel of working real website applications.

4. Clear content priorities

Functional Significance: This hierarchy should be employed to draw attention to key elements (for instance, the button ‘’Explore our range’’ and products) to enable users to peruse through website information with ease.

How to achieve the proposal goals

Based on the analysis, in this prototype design, what appeared most important were the usability, look and feel, readability of content, and enabling of business objectives. First, as for usability, I made the navigation bar static and chose a plain layout for all the web pages to ensure users can directly locate the information they want. Thus, all the additional simulated interactive details like hover effects and click feedback improved the fluidity and ease of operation.

From a design perspective, I chose a current design style for the website to ensure that it meets the trends of the current world and keeps the tone of the brand. Thus, the use of a set of pictures and texts with the addition of reasonable layering not only makes the page more visually appealing but also leads the users’’ attention to the core zone.

In addition, in the hope of reducing the difficulty of the content, I simplified the content structure and font type to enhance the website's friendliness for a variety of audiences. Moreover, according to the barrier-free design standards, more users including visually impaired users can surf through the website easily which shows the corporations’ concern to the different types of users.

Thirdly, the business goals were also fully taken into consideration. The current format of the service details page is an enhanced design, with an animated interface to display the service’s information and a convenient browsing manner, so it can be understood and decided by users. Through such calls to action and clean website page designs, the prototype, however, enhances user engagement while offering adequate backing of business objectives.

Personal reflection and future improvement direction

Through this prototype development, I moved from conceptual design to actual operation and deeply experienced how to balance beauty and functionality. The prototype has achieved the design goals, but there is still room for further improvement:

  • Dynamic effect optimization: smoother animation transition effects can be added to make the page more attractive.
  • Function expansion: More pages (such as shopping carts and user reviews) can be added in the future to improve the website structure.

Final Prototype PDF



Comments

Popular posts from this blog

Advanced Typography / Task 1

24.09.2024 - 19.10.2024 / Week 1 - Week 4 GAN YI KIAN / 0374572 Advanced Typography / Bachelor of Design (Hons) in Creative Media Task 1 / Exercises  LECTURES Week 1 Fig 1.1 Typographic System Examples  Typographic Systems "All design is based on a structural system" There are eight major variations with an infinite number of permutations. Axial Radial Dilational Random Grid Modular Transitional Bilateral Axial All elements are organized to the left or right of a single axis. Radial All elements are extended from a point of focus. Dilational All systems expand from a central point in a circular manner. Random Elements appear to have no specific pattern or relationship. Grid A system if vertical and horizontal divisions. Modular A series of non-objective elements are constructed as standardized elements. Transitional An informational system of layered banding. Bilateral All text is arranged symmetrically on a single axis. Week 2 Typographic Composition Emphasis  Fig. ...

Design Principles / Task 3

03.02.2025 - 21.03.2025 / Week 5- Week 7 GAN YI KIAN / 0374572 Design Principles / Bachelor of Design (Hons) in Creative Media Task 3 / Development & Design INSTRUCTIONS Task 3: Development & Design After the visual analysis,will now create a work of design , based by the idea have proposed in Task 2. expected to apply knowledge of design principles in idea development and final design. Can use any medium and/or materials , except for full photography, that are suitable to convey your final visual message. I will choose the first sketch to create the work Sketch 1 This design retains the tranquility and dreamlike feeling of Monet's original painting. I want to enlarge the main water lily in the center and make it the focus of the whole painting. Fig 1.1 Sketch 1 (3/3/2025) I am confused about whether to use watercolor or illustration design, because both are areas I am not good at. Using watercolor can better express the relationship between the water surface. In terms of c...

Intercultural Design

07.02.2025 - 24.03.2025 / Week 1- Week 7 GAN YI KIAN / 0374572 Bachelor of Design (Hons) in Creative Media Intercultural Design  Proposal, Data Collection & Final Project  INSTRUCTIONS Note Week 1 Culture & Design At the beginning of the first day, Mr. Asrizal briefed  us with the precautions and course outline of intercultural design, and then Ms. Noranis's lecture began, and we began to divide into groups. Then my group members included Indonesia and Chinese. Week 2 CMYKL brief Our team was confused about what ‘Everyday Design’ was all about. Then, during this week, we came up with the idea of ​​a clip-on cup holder, focusing on portability and functionality, and even incorporating Malaysian culture such as tiger stripes or “batik” patterns. In fact, there were many more ideas at the beginning, including the design of bowls and board game cards. It was also during this week that we learned that our mentor was Mr. Charles. Week 3 Proposal Q&A sessio...