Interactive Design | Project 2

September 20, 2025

week 1 - week 14

Hisham Rasheed / 0356691

Interactive Design / Bachelor of Design in Creative Media

Toronto Cupcake Website Redesign

For this project, I redesigned the Toronto Cupcake website with the goal of improving its usability, visual appeal, and overall user experience. The original site had a lot of potential, but it felt outdated and lacked a clear visual hierarchy. My approach was to create a cleaner, more modern interface that could better represent the brand while also making it easier for users to browse cupcakes, learn about the business, and place orders. The redesigned prototype, created in Figma.


Key Features of the Prototype

One of the main features of my prototype is the clean and organized layout. I wanted users to immediately understand what the site offers without having to dig through cluttered sections. Large hero images and a welcoming header introduce the brand, while clearly separated sections guide the user through menu options, ordering information, and store details.

I also designed the prototype to be responsive, meaning the layout adapts for desktop, tablet, and mobile screens. Since many users browse or order food on their phones, it was important that the experience remained smooth on smaller devices. The mobile version keeps the same essential structure, but elements are stacked vertically and made more compact for comfort.

Another key feature is the improved navigation system. Instead of an overloaded menu, the navigation bar now highlights only the core pages Menu, Order, About, and Contact. This reduces cognitive load and makes it easier for users to move through the site.

Visually, the design emphasizes brand identity through consistent colours, rounded elements, soft shadows, and appetizing cupcake photos. Each cupcake or product card has space to highlight names, flavours, and prices without overwhelming the screen. Overall, the interface feels warm, clean, and approachable qualities that align with a boutique cupcake shop.


Design Decisions Made During Development

Throughout the design process, I made several decisions to keep the redesign simple, user-focused, and visually coherent.

First, I adopted a minimalist design approach. Rather than adding unnecessary decorations, I used whitespace and clear typography to create a smoother browsing experience. This helps users focus on the cupcakes and the brand story, instead of being distracted by visual noise.

I also chose a mobile-first perspective, starting the layout for smaller screens and then expanding it to desktop. This helps avoid situations where the mobile version feels like an afterthought. With mobile users making up a large share of online shoppers, this approach ensures the design remains functional and attractive across all devices.

Another important decision was to create a consistent visual language. The colour palette, typography, spacing, and component shapes are reused throughout every page. This consistency strengthens the brand identity and helps users feel more comfortable exploring the site.

During prototyping, I made the interactive elements like buttons, hover states, and page transitions behave more realistically. This adds clarity during user testing (or future development) because viewers can actually experience how the site should work rather than just looking at static screens.


Comments

Post a Comment

Popular posts from this blog

Intractive Design Exercise

Image
October 1, 2025 week 1 - week 14 Hisham Rasheed / 0356691 Interactive Design / Bachelor of Design in Creative Media Introduction Exercises ・Exercise 1: Web Analysis - Process 1. Simply Chocolate  Fig 1.1 The purpose and goals of the website This is a chocolate company website called simply chocolate. It is an online store with very fine and rich cocoa chocolates with all the nutrient aspects and details. The visual design and layout I really admire the popping pastel colors which are appetizing. Fig 1.2 Fig 1.3 The home page brings us to a really engaging design where, as you scroll down, you can browse through each distinct chocolate taste while seeing an animation of that flavor in the backdrop.  Fig 1.4 The components of the home page are arranged in a really intriguing way; they are all arranged vertically, including the logo. Fig 1.5 Fig 1.6 A call to action button that reads "Shop" is present on every page as well as at the bottom as you scroll down, a...
Read more

Design Exploration

Image
(Week 1 - Week 14) Hisham Rasheed / 0356691 / Design in Creative Media Design Exploration  Instruction Project Proposal At first, my idea was to make a 3d ad for a table from Ikea, after consultation with the sir  He asked me to change to something with features to display, so I went with Ugreen Headphones. I have been using this model for a while, and I feel it is very underrated for the price and features. I started modeling the headphones and the blender. It was tricky since I was overcoming a lot of new issues. After modeling, I proceeded with detailing and texturing the materials. Rendering sessions were blasting my laptop's fans. I divided my sequence into parts, scenes, and rendered them individually and stitched them in Premiere Pro. At the same time, a few effects and text motions were done on After Effects and made the whole timeline on Premiere. I was inspired by the movie the substance for text placements and layout, and decided to ...
Read more

Minor Project

Image
  04/22/2024 - //2023 / Week 1 - Week 14 Hisham Rasheed / 0356691 Advanced Animation / Bachelor of Design in Creative Media  Empathy walk (Group 8) Instructions Planning Mr. Mike gave a brief overview of the module. He provided videos on brainstorming and creative thinking to complement his explanation of the design thinking tenets. Twelve possible clients were shown to us, and after giving it some thought, I decided on Taylor's University for our project. The idea was to create an empathy map for an augmented reality app that would help parents and new students get around campus.After the project was chosen, our first assignment was to choose our respective groups, and I ended up in group 8. We explored various concepts for the AR app and mapped out our ideas using Miro, an online collaborative whiteboard tool. This was an essential step in comprehending the app's possible features and functionali...
Read more