Interactive Design : Project 2 : Website Redesign Prototype

 Interactive Design

 Exercise 2: HTML Exercise: Simple Personal Profile Page

Start from 24.9.2025

5.11.2025 - 26.11.2025 / Week 5 - Week 6

LI XIN LI / 0379305

Interactive Design  / Bachelor of Interactive Spatial Design 

Project 2: Website Redesign Prototype

Introduction:

Assignment Objective: Transform the website redesign into a functional prototype, visually showcasing design improvements and demonstrating the application of design principles and UX strategies.

Core Task: Based on the initial redesign, develop a prototype using tools such as Adobe XD and Figma. The prototype must include interactivity and key pages.

Prototype Requirements: Clickable, supporting page navigation and interaction with core elements, including button hover effects, form fields, and other interactive effects.

Required Pages: Homepage, at least one core content page, and a contact page.Usability and a realistic interactive experience must be ensured.

Submission Content: Accessible prototype; a 500-800 word electronic portfolio description.

My core objective was to:

The AEON website redesign prototype translates my earlier proposal into a functional, interactive experience. Instead of simply replicating UI elements, this prototype focuses on solving the original site’s usability issues—such as unclear hierarchy, inconsistent spacing, and weak visual direction. My goal was to create an interface that feels structured, modern, and approachable, while improving the user's ability to navigate and understand AEON’s service ecosystem.

Original website link: https://aeonretail.com.my/

PROJECT 1: Website Redesign Proposal

AEON，作者 LI XINLI

To support this objective, I applied consistent global components across all pages: a fixed navigation bar, a unified footer, responsive hover states, and shadow-enhanced content cards. These elements establish rhythm, structure, and clarity throughout the site, allowing users to move through content with ease.

Design Objectives:

The redesign is driven by three core goals:

1. Improve clarity and information hierarchy

AEON’s original site presents dense information with little structural separation. My dign introduces modular layouts, clearer spacing, and visual hierarchy to reduce cognitive load.

2. Enhance usability and navigation flow

A fixed top navigation ensures that users never lose context while browsing, and consistent page architecture helps them anticipate content.

3. Strengthen brand presence with clean visual identity

By using soft shadows, simplified typography, and consistent alignment, the prototype feels more modern while maintaining AEON’s trustworthy retail tone.

Design Design Rationale:

Every design decision prioritizes readability, predictability, and interaction clarity.
Shadowed cards provide subtle depth without distracting from content. Buttons use hover states to confirm interactivity. Layouts follow a top-down progression that supports natural reading flow.

Instead of overwhelming users with multiple competing visuals, each page highlights one focal point—whether it’s the membership card, a hero image, or a single content module. This not only improves visual comfort but also makes the content feel intentional rather than cluttered.

Home Page

The homepage adopts a three-card grid (Living, Food, Wellness) with bold headings and brief descriptions. The structure encourages rapid scanning, which is essential for a retail environment where users often seek information quickly. Subtle shadows and spacing create visual order, offering a clean starting point for navigation.

About Us Page

The About page breaks AEON’s identity into modular sections: brand positioning, business scope, corporate culture, history, and CSR. This structure helps users digest heavy informational content without feeling overwhelmed. Each module has consistent typography and spacing, reinforcing a calm reading rhythm and improving comprehension.

Membership Page

A large, centered AEON Visa card acts as the visual anchor, immediately communicating the page’s purpose. Key membership benefits appear in a horizontal layout beneath the card, followed by a prominent “Join Us” button with hover feedback. This layout supports decision-making by presenting value clearly and visually.

Contact Page

The two-column layout separates contact information from the message form, minimizing distractions. The right-side form includes essential fields only, and the hover state on the “Send” button confirms its actionability. The design focuses on efficiency, matching the expectations for a contact interface.

Trend – Beauty Page

This is the most expressive page. A large banner image sets the tone, overlapping slightly onto the content card to create visual depth. The card uses a magenta subtitle and bold text, giving the page a promotional style suitable for trend-oriented content. The single-card layout keeps the message clear and impactful.

Alignment With Proposal Goals

The final prototype fulfills the redesign goals through:

Consistent navigation and layout → improved usability

Clear hierarchy and modular content → enhanced readability

Hover feedback & shadows → stronger interaction clarity

Simplified structure → reduced cognitive burden for users

By converting the proposal into a working prototype, I was able to validate these design decisions and refine the user journey through real interaction flow.

Figma model interactive video:

Teacher's feedback

1. Functionality and Interaction

• A carousel can be added, but the call to action for each section should be clearly stated so users know what to do next.
• Buttons already exist; the text doesn't need underlining, and the buttons themselves shouldn't have any extra decorative lines. Keep it simple and consistent.

2. Visuals and Layout

• The page layout is a bit cluttered, and the corner design isn't interesting enough. It needs to be readjusted to achieve a more balanced overall look.
• The current design doesn't look professional enough and needs further optimization.
• Button styles should be consistent. Underlines sometimes appear and need to be changed to maintain consistency.

Overall, the page should look more professional and unified and improve user guidance.

Optimization:

Button:

First, I standardized all the buttons, ensuring they are consistent in both color and typography.

Navigation bar and footer:

I refined the navigation and footer for a clearer and more polished look:

• Adjusted the dropdown navigation font size and removed the underline for a cleaner appearance.

• Redesigned the main navigation layout to improve clarity and readability.

• 
  Reworked the footer by removing unnecessary decorative lines to reduce the commercial feel and create a more clean, professional style.

Text:

I standardized the font sizes across different sections of all pages to create a more consistent and cohesive visual experience.

Colors:

I adjusted the page colors to ensure consistency across different sections, enhancing overall visual harmony and professionalism.

I removed unnecessary shadows and rounded corners throughout the interface, creating a cleaner and more streamlined look. This enhances visual consistency and professionalism, emphasizes the content, and provides a more comfortable user experience.

Layout:

I enhanced the overall layout by reorganizing page elements, adjusting spacing, and standardizing alignment across sections. These improvements create a clearer visual hierarchy, a cleaner structure, and a more balanced and professional overall appearance.

Redesign 1

Home Page

About Us Page

Membership Page

Contact Page

Trend – Beauty Page

After this version, I felt there was still room for improvement, so I made another round of updates.

The previous color scheme looked too jarring, so I changed the overall color scheme to use pink tones and made the color gradations more consistent.

Increased spacing between sections for better readability

In the updated design, I enhanced the spacing between modules by unifying the top and bottom margins, increasing the distance between text and images, and reducing overly crowded elements. This creates a clearer visual rhythm and more breathing room, making the page feel cleaner, more structured, and significantly more comfortable to browse.

Simplify

I removed unnecessary buttons to streamline the layout, reduce visual clutter, and ensure that only the most essential actions remain. This makes the interface cleaner, more focused, and easier for users to navigate.

Added soft pink background sections to enhance brand consistency

To avoid a flat and monotonous layout, I introduced soft pink background blocks in selected sections. This gentle, non-intrusive pink aligns with AEON’s brand color, adds visual rhythm, and naturally highlights key content areas.

Enhanced readability of long paragraphs

I adjusted line height, paragraph spacing, and overall text formatting to make lengthy content easier to read and more suitable for a corporate information page.

Final before and after comparison

Home Page

Before

After

About us Page

Before

After

Membership Page

Before

After

Trend – Beauty Page

Before

After

Contact Page

Before

After

Final Redesign the Figma model interactive video:

Figma model:

Reflection

During the development of the AEON website redesign prototype, I gradually realized that web design is far more than arranging colors and layouts. It is a complete system built from visual language, information hierarchy, and user experience logic. This project became a turning point for me, shifting me from intuitive, aesthetic-focused design toward a more structured and user-oriented approach aligned with brand identity.

1. Rethinking Visual System Design

Professional color usage & brand alignment

In my earlier drafts, the colors were overly bright and highly saturated, which weakened hierarchy and distracted the user. With the help of feedback, I understood that AEON requires a clean, mature, readable color system. I refined the palette, unified button and card visuals, and established a calmer, more professional look.

The importance of consistency

Inconsistencies in fonts, shadows, corner radius, and card structure made me realize that:
visual consistency is the foundation of professional design.
By creating clearer visual standards, the overall interface became much more coherent.

2. Understanding User Experience Beyond Aesthetics

Building a clear user flow

My lecturer reminded me to look beyond aesthetics and focus on how users move through the site. This led me to reassess:

• Is the navigation intuitive?

• Is the content easy to scan?

• Are actions clearly highlighted?

• Does the user know what to do next?

This shift—from designing screens to designing experiences—helped me understand the true value of UX.

Reducing cognitive load

In the Trend – Beauty and Contact pages, I used clearer layouts, focused content, and structured sections to help users find information effortlessly. It was my first time truly applying the concept of lowering cognitive load in design.

3. Growth in Information Hierarchy & Content Structure

By adjusting text weight, size, spacing, and block separation, I learned to build clearer reading rhythms. Content became cleaner, more structured, and easier to navigate.
I also explored balancing imagery and text, especially in the Beauty page, giving the layout more depth and stronger visual focus.

4. Developing a System-Driven Approach

This project taught me that professional design is not about making things look pretty—it’s about building reusable, scalable systems. I created:

• a unified button system

• consistent card components

• a color system

• typography and spacing rules

• image style alignment

These standards significantly improved the overall coherence of the prototype.

5. Learning to Transform Feedback Into Action

The feedback I received—misused underline on buttons, unnecessary lines, inconsistent components, and immature color choices—helped me refine my thinking. I turned each comment into actionable improvement:

• removed unnecessary elements

• rebuilt components

• adjusted saturation

• unified styling across pages

This process helped me shift from intuitive design to logic-based design.

Conclusion: The Real Growth in My Design Thinking (Rewritten Version)

This project taught me that:

Effective design is not about visual decoration—it’s about building systems that guide users effortlessly.

My biggest takeaway is:

I began to think in systems rather than individual screens.
Visuals, structure, content, and interactions are no longer isolated components—they form a unified design logic.

Through continuous refinement, alignment, and restructuring, I feel myself transitioning from a visually-driven student to a designer who understands brand, experience, and system thinking.