Interactive Design | Project 2 : Website Redesign Prototype

 

Interactive Design | Project 2: Website Redesign Prototype

01/04/2025 - 08/05/2025 | Week 7 - Week 10

Jesslyn Octavia Tjong / 0374562 / Bachelor of Design (Honors) in Creative Media

Interactive Design / Taylor's University

 INSTRUCTION

MIB April 2025

Project 2 : Website Redesign Prototype

This assignment requires me to create a clickable, interactive prototype of your previously proposed website redesign. Using tools like Figma, I'll demonstrate the improved visual design and user experience, including key pages (homepage, core content, contact), clear navigation, and responsiveness across devices.

Following up on Project 1, I proposed the following goals to address the identified issues:

• Elevate Visuals & Engagement: I knew we needed to tackle the aesthetic and engagement problems.
• Improve Content Organization: The confusing navigation and content flow directly led me to this goal.
• Optimize Speed & Desktop Reliability: To combat slow speeds and ensure stability, I made this a key objective.
• Enhance Mobile Responsiveness: The critical mobile usability issues absolutely drove me to focus on this, including new wireframe designs.

These were the original wireframe references posted in my redesign proposal:

I tried creating my first draft from the wireframes proposed above. Initially, my attempts to recreate the original wireframes resulted in a cluttered and aesthetically disjointed design, failing to complement the proposal's vision

This version looked cluttered because it lacked enough whitespace and a clear visual hierarchy. Text and calls to action were less readable because elements frequently clashed with busy backgrounds. Compared to a cleaner layout, the overall design felt less polished, which affected the user experience and modern aesthetic appeal.

My feedback was to look Dribbble for design improvements. To refine my restaurant website design, especially after feedback on clutter, I noticed on:

• Aesthetic: Observe color palettes, typography, and image quality.
• Whitespace is crucial as the empty space is used to reduce clutter and make content breathable.
• Structure: Note grid use, alignment, and consistent spacing between elements.
• Highlight key information (e.g., booking, menu) through size, contrast, and placement.
• Prominent Call to Action Button
• Make small, focused changes, always prioritizing clarity and visual consistency

Inspired by Rosui's innovative call-to-action, appealing color scheme, and intuitive menu layout, I significantly refined my prototype's design and user experience.

I tested various heading fonts, ultimately choosing Instrument Sans or Outfit. Both provide a modern, clean aesthetic and strong visual impact. This ensures excellent readability and complements the refined, inviting atmosphere we aim to convey for [Restaurant Name]'s brand, aligning with contemporary digital design trends.

Fig 

A second-person perspective (e.g., "your") was purposefully incorporated into headlines and key messages. By speaking directly to the user, this tailored strategy strengthens the bond and promotes involvement by persuasion.

Images of chefs and staff were prominently displayed in order to create a stronger bond and increase trust. By demonstrating the love that goes into the food and enhancing the restaurant's ambience, this humanizes the dining experience. At the same time, the color palette was purposefully lighter. A sense of calm and ease is now conveyed by this softer palette, which exquisitely captures the love and care that go into each and every real Indonesian dish.

In the figure above, there are frames beside each other without a bigger frame of desktop size behind. This came to be as I was duplicating frames for pictures to be placed for our Weekly Delights Section in the Menu with a horizontal scrolling feature.

Horizontal scrolling was used for certain menu and news/promotion sections. This optimizes vertical space, allowing users to easily discover more items or offers without endless vertical scrolling. It creates an engaging, modern Browse experience, keeping diverse content neatly organized and accessible.

My demand of I incorporated horizontal scrolling represents clear visual cues for horizontal scrolling. Elements like partially visible items at the edge or subtle scroll indicators guide users, making it intuitive to discover more content. This ensures effortless browsing for both touch and mouse interfaces, maximizing content discoverability.

In the end, the prototype directly tackles the initial redesign proposal objectives:

• Visual Design & User Engagement: Achieved via a sophisticated visual language (lighter palette, refined typography), enhanced visual storytelling (chef/people imagery), and engaging horizontal scrolling. This modern design fosters deeper user engagement.
• Content Presentation: Addressed by intuitive navigation, reorganized information architecture, and the Personalized Promotions Hub. Horizontal scrolling optimizes space for intuitive, visually appealing, and easily discoverable content.
• Enhance Performance & Desktop Reliability: The clean, uncluttered design with ample whitespace and optimized visuals lays the groundwork for a fast, stable website, ensuring a consistently viewable desktop experience.
• Mobile Device Accessibility & Responsiveness: Met through a dedicated mobile-first design approach. The prototype's flexible layouts ensure a seamless, fully functional, and optimal user experience on smartphones and tablets.

LINK : https://drive.google.com/file/d/1YNyNzuYmlYETomAXiErxlrlvEHKqHRxn/view?usp=sharing