Interactive Design : Final Project
11.1.26 | Week 9 - 14
Haley Alexandra Gray | 0369029 | Bachelors of Design in Creative Media
Interactive Design GCD60904
Project 3 | Final Project
Instructions
Project 3 | Final Project
Assignment Description
- Assignment Description: Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.
Objective:
Website Development:
- Objective: The objective of this assignment is to bring your website redesign to life by developing a fully functional website (MINIMUM OF FIVE (5) PAGES based on the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.
- Implementation:
- Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, or any other relevant technologies or framework (e.g., Bootstrap).
- Design Consistency:
- Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.
- Responsive Design:
- The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.
- Cross-Browser Compatibility:
- Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).
Core Features:
- Navigation:
- Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.
- Interactive Elements:
- Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.
Technical Considerations:
- Performance Optimization:
- Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.
Final Testing and Deployment:
- Testing:
- Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.
- Deployment:
- Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.
Submission:
- A live URL to the fully functional website.
- A brief report (800–1,000 words) documenting the development process, any challenges faced, and how they were overcome in your E-Portfolio.
- Upload the final project main folder into Google Drive and include the link in your e-portfolio (set the access to public).
Project 3 | Final Project
For our last project, we had to make our proposed website prototype come to life, by coding it and making it into a fully functioning website using HTML, CSS, and JS.
Final Website Link
Google Drive Link
Starting the Code -
To begin, I started by mapping out the pages to be included in my website; such as a Home page, About page, 3 Cupcake menu pages, a Contact page, Cart page, and Checkout page - in total 8 pages, 5 of which were included in the redesign prototype. I began by coding the nav bar and footer so that each page was consistent with them and had the same design / functions, as well as setting the general design elements I will be using throughout the website such as background colour, fonts, complimentary colours, etc - all inspired / taken from my redesign proposal in the previous project.
 |
| Fonts used / CSS page / Starting code |
 |
| Body code |
The navigation was designed using a combination of Bootstrap’s responsive framework, CSS styling, and JS to ensure consistent functionality and usability across different devices. The bootstrap provided the structural foundation and responsive elements, allowing the navigation to display horizontally on desktop screens and collapse into a hamburger menu on smaller devices. JavaScript was then incorporated specifically to manage interactions, particularly for dropdown menus on mobile and tablet devices.
Pages -
Index Page
After setting the elements that would be used the same throughout the website (nav/footer) I began working on the first page, the home page which had 3 sections; the hero section, the specialty section, and celebration section. I directly used the redesign idea from the previous project and brought it into this code. I started by making the hero section and splitting it into two columns for my different sets of data to be displayed, and for my specialty section I added cards using bootsrap and css to make it interactive and engaging, and thirdly for my celebrate section I added an image in the background with a red overlay, and added a phone image that had to be layered behind the footer, and emphasised buttons.
About Page
The About page was laid out with separated content sections, such as the main section, founder section, and communities section. CSS was used to design the look and do the animations for the cards in the community section. Flexbox and grid-based positioning were used to align content cleanly.
Contact Page
After the About page, I started on the Contact page as that would be the last "simple" code to write, to put it simply. I say that as as I was planning, I thought about how I would code the cupcake menus and from then on the cupcake menus would be connected to the cart and checkout pages, so I decided to do those after the other pages were done.
The contact page includes an introductory section, an inquiry section, and a where to find us section. The introductory section was coded using a two-column layout like the home page, reinforcing the consistent style. The inquiry section was implemented using an HTML form styled with custom CSS to maintain visual consistency with the rest of the website, including labelled input fields for user details and message content. JavaScript was used to handle basic client-side form behaviour, such as validating required fields and displaying feedback to the user upon successful submission, without performing actual data submission as the project focuses on redesign rather than backend functionality. Lastly, the “Where to Find Us” section was developed to provide location and contact information, with a Google Maps embed integrated using an iframe to visually display the store’s location. This section combines map visuals with written address and contact details, allowing users to quickly identify the business location while maintaining a clean and structured layout.
Cupcake #1 Page
This first cupcake page was the general menu that lead users to the available cupcakes. It was divided into two sections, the hero section, and the section where users were able to choose which menu they'd like to go first - 'Always Available', 'Seasonal', and 'Custom'. Below the hero, the selection section was implemented using a structured layout that presented each menu option as a clear, clickable element, making navigation intuitive and visually engaging. Each option was linked to its respective page using anchor elements, allowing users to seamlessly transition between different cupcake categories.
Cupcake #2 Page
This is where the hard part came. The second cupcake page was developed to function as an interactive product listing / menu where users could order as if the website was fully-functioning. I structured the layout as a product grid (.always-grid) where each cupcake is built as a reusable card component containing an image, name, price, and an Add to Cart action. Instead of defining product data separately in JS, each cupcake card stores its own information using HTML data attributes, allowing every item to behave like a real product with values that can be accessed dynamically, including selecting quantities and adding items to the cart. When a cupcake is selected, a custom overlay is displayed and displays more product information without navigating away from the page. On top of that, having each product store its information allowed me to create a filter option, allowing users to filter ingredients.
This overlay includes details such as ingredients, pricing, and quantity controls, enabling users to adjust the number of cupcakes before adding them to the cart. The Add to Cart functionality collects the cupcake’s data, creates an item object, and stores it in the browser’s localStorage, ensuring cart contents is consistent across pages. The overlay itself was implemented using a fixed-position container combined with CSS transitions and JS class toggling to manage its visibility, ensuring a smooth and focused user experience. By combining structured HTML, CSS styling, and JS logic, this page simulates a functional ordering system.
Cupcake #3 Page
The third cupcake page was an expansion of information / ordering opportunities for the Seasonal cupcakes. I felt I should create a new page entirely for the seasonal cupcakes as I had used overlays to express information for both Alwasy Available cupcakes and Custom cupcakes, and thought Seasonal cupcakes had abit more information to be made known to the user, such as the option to choose a dozen or a half-dozen of cupcakes as the original website did not accept single orders of seasonal cupcakes.
Wireframe :
Each seasonal category was coded as its own structured block containing descriptive content, imagery, and order controls. A multiple-choice selection system was implemented using a
<select> dropdown to allow users to choose between half-dozen and dozen options, with each option storing its price value using data-price attributes. JS event listeners monitor changes to both the selected box type and quantity input, dynamically calculating the total cost by multiplying the selected price by the chosen quantity and updating the displayed total in real time. When users add an assortment to the cart, the script generates a unique item entry that includes the selected option type, price, quantity, and image reference, ensuring each variation is stored accurately. Cart Page
Finally, after the cupcake pages have been finalised, I was able to move on to the cart page, where I could also use the data stored on my cupcakes and bring it into the cart page so that whatever cupcake the user chose to add to cart would appear in the cart with all the relevant information. JS was used to dynamically generate each cart row by looping through the stored cart items and injecting structured HTML into the page, ensuring the cart updates automatically based on the user’s selections. The subtotal is calculated in real time by multiplying each item’s price by its quantity and summing the values across all items. Additional functionality was implemented to allow users to remove individual items or clear the entire cart, with changes immediately reflected both visually and in localStorage. By combining dynamic rendering, client-side storage, and interactive controls, the cart page functions as a central point that consolidates all user selections before proceeding to checkout.
Checkout Page
Connected to the cart page, the checkout page was created to bring together the cart information and buyer details into one final step before completing an order. Initially, I wouldn't have added this page as I thought it was a bit much, however I felt that when pressing the checkout button in the cart page lead to nowhere, I considered adding another page just to make the website seem seamless and fully-functional, even though just conceptual. It was okay to do as I could use the logic from the form code in the contact page to carry out this page.
Wireframe :
Cart data is pulled from localStrorage and displayed as an order summary with product images, selected options, quantities, and a calculated subtotal so users can review everything clearly. On the other side, a form was used to collect buyer details such as email, delivery or pickup preference, and address information. JJS was used to handle form behaviour, update the layout based on user selections, and show a confirmation message once the checkout button is clicked. As this project focuses on redesign rather than real transactions, the checkout process ends with a success notification to simulate an order being placed.
_________________________________________
Challenges Faced -
In my opinion, throughout the development of the website one of the main challenges was implementing mobile responsiveness without disrupting the desktop layout. I have never made a full-blown website with HTML, CSS, and JS before, as well as considering mobile aspects and responsiveness. Adjusting layouts for different screen sizes often caused unexpected issues, such as elements becoming misaligned, overlapping, or shrinking incorrectly.
This was especially challenging when working with CSS Grid and media queries, as changes made for mobile or tablet views sometimes affected the desktop version. Resolving this required careful structuring of code for the media section, testing, and learning how to override styles cleanly without breaking existing desktop layouts through videos, websites, and google searches. It did not occur to me when I was coding the desktop version of my code that it would be difficult to make it responsive without tampering with the original code, so that made the whole process very tedious.
Another major challenge involved the navigation bar, particularly ensuring it functioned correctly across devices. On mobile, dropdown behaviour conflicted with touch interactions and Bootstrap’s default behaviour, causing the cupcake menu to stop working. This required troubleshooting the interaction between JS and Bootstrap, understanding event handling, and deciding when certain features should behave differently on mobile compared to desktop. Debugging syntax errors, missing brackets, and media query conflicts also became a recurring challenge as the CSS file grew larger.
Handling data flow between pages was another difficulty, particularly when storing cupcake information and retrieving it for overlays, the cart, and checkout pages. Managing localStorage, ensuring consistent data structures, and correctly updating quantities and totals required careful JS code and testing. Small mistakes, such as mismatched IDs or missing attributes, often caused features to break, making amendments more time-consuming. Overall, these challenges helped deepen my understanding of responsive design, JavaScript-driven interactions, and the importance of clean, well-structured code when building a multi-page interactive website.
Overcoming & Final Thoughts -
Although I ran into a lot of issues during the development process, working through them helped me better understand responsive design and how different parts of the website interact with each other. Through trial and error, testing across devices, and refining my code step by step, I was able to fix layout issues, improve navigation behaviour, and ensure that interactive features like the cart, overlays, and forms worked smoothly.
Overall, this project helped me gain more confidence in coding and problem-solving, especially when working with CSS Grid, media queries, and JS. By the end of the project, I was able to successfully turn my redesign concept into a functional and responsive website, and the experience gave me a much clearer understanding of how a multi-page website comes together.
- Thank You -
Comments
Post a Comment