Interactive Design - Project 2 : Website Redesign Prototype
Interactive Design - Project 2 : Website Redesign Prototype
28/05/2025 - 22/06/2025 / Week 6 – Week 9
Valenz Jycee Primadi / 0373407
Interactive Design / Creative Media / School of design
Project 2
TABLE OF CONTENTS
1. Lectures
2. Instructions
5.Feedback
6. Reflection
- Transform the previously developed website redesign proposal into a functional and interactive prototype.
- Visually and experientially represent the proposed design and UX improvements.
- Demonstrate the application of UX principles, design strategies, and content organization.
- Enhance the overall usability, functionality, and visual appeal of the website.
- Include interactive prototypes of key pages:
- Homepage, showcasing navigation, hero section, and main content areas.
- Core Content Page, e.g., About Us, Services, or Products.
- Contact Page, displays form interaction or other contact methods.
- Enable users to navigate and interact with the prototype to simulate a realistic user journey.
- Playful Color Scheme Implementation : Rather than rigid and sterile forms of color, the homepage source design uses a more playful and bright color scheme to encourage attention and try to engage younger or less formal audiences. The purpose of changing the color to be more lively is to create an engaging and dynamic first impression for the user.
- Typography System for Visual Hierarchy
- Fredoka and Bungee are used for headings to create bold, playful, and attention-grabbing titles.
- Lato is used for body text due to its readability and clean, modern appearance, ensuring legibility across various screen sizes.
- Enhanced Navigation with Interactive Hover Effects : Interactive hover effects were added to the main nav buttons to provide immediate visual and sensory feedback. When added in the right way, this improves usability by offering a “look, don’t touch” signal when hovering over items to show interactivity and reinforce the user’s perceived control when exploring our site.
- Dual Carousel System for Content Highlighting. The homepage integrates two distinct carousel types:
- A scaling carousel, where images or content cards transition from smaller to larger sizes to draw attention and create a sense of motion and hierarchy.
- A horizontal sliding carousel, which allows users to browse multiple items side-by-side intuitively, particularly effective for showcasing featured products or promotions.
Landing Pages to Core Pages
The user is able to land on the core pages directly or on a product (core content) page. From the homepage, the user can see a Contact page. Navigating easily helps to explore and architect an information path without much friction to get to content that is relevant.
Key Features – Core Content Page
- Interactive Hover Effects on Action Buttons : All clickable buttons in the core content predator pages, such as "View Product" have hover effects with immediate feedback. This adds an enhanced user experience by reinforcing clickability and better informing user interaction.
- Pop-style Carousel for Product Highlighting : A visually dynamic pop-style carousel is implemented to showcase featured or new products. Items in this carousel appear with scale or motion transitions, creating a more engaging and attention-catching way to display product selections.
- Filterable Dropdown Menu for Product Categories : A dropdown filter is found at the Infrastructure at theAttach our content are to sort products by type, such as "Mie Sedaap Goreng" and "Mie Sedaap Kuah." This component complements visibility and usability better by giving users the ability to access pertinent product categories with direct preference.
Key Features – Contact Page
- Interactive Hover Effects on Contact Elements : Consistent with the overall design system, all interactive elements on the contact page (such as the "Submit" button or icons) include hover effects to provide immediate visual feedback. This ensures interface consistency and improves user confidence when interacting with the form.
Blinking Cursor and Focus Indicators for Input Fields : Input fields (e.g., Name, Email, Message) display a blinking cursor and clear focus states, indicating to users where they are currently typing. This subtle micro-interaction enhances usability and accessibility by guiding user attention and ensuring clarity during data entry.
Informational Guidance and Field Labels : Each input field is accompanied by concise labels and placeholder text to help users understand what information is required (e.g., “Enter your name”). This reduces the chance of input errors and contributes to a smoother form-filling experience.
- Visual Style Adjustments : The homepage color palette was changed to a more playful and vibrant tone to make the site more engaging and suitable for a younger or more casual audience. This aligns with the goal of modernizing the visual design while maintaining brand recognition.
Button Placement and Interaction : Navigation and action buttons were repositioned toward the edges of the interface to increase visibility and guide users intuitively. Additionally, hover effects were added to all navigation buttons, providing interactive feedback and enhancing usability.
Typography and Sizing : Font sizes and element scales were adjusted to create a clearer visual hierarchy. Smaller text was used for less critical content, while key messages and CTAs (calls to action) were enlarged to attract attention.
Page Navigation and Structure : The homepage was designed to serve as a clear entry point to the core sections of the website: Products, Core Content, and Contact Page. Clickable elements and layout flow ensure that users can access essential information seamlessly.
- Modern Look, Familiar Feel : The site is being redesigned to be modern, visually engaging and exciting—especially for younger users—while maintaining the qualities that make Mie Sedaap recognized. The design will juxtapose fun visuals while creating brand familiarity to make long-term customers feel comfortable.
- Improved Usability : The new site will be simpler and quicker to use. We are enhancing the navigation flow, providing more direct menu choices, and removing any potential confusion that might prevent a user from returning. Load times will speed up, and the entire experience will be seamless, especially on mobile devices.
- Stronger Brand Presence : There will be a consistent reflection of Mie Sedaap's bright and fun character from each touchpoint. The lively articles of color and typography to product experience and micro-interactions will create an enriching experience making the brand immediately recognizable and emotively connective.
- More Accessible for Everyone : Accessibility is a key focus. The site will meet best practices by using proper contrast ratios, ensuring compatibility with screen readers, and allowing full keyboard navigation. These updates will make the experience usable and enjoyable for everyone, regardless of ability.
- Target Audience : Primary users include students and young working professionals who want food that is fast, convenient and still tasty. Regardless if they are searching for new places on their break, traveling from point to point, or catching a late-night bite while studying, the site will be developed to accommodate their extremely fast-paced, digital-prioritized lifestyle.
FEEDBACK
REFLECTION
Experience
This was my first time using Figma, so everything felt very new to me. At the beginning, I had to do a lot of research just to understand the basics—how to use frames, link pages, and build a simple prototype. Even though I had opened Figma before, I never really explored it in depth. It was a bit overwhelming at first, especially when trying to create a carousel that didn't work the way I expected. There were moments where I felt stuck or unsure, but I took my time, tried again, and slowly started to enjoy the process of learning.
Observation
As I spent more time with Figma, I started to notice how thoughtfully designed the tool is. Everything has a purpose, and once I began to understand the structure, it became easier to follow. I realized that even though some features like auto layout or interactions can be tricky at first, they’re actually very useful once you get the hang of it. Small mistakes could affect the whole prototype, but that helped me become more detail-oriented. Overall, I saw how Figma supports designers by making ideas easier to visualize and share in a clean, professional way.
Findings
Through this experience, I learned that Figma is a powerful tool for prototyping and design—but it takes time and patience to really understand it. I discovered that creating even small interactive features, like a carousel, required careful setup and testing. There were times I had to redo things from the start, but each try helped me learn something new. I also found that research and tutorials made a big difference in building my confidence. In the end, I felt proud that I didn’t give up. Figma helped me see how design ideas can come to life step by step.
Comments
Post a Comment