INTERACTIVE DESIGN - PROJECT 2
26/5/2025 - 18/6/2025 ( Week 6 - Week 9 )
SUN YUTONG (0377440)
Interactive Design / Bachelor of Design (Honours) in Creative Media
Project 2-Website Redesign Prototype
INSTRUCTIONS
LECTURE
Lecture 7: Box Model
Week 8: Classroom Exercises:
Project 2-Website Redesign Prototype
Work Process On Figma:
I selected 3 pages: Home page, Event page and Form page.
The FAQ was created using an accordion design process:
Final Working Prototype Link:
Prototype Link: https://www.figma.com/proto/y61DjKLrTDiASqy3a151Yh/Website-Redesign-Prototype?node-id=0-1&t=8LxrU6bO4gV2wZxX-1
Website prototype introduction
Website prototype brief introduction:
In order to improve the user experience and visual performance of the UK
Property Investors Network website, I redesigned its homepage and event
introduction page. This prototype aims to solve the problems of confusing
navigation, unclear visual hierarchy, and unclear action guidance of the
original site, and attract more potential investors to participate in offline
meetings and course registration through modern design language.
Main functions of the prototype:
This redesign focuses on three key pages: Home, Events, and Form. The Events
page is the core page of the website and is the key page for users to learn
about offline meeting details and complete registration conversion.
In the prototype, I focused on optimizing the navigation bar. The original
navigation bar information architecture was not concise enough, so I
reorganized the original lengthy content into several modules:
"Home-Events-Learning-About Us-Contact Us". I redesigned the Hero area on
the homepage, selected a new background image, and introduced more visually
impactful titles and CTA buttons to enhance user participation motivation.
In the page, I used card-style components to display event information and
course introductions, so that users can quickly browse the core points.
In the FAQ module on the event page, I used an accordion-style interactive
design, and each question can be clicked to expand/collapse to display the
answer. This design can effectively reduce the amount of information when
the page is initially loaded, allowing users to view content of interest,
avoid lengthy pages, and improve overall reading efficiency and visual
neatness. In addition, I also added smooth transition animations to enhance
the interactive experience and make the interface more professional.
The original form page had too many questions, which was not conducive to
users filling in information. I simplified the questions, retained key
information fields, and improved user experience.
Development process:
During the development process, I designed the prototype in Figma according
to the wireframe in the proposal. During the design process, I referred to
the video to complete the interaction of the page, such as the scrolling of
cards, the hover of image icons, and the grouped form design. I used blue as
the main color for the whole webpage, and the unified color makes the
website more professional. The original webpage fonts were not unified, and
the user readability was not high, making it difficult to obtain important
information, so I unified the fonts. I used Montserrat for the title and
Lato for the text. Finally, through Figma's prototype connection function, I
simulated the user's complete operation process to achieve a closed-loop
experience from browsing to registration.
FEEDBACK
The professor explained to me that I needed to pay attention to the width of
the page on both sides to leave some space for the image, and also suggested
that I delete the shadow of the card.
REFLCTION
Project 2 completed the prototype design of the website. In this project, I
learned many different ways of interaction, such as card scrolling effect, FAQ
accordion design, hover card interaction, etc. I also looked up many different
tutorial videos, which was very interesting. In the process of designing the
website, I understood that user experience requires attention to details to
improve the overall feeling.
Comments
Post a Comment