INTERACTIVE DESIGN PROJECT 2: WEBSITE REDESIGN PROTOTYPE
Felice Lee (0381272)
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Project 2: Website Redesign Prototype
PROJECT 2
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
Prototype brief outlining:
This prototype is the final outcome of the Toronto Cupcake website redesign. The main goal of this project was to update the website into a more modern, clean, and user-friendly design while still keeping the playful and sweet identity of the brand. The prototype was developed based on the redesign proposal, focusing on improving usability, visual consistency, and overall user experience.
One of the key features of this prototype is the clear user flow. The website follows a simple and logical journey, starting from the Home page, moving to the Cupcakes (Menu) page, then to the Product Information page, Cart, Checkout, and finally the Thank You page. This flow was intentionally designed to feel natural and easy to understand, especially for first-time users. Instead of overwhelming users with too many options at once, each page focuses on one main purpose to guide users step by step through the ordering process.
During the development process, several design decisions were made to keep the prototype clean and functional. The layout uses a simple structure with clear spacing and visual hierarchy so users can easily scan the content. Navigation is kept consistent across all pages through a top navigation bar, allowing users to move between pages without confusion. Not every element on the page is interactive, as the focus was placed on key actions such as viewing products, adding items to the cart, and proceeding to checkout. This decision helps reduce visual clutter and keeps the experience focused.
For the visual design, the prototype uses Toronto Cupcake’s signature pink color palette combined with white and soft neutral tones. The pink is used mainly as accents and buttons to highlight important actions, while white space is used to maintain a clean and modern look. This approach helps balance the playful cupcake theme with a more professional appearance. The typography chosen is a rounded sans-serif style, which feels friendly, approachable, and easy to read, supporting the overall brand personality.
In terms of user experience, this prototype addresses many of the issues found in the original website. The original design felt outdated and cluttered, while the redesigned version focuses on clarity and simplicity. The cupcake listing page uses a grid layout, making it easier for users to browse products quickly. The product detail page presents information in a clear and straightforward way, helping users understand what they are purchasing before moving forward. Although the prototype does not include real payment or backend functionality, the clickable buttons and page transitions successfully simulate a realistic e-commerce experience.
The prototype also meets the objectives set in the redesign proposal, particularly in improving usability, updating the visual style, and aligning the website more closely with modern bakery websites such as BreadTalk. The design feels more polished and consistent, while still maintaining the fun and sweet identity of Toronto Cupcake. Basic responsive considerations were also applied, ensuring the layout remains readable across different screen sizes.
Overall, this prototype successfully brings the redesign concept into a functional website. It demonstrates how thoughtful design decisions and a clear user flow can improve the overall experience without unnecessary complexity. The final result is a clean, modern, and user-friendly prototype that fulfills the goals of the project and provides a strong foundation for future development.
Comments
Post a Comment