Interactive Design / Bachelors of Design (Honors) in Creative Media
/ Taylor's University
Samantha Kristalyn / 0373905
Project 2 - Website Re-design Prototype
JUMPLINKS
LECTURE NOTES
Lecture 7: Box Model-Layout in CSS
Display Property
The display property is
one of the most important CSS properties for controlling the layout
of a web page. It determines how an element is displayed on the
screen and how it interacts with other elements.
Every HTML element has a default
display value depending
on its type. In general, elements are either
block-level or
inline by default.
Block-Level Elements
A
block-level element
always starts on a new line and stretches out as far as it can
horizontally (by default, it takes up the full width of its
container). Common examples of block-level elements include:
-
<div>
-
<p>
-
<h1> to
<h6>
-
<section>
For example, a
<div> is a
standard block-level element often used as a container to group
other elements together.
Inline Elements
An
inline element
does not start on a new line. Instead, it only takes up as much
width as necessary and flows alongside other inline elements.
Examples include:
For example, a
<span> is
commonly used to style a part of text inside a paragraph without
breaking the flow of the surrounding text.
Lecture 8: In-Class Exercise (Card Components)
In today’s class, we focused on creating
card components using Adobe
Dreamweaver. We learned how to structure cards using HTML elements like
<div>, and then style
them with CSS to display content such as images, titles, and descriptions in
a neat, visually appealing layout. These cards are essential in modern web
design, especially for showcasing services, products, or team members! We
also learned further about margin and padding to neaten up the
layout.
As part of my personal practice, I also created a simple Contact Form for fun :) I used input fields and buttons! This helped reinforce my
understanding of how forms collect user data and how to align design with
functionality. The session enhanced my confidence in using Dreamweaver’s
live preview tools while developing visually structured components from
scratch.
Lecture 8: In-Class Exercise (Dropdown Menu)
In today’s session, we learned how to create a
dropdown menu within
a navigation bar, which is a common feature used to organize links and
improve user experience on websites. Using HTML and CSS, we structured
the menu with nested lists and styled it so that the dropdown appears
when users hover over or click on a specific navigation item. The focus
was on understanding how
positioning,
display, and
hover
interactions work together to create a smooth, functional dropdown
effect.
When I hover over the dropdown menu options (such as "Catering," "Buffet,"
or "Ala Carte"), the background color of each option turns grey. This effect
is created using a CSS
:hover pseudo-class and is a
positive UX (user experience) feature. It gives clear
visual feedback to the
user, letting them know which item they're currently pointing to or about to
click.
INSTRUCTIONS
TASK
Project 2 | Website Re-design Prototype
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.
Submission:
A fully functional prototype ACCESSIBLE via a SHAREABLE
link or as a DOWNLOADABLE file.
A brief writeup 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.
Initial Sketches & Mapping
While working on the prototypes, I started by creating clean, minimal
sketches to outline the core structure and user flow. These wireframes serve
as a foundation that aligns perfectly with my design goals in my Canva design.
My main focus was to keep the layout simple and intuitive so visitors can easily understand the brand story and find what
they need without distractions. You can see clear sections for the hero
banner, company overview, team introduction, and a dedicated contact
form — all designed to build trust and encourage direct
communication.
I also emphasized strong visual areas (like large image and video
placeholders) to help convey the brand’s personality and values in a bold
but approachable way. Overall, these sketches are an essential first step in
translating my clean, modern design vision into a fully functional
website.
During this stage, I also made changes on my visual direction for a
better layout and UX. From the proposal itself, I was planning to use
the Jost font but have decided to use Inter instead for multiple
reasons (updated in the Canva slides of the proposal).
The final prototype also will not look 100% accurate to the sketches
since I will have to make some improvements and changes along the
way.
I have created a multi-page website prototype with a main navigation bar that links all key sections. The flow is connected, allowing users to jump between Home, About, Contact, Products, and Services seamlessly; just like a typical company website.
Final Prototype
Brief Writeup (500-800 words)
For this project, I focused on redesigning the website interface for PT Lumipack, a B2B packaging company specializing in customizable flexible packaging solutions. The goal of the prototype was to improve user navigation, highlight product categories more clearly, and present a more modern, responsive, and engaging user experience for prospective business clients. This writeup outlines the key features of the prototype, the design decisions made throughout development, and how the final prototype addresses the original objectives set in the redesign proposal.
Key Features of the Prototype
The redesigned prototype of PT Lumipack’s website includes several significant improvements, both in structure and visual presentation:
-
Clear Product Categorization: Each packaging type—Three Side Seal, Stand Pouch, Center Seal, and Spout Pouch—is clearly categorized and listed with variants such as "Three Side Seal with Zipper" or "Center Seal with Valve." This resolves the original issue of users not understanding the different formats offered by PT Lumipack.
-
Interactive Product Cards: Users can now browse packaging options with visually consistent product cards featuring product images, short titles in 24px bold Inter font, and a heart button that users can click to "favourite" a product. This feature mimics an e-commerce interface but stays within B2B expectations.
-
Responsive Layout: The prototype is fully responsive and works seamlessly across different devices—an essential feature for B2B clients who might be accessing the site from desktops or mobile phones.
-
Live Chat AI Integration Placeholder: A Live AI Chat icon is placed on the bottom-right corner of the screen, ready for integration with a chatbot like Noupe AI. This feature prepares the site for future automation of customer support and FAQ handling.
-
Consistent UI Elements: All text follows a consistent font family and sizing (Inter), spacing is optimized for readability, and color choices are clean and professional—primarily black (#000000) and grey (#676767), with red (#d93025) as an accent for interactive elements.
-
User Interaction Feedback: Hover effects, button animations (like the heart icon "popping" when clicked), and subtle transitions provide micro-interactions that enhance the user experience and make the interface feel responsive and lively.
Design Decisions Made
Throughout the development process, several key design decisions were made based on usability research and the goals defined in the proposal:
-
Visual Hierarchy: I established a consistent layout with bold headlines, clear product names, and enough white space to avoid clutter. I made sure important call-to-actions like “View Details” or heart buttons stood out visually.
-
Navigation Simplicity: Rather than overloading the header with dropdowns, I streamlined the main menu into four categories and allowed subcategories to expand on click or hover. This makes the experience feel more intuitive and less overwhelming.
-
Figma Prototyping Tools: I used interactive components in Figma to simulate real interactions. For example, the heart button not only changes color but also triggers a pop animation to give the feeling of responsiveness.
-
System Colors and Accessibility: I selected high-contrast text colors and buttons that meet accessibility guidelines, ensuring that the redesign is inclusive and easy to read for all users.
-
B2B-Specific Considerations: I made sure not to make the website look too “e-commerce-like” or playful, instead maintaining a balance between friendly interaction and corporate professionalism.
How the Prototype Meets the Redesign Objectives
The original proposal outlined four key objectives: (1) improve clarity in product offerings, (2) modernize the UI/UX, (3) increase user engagement, and (4) lay the foundation for future scalability (e.g., chatbot, multilingual support).
- Clarity in Product Offerings: The new card system and categorized layout now allow users to visually distinguish between product types and their variants. This aligns with the company’s need to showcase flexibility and customization.
-
Modern UI/UX: Through the use of a minimalist yet dynamic layout, consistent typography, and responsive design, the prototype offers a professional and modern interface that better reflects PT Lumipack’s global aspirations.
-
User Engagement: Interactive buttons, microanimations, and a placeholder for a live chatbot help keep users engaged while browsing, even in a business-centric environment.
-
Scalability: The modular design and clear navigation architecture make the site easily expandable. Future features like AI support, downloadable product spec sheets, or order tracking could be added with minimal structural changes.
Conclusion
This prototype is a significant step forward in transforming PT Lumipack’s digital presence. It bridges the gap between industrial packaging and contemporary user expectations while providing a solid, flexible design system that can adapt to future needs. Through careful design thinking and iterative development in Figma, I was able to create a prototype that not only looks polished but also serves as a meaningful interface for real users.
REFLECTION
Experience
Designing the prototype was both challenging and exciting. Translating my proposal into an interactive layout helped me understand how structure, spacing, and visual hierarchy directly impact usability. Creating components like dropdowns and heart animations in Figma pushed me to be more hands-on and detail-oriented.
Observation
I noticed that small design choices; like font changes or button spacing, can greatly affect user clarity. Consistency in UI elements made the whole interface feel smoother. I also observed that even for a B2B site, adding subtle interactivity improved user engagement without compromising professionalism.
Findings
This project taught me that prototyping is more than visuals; it's about thinking from the user’s perspective. I learned to design with scalability and usability in mind, and now feel more confident using Figma to bring realistic, interactive concepts to life.
.png)
.png)
Comments
Post a Comment