Interactive Design : Project 2
5.11.25 - 27.11.25 | Week 7 - 10
Haley Alexandra Gray | 0369029 | Bachelors of Design in Creative Media
Interactive Design GCD60904
Project 2 | Redesign Prototype
Instructions
Project 1 | Website Redesign Proposal
Objective:
- 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.
- 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.
Project 2 | Redesign Prototype
For our second project, we have to create a prototype of our website redesign - connected to the proposal we made in the first project (a re-design of a "badly designed" website of our choice. The website I chose is Toronto Cupcake; https://www.torontocupcake.com/index.html)
Redesign Prototype Shareable Link:
Write-up for Prototype
In the remake of Toronto Cupcake as a prototype, I had followed my design rationale for the redesign of the website closely, featuring changes and enhancements mentioned. In the exercise we could choose which key pages to design excluding the home and contact page, in which I picked the about, cupcake, and cart page to effectively illustrate what Toronto Cupcake is about exactly, and will describe the key elements of the prototype.
Visual Design
This redesign focuses on simplicity, strong color palettes that align with their brand identity, and clear visual hierarchy to direct users and enhance usability; to encourage purchases and acknowledgement of the company. It includes 5 pages; the Home page, About page, Cupcake Menu page, a Cart page and Contact page, all of which follow a curated colour scheme and cohesive design elements that I have chosen and identified in Project 1. The website features pink-ish reds and off-whites to represent Toronto (Canada) in Toronto Cupcakes to align their brand image with their identity and patriotism, which also creates a fun and playful atmosphere, welcoming anyone from kids to adults; which also align with the stated target audience being young adults - families. Moreover, within the visual design, the elements work together to adopt a modern aesthetic that uses minimalistic designs such as a de-cluttered / straightforward layout with all the necessary buttons, information, and interactional elements displayed, as well as an emphasis on typography in regards to minimalism and the overall style of the website; featuring a unique and fun typeface for titles and headings (Lobster), and a modern sans-serif for the body (Epilogue), and enhanced images with no background to create a dynamic and interesting composition compared to full images with backgrounds.
On top of that, one of the most notable features of the redesign is the layout, where it makes all the pages featured retain streamlined content that scrolls vertically, able to guide the user through the content chronologically. The homepage, which communicates the brand message: cupcakes for every occasion, includes a hero section with high-quality imagery of cupcakes, a bold headline, and a concise description, paired with a clear call-to-action button. This helps emphasise the primary task to be carried out by the user. Beneath that section, the homepage continues to highlight key categories about the cupcakes such as Always Available, Seasonal, and Special Events. The layout of these elements guide users deeper into the homepage to get a good introduction on what the website is about.
Functionality / Interactivity
The website consists of a curated user experience, featuring animations to aid the experience and general impression of the website, as well as hovering effects on buttons, images, and interactive elements to create contrast, enhance accessibility, and create a dynamic and functional prototype of Toronto Cupcake's redesign. The redesign features a navigation bar that is consistent in placement and design throughout the website, where users are able to see it at once, and are able to intuitively find it again. It features a drop-down menu for the cupcakes section to help users easily navigate more specifically through the website. The About page features interactive elements that add to the conciseness of content and user experience, where information is displayed in an engaging format where it changes from an image of a community to a text box with more information about it.
Following that is the Cupcakes menu, where the categories of cupcakes are stated, allowing users to be introduced to the types of cupcakes Toronto Cupcake has to offer and to navigate through the selection easily. This page is connected to the actual menu where it simulates placing / adding items to order, using interactive "Add To Cart" buttons, as well as including menus for Special Events Cupcakes and Custom cupcakes, with overlays of information to be concise, yet engage the user to find out more about the specific section / category.
The View Cart page shows a simplified shopping cart table that includes product names, prices, quantities, and totals. This reinforces transparency and makes checkout easier. The minimalist layout helps remove friction from the purchasing experience. Lastly, the Contact page includes a bold header, a clear contact form, and a map section. Sections like We Would Love to Hear From You! and Where to Find Us further enhance the site’s customer support and accessibility by presenting multiple contact channels, including a physical map, phone number, email, and operating hours.
Design Decisions Made
Most of the design decisions that have been made relate back to the redesign proposal made during task 1, where the decisions are based on the aims of the redesign; Improve design elements to modernise its look and align the style with the brand’s image, change layout & display of information to improve overall visual experience, and aid usability to be consistent, simple, visible, and convenient, as well as layout and functions to be changed and improved, where navigation will be improved to be more intuitive and have a better flow of information.
However something new that I have considered was certain design elements such as utilising overlays to convey information, as well as cards that individualise sections and navigate to the specific pages while having animations / hover effects, as I found it enhances the UX greatly, by simultaneously making information concise, interactive and engaging, and adding dynamism to the layout by introducing new elements to the layout, even if it is just an overlay.
On top of that, one of the most notable features of the redesign is the layout, where it makes all the pages featured retain streamlined content that scrolls vertically, able to guide the user through the content chronologically. The homepage, which communicates the brand message: cupcakes for every occasion, includes a hero section with high-quality imagery of cupcakes, a bold headline, and a concise description, paired with a clear call-to-action button. This helps emphasise the primary task to be carried out by the user. Beneath that section, the homepage continues to highlight key categories about the cupcakes such as Always Available, Seasonal, and Special Events. The layout of these elements guide users deeper into the homepage to get a good introduction on what the website is about.
Functionality / Interactivity
The website consists of a curated user experience, featuring animations to aid the experience and general impression of the website, as well as hovering effects on buttons, images, and interactive elements to create contrast, enhance accessibility, and create a dynamic and functional prototype of Toronto Cupcake's redesign. The redesign features a navigation bar that is consistent in placement and design throughout the website, where users are able to see it at once, and are able to intuitively find it again. It features a drop-down menu for the cupcakes section to help users easily navigate more specifically through the website. The About page features interactive elements that add to the conciseness of content and user experience, where information is displayed in an engaging format where it changes from an image of a community to a text box with more information about it.
Following that is the Cupcakes menu, where the categories of cupcakes are stated, allowing users to be introduced to the types of cupcakes Toronto Cupcake has to offer and to navigate through the selection easily. This page is connected to the actual menu where it simulates placing / adding items to order, using interactive "Add To Cart" buttons, as well as including menus for Special Events Cupcakes and Custom cupcakes, with overlays of information to be concise, yet engage the user to find out more about the specific section / category.
The View Cart page shows a simplified shopping cart table that includes product names, prices, quantities, and totals. This reinforces transparency and makes checkout easier. The minimalist layout helps remove friction from the purchasing experience. Lastly, the Contact page includes a bold header, a clear contact form, and a map section. Sections like We Would Love to Hear From You! and Where to Find Us further enhance the site’s customer support and accessibility by presenting multiple contact channels, including a physical map, phone number, email, and operating hours.
Design Decisions Made
Most of the design decisions that have been made relate back to the redesign proposal made during task 1, where the decisions are based on the aims of the redesign; Improve design elements to modernise its look and align the style with the brand’s image, change layout & display of information to improve overall visual experience, and aid usability to be consistent, simple, visible, and convenient, as well as layout and functions to be changed and improved, where navigation will be improved to be more intuitive and have a better flow of information.
However something new that I have considered was certain design elements such as utilising overlays to convey information, as well as cards that individualise sections and navigate to the specific pages while having animations / hover effects, as I found it enhances the UX greatly, by simultaneously making information concise, interactive and engaging, and adding dynamism to the layout by introducing new elements to the layout, even if it is just an overlay.
Reflection
Experience
During this second project, I had a hard time working with Figma as it was my first time using it, however as the project progressed it got easier to use and understand, allowing me to complete my work and execute nearly the same vision I had in mind for the redesign for this prototype. Making a prototype also showed me the extensiveness of web-design, and the all the though that goes into the preliminary stages of creating a website design, not even the actual website using coding yet. Despite my rough start, I think this project was a good practice and introduction in the first steps to creating a website, where this got me familiar with wireframes, and creating a draft version of my website, and that planning and exploration is crucial, so that your final phase of creating the website will be flawless.
Observation
I have observed that keeping consistent colors, fonts, button styles, and spacing across all pages made the prototype feel much more professional and streamlined. Elements that weren’t consistent stood out immediately, making the design feel less cohesive. This reinforced how design systems improve overall usability. I have also observed that while developing the prototype, the ideas that seemed clear in the redesign proposal became more complicated once I had to turn them into an actual interface. Some design elements that looked good in theory were only static, and I did not think about interactivity, and how that would change their design features, making the design process long and tedious. However, this helped me understand how UX decisions must balance creativity with practicality.
Findings
Through this project I have found that I believe coding would be - not to say easier - but more organised and structured for me to understand and work better with it in comparison to Figma, where I would be able to know and identify what I have created and set as a design choice / interactive element, etc. I have also found that designing a proposal is not only time consuming but a very important step in creating a full-blown website, as it acts as a guide on how to carry out the whole design of the real website, and allows you to explore desing / interactive options so you know what to do / what not to do.
Experience
During this second project, I had a hard time working with Figma as it was my first time using it, however as the project progressed it got easier to use and understand, allowing me to complete my work and execute nearly the same vision I had in mind for the redesign for this prototype. Making a prototype also showed me the extensiveness of web-design, and the all the though that goes into the preliminary stages of creating a website design, not even the actual website using coding yet. Despite my rough start, I think this project was a good practice and introduction in the first steps to creating a website, where this got me familiar with wireframes, and creating a draft version of my website, and that planning and exploration is crucial, so that your final phase of creating the website will be flawless.
Observation
I have observed that keeping consistent colors, fonts, button styles, and spacing across all pages made the prototype feel much more professional and streamlined. Elements that weren’t consistent stood out immediately, making the design feel less cohesive. This reinforced how design systems improve overall usability. I have also observed that while developing the prototype, the ideas that seemed clear in the redesign proposal became more complicated once I had to turn them into an actual interface. Some design elements that looked good in theory were only static, and I did not think about interactivity, and how that would change their design features, making the design process long and tedious. However, this helped me understand how UX decisions must balance creativity with practicality.
Findings
Through this project I have found that I believe coding would be - not to say easier - but more organised and structured for me to understand and work better with it in comparison to Figma, where I would be able to know and identify what I have created and set as a design choice / interactive element, etc. I have also found that designing a proposal is not only time consuming but a very important step in creating a full-blown website, as it acts as a guide on how to carry out the whole design of the real website, and allows you to explore desing / interactive options so you know what to do / what not to do.
- Thank You -
Comments
Post a Comment