INTERACTIVE DESIGN PROJECT 2

on

INTERACTIVE DESIGN

|| Leong Hui Xuan 0365793
|| 11/04/2025- 25/04/2025 (Week 06 - Week 08)
|| Bachelor of Design in Creative Media 
|| Project 2
Table of Content
LECTURES
Lecture 07- Box-Model CSS

Display Property:
  • Used for controlling layout.
  • Every HTML element has a default display value, typically either block or inline, depending on the type of element it is.
Block - level element:
  • A <div> is a block-level element used to group content.
Inline element:
  • A <span> is an inline element used to style text without breaking the flow.


INSTRUCTION


PROCESS WORK

This project is to  to transform our website redesign proposal into a functional and interactive prototype, visually and practically demonstrating the proposed improvements in design and user experience.
Figure 1.0, Create component, button and design layout.

The first, I create a frame in width 1280px, and create the button and text with hover for me to use in my website later. Then I start design the layout.


Figure 1.1, Homepage



Homepage Key Feature: 

1. Homepage Hero Section

- A large Ferris wheel image is used to indicate that the site is about entertainment, and a clear call-to-action button, “Book Tickets,” makes the booking process immediate.


2. Navigation bar:

- Located at the top, it contains important links like About, Menu, Tickets, Events, Login, and a responsive hamburger menu for mobile devices.


3. Feature Highlight "What we have ?" section:

- Interactive cards present three core functions, which are activities, menus and games. Each function is equipped with visual prompts and brief descriptions to guide users.

4. About Us Section:

- Brief brand story about the brand history and achievement to build trust and familiarity with visitors.

5. Operating Hours Section:

- Clearly stated daily open time and holiday closures, with color emphasis for better visibility.


6. Operating Hours Section:

- Clearly stated daily open time and holiday closures, with color emphasis for better visibility.


Figure 1.2, Ticket page



Ticket Page Key feature: 

Booking Date & Pass Selection

  • Users can easily select the date they wish to visit using a clear calendar input.
  • Two pass types are available: Weekday Pass and Late Afternoon Pass.
  • A large, visible “Confirm” button prompts the user to proceed.

Activity Selection Section

  • Titled “What do you want to Book?”, this section presents three main booking options using large, attractive image buttons:

    • Events

    • Escape Room

    • Play

This visual selection method caters to both adults and children, making it easy to choose.

Play Pass Options Section

  • Three colored buttons offer 5-play, 10-play, and 20-play options, with clear distinctions in both layout and styling.

  • These options encourage flexible purchase choices based on different visitor needs.

Membership  Section

  • A highlighted “Buy a Membership” banner explains the benefits, including:

    • Free entry for 4 people during certain months

    • Free Play Pass

    • All for £30/year

  • An “Add to Cart” button allows users to purchase directly, improving conversion efficiency.

Cart & Payment

  • The cart section displays showing “Your Cart is Nothing”.

  • Users can adjust quantities (+/-), go back, add more items, or proceed to “Pay” with clearly labeled buttons.


Contact Section

  • As with the homepage, a footer contains:

    • Contact number

    • “Contact Now” button

    • Social media icons for additional support or updates



Figure 1.3, Contact and Map page

Contact Page Key feature: 

Contact Information Section

  • Clearly labeled “Get In Touch With Us” section at the top.

  • Includes full physical address, contact number and social media links with hover effect.

Message Form

  • A simple, user-friendly form allows visitors to leave a message directly on the site.

  • Two input fields: one for name and one for message, with a clear “Done” button to submit.

Map


  • A large, colorful map of The Ice Cream Farm is embedded to help visitors visually locate different areas easily and get to know the farm more.

  • Includes a key for understanding icons and zones, improving orientation before visiting.


Design Decisions of the prototype:

  • Color Scheme: I used soft pastels to reflect the fun and child-friendly atmosphere of the ice-cream farm.

  • Typography: Round, friendly headers paired with readable body text ensure accessibility and easy read.

  • Visual Hierarchy: Structured content blocks guide users from discovery Hero, Highlights to About Us and then the call to action in Contact.

  • Interactivity: Buttons, hover effects, message box, and card interactions simulate a real user experience and improve usability.


FINAL OUTCOME

Figure 1.4, Final Outcome

Figma Link: 
REFLECTION

One of the most important findings during this project was the importance of clarity and simplicity in navigation. The original website contained a lot of information but lacked visual hierarchy, which may overwhelm users. So, while creating the prototype I make in a clear visual and used the same color palatte to show viewer that this is a same categories. 

While building the prototype, I add some interactive buttons with hover states, clear calls-to-action and playful images made the site feel more engaging without being overwhelming due to too much information. Additionally, incorporating a map in the contact page not only added visual appeal but also served a functional role in guiding users through the farm.

Overall, the project has strengthened my skills in making a basic website. I learned how to build with both website design and user needs in balancing with functionality. I also face challenge of priotizing content. There were so many things I wanted to include, but I had to constantly decide what was most important for redesign. This project was interesting and I know this will help me a lot in my future project and not only in UI/ UX field.













Comments

Post a Comment