Interactive Design - Project 2

28/5/2025 – 10/6/2025 (Week6  – Week 8)

Interactive Design/ Bachelor of Design (Honours) in Creative Media / Taylors University

Project 2

---

TABLE OF CONTENTS

1.INSTRUCTIONS

2.LECTURES

3. PROJECT2

4. FEEDBACK

5.REFLECTION

---

 

---

LECTURES

---

PROJECT 2

For Project 2, we were tasked with identifying issues in an existing website and redesigning it with a better user interface and user experience. I chose Blinkee.com, an online store that sells glow-in-the-dark toys and party accessories. It’s fun and colorful but its website didn’t reflect that in a usable, modern way.

So, I set out to give it a much-needed makeover: one that balances playful energy with better clarity, structure, and flow.

What Wasn’t Working

• Visual clutter: Too many competing fonts and colors made it feel chaotic.

• Poor layout: Lack of clear hierarchy and spacing made it hard to focus.

• No filters: You couldn't sort products by price or rating, which slowed things down.

• Buried reviews: They existed, but were hard to find—hurting customer trust.

• Not mobile-friendly: On phones, the layout just broke apart.

My Redesign Goals

I set out with three clear goals:

1. Make it visually clean and modern

2. Improve usability and mobile responsiveness

3. Keep the fun, glowy party vibe, but with polish

Target Audience

The site mainly targets people throwing parties, planning events, or looking for fun light-up gifts. They might be young adults, parents, or even event organizers. These users want to browse quickly, find cool stuff fast, and trust what they’re buying. So, the redesign needed to feel exciting but easy to navigate.

Design Process & Style Choices

I started by sketching wireframes and then moved into high-fidelity mockups.

• Color Palette: Neon purple #490080, liner gradient (hot pink #FF4DAD and purple  #4B0082 ) , light purple#F1EDFF ,  yellow#F2A73D balanced with white space

• Typography: Montserrat for headings (bold and modern), Open Sans for body (clean and readable)

• Moodboard: Inspired by rave parties, neon signs, and night festivals

• UI Elements: Rounded buttons, soft drop shadows, consistent spacing, and mobile-responsive grids

---

Home Page

The first thing I tackled was the homepage. The original one was messy and overwhelming, so I simplified the layout and added a clear promotional banner at the top: “Glow Party Gear – 20% OFF”.

I introduced clean sections for Featured Categories and Best Selling items to guide users gently into shopping. The newsletter subscription area got a friendlier tone and a more visual design.

Everything now feels more welcoming and easier to scan—without losing that party vibe.

Category Page 

The top of the product page features a bold and immersive hero section that immediately grabs attention. The text “SHOP PARTY Ready LED Products” is set in a glowing neon typeface, illuminated by colored spotlights in the background. This visual choice helps establish the brand’s playful, energetic tone right away.

I wanted users to instantly understand what the site is about before even scrolling: LED party gear. To support this, the animated spotlight backdrop adds excitement and movement, without becoming overwhelming.

The header stays clean and consistent across the site, with a white search bar and iconography for cart, login, and navigation—maintaining clarity while keeping it visually engaging.

The category page is where users often get stuck if things aren’t clear. I added a simple filter sidebar—with options like “Newest” and “Price: Low to High”—so users can sort products however they like.

The product grid on the right shows clean, consistent product cards with ratings and pricing.

This page is now more organized and makes browsing a lot more intuitive—especially on mobile.

Product Menu – Dropdown Navigation

When users hover over or click the "Products" tab in the main navigation, this clean, structured dropdown appears—offering an intuitive way to explore the full product catalog.

To solve the category confusion issue in the original Blinkee.com, I separated the menu into six distinct groups:

• Best Selling / New In / Samples / Bundle Sets for commercial logic.

• Colour for visual browsing—because many shoppers come with a favorite glow color in mind.

• Light Up for product functionality (LED Jewellery, Flashing Toys, Fiber Optics).

• Themes such as Birthday, Club, or Concert use-case scenarios.

• Holidays for seasonal targeting like Halloween and Christmas.

• Custom Orders / Clearance Deals support B2B needs and bargain hunters.

I intentionally used clear spacing, bold headers, and minimal styling to make it scannable at a glance. The goal was to guide the user’s eye naturally from left to right, while giving them multiple entry points based on their shopping mindset—be it practical, festive, or spontaneous.

This mega menu elevates the overall user experience, turning what used to be clutter into a smooth and delightful browsing journey.

Product Page 

This is where users decide whether to buy or not. I made the product photo large and central, with clear product info on the right.

Below that, I placed the description, followed by a Customer Review section that actually looks readable now. Reviews have profile names, star ratings, and written feedback—so users can trust what they're buying.

At the bottom, I added a Related Products section to subtly encourage upsells without being pushy.

 About Page

The original About page was plain and forgettable. I wanted it to feel more like a brand story.

So I added a full-width hero section with the tagline:

“We light up your moments – with the brightest glow, wherever you go.”

Then I split the page into sections:

• How it Started – Blinkee’s origin story

• Who We Are – Their mission and design values

• What We Do – Product focus

• Customer Love – Social proof and user loyalty

Contact Page 

The old Contact page felt neglected. I designed a cleaner layout with:

• A Google Map embed

• Clear address, business hours, phone, and email info

• A Contact Form with soft styling and clear input fields
  Everything is mobile-responsive, so users can reach out anytime, anywhere.

 Sign In Pop-Up 

The sign-in modal was updated with a modern, minimalist look.

I included:

• Email and password fields

• A “Keep me signed in” checkbox

• Social login buttons (Google, Facebook, LinkedIn, Twitter)

No unnecessary distractions—just a quick way to log in or create an account.

Cart Slide Panel

Instead of making users open a new page just to check their cart, I made a slide-in panel.
It shows:

• Product thumbnail

• Quantity and subtotal

• A “View Basket” CTA

• A friendly reminder like: “Spend $10.00 more to get FREE DELIVERY!”

---

4. FEEDBACK

Looking back on my project summary and reflection, I realize I've painted a fairly comprehensive picture of my learning journey. I'm glad I was able to clearly convey the pivotal shift in my perception of design, moving from focusing solely on aesthetics to truly grasping its functional importance. Emphasizing the role of small details, like element spacing and button shadows, was a key point for me, as it really reflects how much I've grown in understanding the subtleties of design. Adding personal feelings, such as the sense of accomplishment when the final prototype was completed, made the reflection more genuine, and I hope it can resonate with others.

Pinpointing the establishment of a user - centric mindset as my most valuable takeaway was a significant realization. It shows that I've started to understand the core of design work. My thoughts about applying this mindset in future projects and my acknowledgment of areas where I need to improve, such as attention to detail and project management, reveal my self - awareness and my strong desire to keep growing.

---

5.REFLECTION

Engaging in this project has revolutionized my understanding of the integration between User Experience (UX) and visual design. I've come to realize that design isn't merely about creating aesthetically pleasing interfaces; instead, its core objective lies in enhancing functionality. During the project, I witnessed firsthand how minute details, such as element spacing and button shadows, can significantly elevate the user experience, which solidified my belief in the adage "details make all the difference" in design. The completion of the final prototype was an incredibly rewarding moment, further fueling my passion for design work.

The most valuable takeaway from this experience is the establishment of a user-centric design mindset. This perspective will serve as the cornerstone for all my future projects, constantly prompting me to consider user needs and usage scenarios. My aim is to develop design solutions that seamlessly blend aesthetics with practicality. At the same time, I'm acutely aware that there’s room for improvement in my attention to detail and overall project management. Moving forward, I'm committed to continuous learning and honing my design skills, striving to deliver even more exceptional user experiences.

---