Interactive Design - Project 2 : Website Redesign Prototype
7/11/2025-27/11/2025 / Week4-Week10
Tan Tzu Yu / 0374460
Interactive Design / Bachelor of Design (Honors) in Creative Media / Taylor's University
Website Redesign Prototype
PROJECT 2 : WEBSITE REDESIGN PROPOSAL
The objective of this assignment is to translate your website redesign proposal into a functional prototype. This prototype should visually and interactively represent the proposed changes, demonstrating your ability to apply design principles and UX strategies effectively.
Building upon your previous assignment (Website Redesign Proposal), you are now required to develop a prototype of the redesigned website. This prototype should reflect the proposed visual design and user experience improvements, providing a tangible representation of the final product.
Prototype Development:
Interactive Prototype:
Develop a clickable prototype that includes key pages and features of the redesigned website. The prototype should allow users to navigate through the site and interact with essential elements.
Tools: Use prototyping tools such as Adobe XD, Figma, Sketch, or any other relevant software to create the prototype.
Key Pages to Include:
Homepage: Present the main design elements, including navigation, hero section, and key content areas.
Core Content Pages: Develop prototypes for at least ONE core page (e.g., About Us, Services, Products) to showcase how the content is organized and presented.
Contact Page: Include a prototype of the contact page, demonstrating how users can interact with forms or other contact methods.
User Experience (UX)
Considerations:
Usability: Ensure the prototype reflects a user-friendly design, with clear navigation, intuitive interfaces, and accessible features.
Interactivity: Implement interactive elements (e.g., buttons, hover states, form fields) to provide a realistic user experience.
Submission:
A fully functional prototype ACCESSIBLE via a SHAREABLE link or as a DOWNLOADABLE file.
A brief write-up in your E-Portfolio of (500–800 words) outlining the key features of the prototype, any design decisions made during development, and how the prototype addresses the objectives set in the redesign proposal.
My selected website is La Cornue (https://lacornue.com/en-GB), it is a French company that produces luxury kitchen appliances, offering a range of products from professional-grade ranges and rôtisseries to kitchen accessories. It serves as a platform for customers to explore their high-end product lines, view design customization options, find inspiration, and learn about the brand's history of craftsmanship and culinary excellence.
Fig 1.0: La Cornue website
Fig 1.1: my redesigned collection page
Fig 1.2: my redesigned "build your own" page
Fig 1.3: my redesigned "contact us" page
Fig 1.4: my redesigned"about us" page
Fig 1.5: my redesigned home page
Link to my website redesign prototype in Figma : https://www.figma.com/design/HKsAgFDWDJw4kpQ3ge16e5/website-redesign-prototype?node-id=2-101&t=Or4EoCJP2oI3SHOD-1
Building upon your previous assignment (Website Redesign Proposal), you are now required to develop a prototype of the redesigned website. This prototype should reflect the proposed visual design and user experience improvements, providing a tangible representation of the final product.
Prototype Development:
Interactive Prototype:
Develop a clickable prototype that includes key pages and features of the redesigned website. The prototype should allow users to navigate through the site and interact with essential elements.
Tools: Use prototyping tools such as Adobe XD, Figma, Sketch, or any other relevant software to create the prototype.
Key Pages to Include:
Homepage: Present the main design elements, including navigation, hero section, and key content areas.
Core Content Pages: Develop prototypes for at least ONE core page (e.g., About Us, Services, Products) to showcase how the content is organized and presented.
Contact Page: Include a prototype of the contact page, demonstrating how users can interact with forms or other contact methods.
User Experience (UX)
Considerations:
Usability: Ensure the prototype reflects a user-friendly design, with clear navigation, intuitive interfaces, and accessible features.
Interactivity: Implement interactive elements (e.g., buttons, hover states, form fields) to provide a realistic user experience.
Submission:
A fully functional prototype ACCESSIBLE via a SHAREABLE link or as a DOWNLOADABLE file.
A brief write-up in your E-Portfolio of (500–800 words) outlining the key features of the prototype, any design decisions made during development, and how the prototype addresses the objectives set in the redesign proposal.
 |
| Fig 1.0: La Cornue website Fig 1.1: my redesigned collection page Fig 1.2: my redesigned "build your own" page Fig 1.3: my redesigned "contact us" page Fig 1.4: my redesigned"about us" page Fig 1.5: my redesigned home page |
REFLECTION
A major feature of my prototype is the consistent navigation system. Every page includes a top banner and footer that link to all five pages, allowing users to move around the website easily without dead ends. The homepage includes additional buttons that link directly to the Collections page, reinforcing the importance of product discovery.
Each page also incorporates basic interactions—hover states, clickable links, dropdown menus, and clickable buttons—to make the prototype feel functional and intuitive.
- Home Page: The homepage sets the tone of the redesigned website: clean layout, balanced spacing, and a luxury feel. Hero buttons and collection previews guide the user deeper into the site.
- Collections Page: The collection page includes interactive image cards, hover highlights, and dropdown filters (style, colour, material) that help users navigate La Cornue’s product families. Buttons on this page link directly to the Build Your Own page, supporting the website’s goal of guiding users toward customization and conversion.
- Build Your Own Page: This page features hover interactions and dropdown menus for Model, Trim, Colour, and Cooktop. These elements demonstrate how users could personalise their appliance—reflecting the configurator idea proposed in my earlier redesign.
- About Us Page: This page includes storytelling elements and visuals that echo the brand’s heritage and craftsmanship. It also contains buttons linking to the Collections page, bringing users back to product exploration.
- Contact Us Page: This page includes an interactive form with hover states, input fields, and dropdown menus. These elements help create a realistic representation of how users contact the brand.
Important Design Decisions I've Made
Several key design decisions shaped the overall prototype. First, I adopted a luxury-focused colour palette based on my proposal: #4A1C1A (burgundy), #2E4231 (forest green), #C5BBA5 (beige), and #F4F1EA (cream). These colours reinforce elegance and warmth, aligning with La Cornue’s identity as a premium heritage brand.
I also chose Cormorant Garamond for headings and Inter for body text. This pairing supports readability while reflecting the balance between tradition and modernity. The typography helps maintain hierarchy, creating a clear separation between titles, descriptions, and navigation links.
Another important decision was prioritising simplicity and clarity. The original website suffered from clutter, unclear navigation paths, and heavy text blocks. In my prototype, I simplified the layout across all pages, used generous white space, and applied consistent grid spacing. This makes the interface feel cleaner, more organised, and easier to navigate.
For interactions, I intentionally used basic hover states and dropdown menus instead of complex animation. This choice keeps the prototype practical, realistic, and user-friendly—especially since dropdowns are familiar patterns for product customisation.
How My Prototype Relates to My Redesign Goals
My redesign goals were to:
Enhance visual appeal and brand alignment
Improve usability and navigation
Increase user engagement and conversion
The prototype reflects all three goals.
- Visual appeal & brand alignment: By applying the refined colour palette, consistent typography, and high-quality imagery, the prototype reflects La Cornue’s craftsmanship and luxurious character. The pages feel more elegant, balanced, and premium compared to the original site.
- Improved usability & navigation: The simplified header, consistent footer, logical hierarchy, and clear page structure directly support the goal of better usability. Users can now move between pages effortlessly, with clear labels and predictable patterns.
- Increased engagement & conversion: Buttons on the homepage and collection pages direct users towards product browsing and customisation. The Build Your Own configurator introduces a more interactive and personalised experience—something the original website lacked.
How My Design Improves the User Experience
My redesigned prototype improves the user experience by offering clearer navigation pathways, more intuitive content organization, and interactive touchpoints across all pages. The use of white space, structured sections, and consistent layouts reduces cognitive load and makes the website feel easier to browse.
Things like dropdown menus, clickable buttons, hover reactions, and form fields all contribute to a more dynamic user journey. These interactions help guide users through the site while maintaining a sense of control and clarity. Overall, the prototype creates a more modern, engaging, and luxurious experience that aligns with the expectations of La Cornue’s audience.
Comments
Post a Comment