03/06/2025 - 16/06/2025 (Week 7 - Week 9)
Chang Wing / 0367807
Interactive Design / Bachelors of Design (Honours) in Creative Media / Taylor's University
Project 2: Website Redesign Prototype
TABLE OF CONTENTS
LECTURES
Mr. Shamsul introduced the concept of the CSS Box Model, explaining how every HTML element is treated as a box consisting of content, padding, border, and margin. He also highlighted pseudo-class selectors, clarifying the the correct order of a:link, a:visited, a:hover, and a:active to ensure proper styling of hyperlinks.
*Pseudo-Class Selector
4 types (!MUST follow the order or else wont work):
1. a: link
2. a: visited
3. a: hover
4. a: active
The Display Property
1. Inline Container
<span> is the standard inline element. An inline element can wrap some text inside a paragraph.
<span> like this </span>
without disrupting the flow of that paragraph.
2. Block-level container
<div> is a block-level HTML element used to group content together for styling or layout purposes.
*<div> vs <span>- <div>: Groups larger sections of content (e.g., paragraphs, images), e.g., layout containers, cards, sections; <div> breaks onto a new line and takes up the full width.
- <span>: Groups small pieces of text or inline elements, e.g., styling part of a sentence; <span> stays within the line and only takes up as much space as needed.
3. Flex
4. Grid
Box Model in CSS
The box model in CSS is a fundamental concept that describes how elements are displayed and spaced on a web page. Every HTML element is treated as a box, and this box is made up of four parts:
1. Content: the actual content of the element (text, images, etc.).
2. Padding: the space between the content and the border.
3. Border: the line surrounding the padding (optional).
4. Margin: space outside the border that separates the element from other elements.
Figure 1.1 Box Model in CSS
*{
Border = (pixel)px (MUST SELECT border type, e.g. solid/dashed) (color);}
Week 8
HTML File Fixing Practice
Independent Learning Week (ILW): Self-Directed Task to be completed, fix the HTML file provided.
Figure 1.2 Fixing HTML file in Adobe Dream Weaver
Week 9
Drop Down Menu
Mr. Shamsul taught us how to code a drop down menu with CSS and HTML. Figure 1.3 shows the drop down menu I created with Adobe Dreamweaver.
Figure 1.3 Coded drop down menu
Figure 1.4 HTML code
INSTRUCTIONS
Project 2: Website Redesign Prototype Building upon previous assignment (Website Redesign Proposal), 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.
1. 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.
2. Design Fidelity:
Choose an appropriate level of fidelity (low, medium, or high) based on the project’s scope. The prototype should effectively communicate the look and feel of the final design.
3. Tools:
Use prototyping tools such as Adobe XD, Figma, Sketch, or any other relevant software to create the prototype.
4. 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 two core pages (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.
5. User Experience (UX) Considerations:
Usability: Ensure the prototype reflects a user-friendly design, with clear navigation, intuitive interfaces, and accessible features.
6. Responsiveness:
Demonstrate how the design adapts to different screen sizes (desktop, tablet, mobile) either through
separate prototypes or responsive design techniques. Interactivity: Implement interactive elements (e.g., buttons, hover states, form fields) to provide a realistic user experience.
Project 2: Website Redesign Prototype
Process
Figure 2.2 Kerning
Figure 2.2 Shorten down texts
Figure 2.3 Updated "Twitter" logo to X at footer.
Figure 2.4 Redesigned imagery in Photoshop
Figure 2.5 Created graphical elements in Adobe Illustrator
800-Words Write Up for Prototype
Prototype Overview and Key Features
The redesigned Kumon website prototype was created with the intent to enhance user experience by addressing four key goals outlined in the redesign proposal: clarifying navigation structure, improving visual consistency, optimizing color usage, and simplifying content. The prototype is targeted at prospective parents exploring Kumon’s offerings and aims to reflect the brand as a credible, results-oriented educational platform.
1. The 'Home' Page
Structured into clearly defined sections, beginning with a captivating hero banner that features Kumon’s slogan to immediately establish brand presence. This is followed by concise sections including About Kumon, How Kumon Works, a Program Overview, and a Call-to-Action (CTA) panel at the bottom of the page encouraging users to “Book a Free Assessment.” A simplified top-level navigation bar is consistently present across all pages, linking to Home, About Us, Programs, Careers, Contact Us, and Book Free Assessment. Dropdown menus were intentionally excluded to reduce complexity and make navigation straightforward for users of all tech literacy levels.
2. The 'Programs' Page
Provides an overview of the concepts covered in Kumon’s Math and English programs, with a dedicated “Kumon for Every Stage” section that highlights how Kumon tailors its approach for early learners, primary, and secondary-level students. Each stage features a concise description (30–50 words) accompanied by supportive visuals, allowing parents to quickly grasp how the curriculum aligns with their child’s developmental needs.
3. The 'Contact Us' Page
Included Kumon's contact information and a simple contact form under the heading “Help Us to Reach You” to encourage parents to reach out with enquiries. While native input fields are not supported in Figma, a plugin was used to simulate basic interaction. The form includes name, email, phone number, and message fields, arranged to be intuitive and user-friendly, avoiding visual fatigue for parents filling it out.
Design Decisions and Rationale
1. Navigation Bar
The navigation bar was simplified to ensure clarity and ease of use (Figure 2.6). It features only essential links and avoids dropdowns, minimising the cognitive load for users. While a sticky header was considered initially, the decision was made to keep the navigation static to maintain a clean visual flow and avoid clutter on scroll. A “Book Free Assessment” button were included to gently encourage user action and ease online enrolment process.
Figure 2.6 Redesigned navigation bar
2. Interactive Components
Interactive features like card carousels (Figure 2.7) and hover states were added to make the experience feel more engaging and active. The carousel was used to present Kumon’s learning methods in a way that’s easy to follow, each paragraph is kept short and digestible. These interactive elements give the page some movement and dynamism, which feels fitting for an after-school program like Kumon that’s all about continuous learning and progress. It also helps make the site feel less static and more alive.
3. Marketing Focus
Marketing efforts were supported visually and strategically through layout and copy. Each page ends with a "Book Free Assessment" button (on section / footer), encouraging users to take action after digesting relevant content. The language used across the site is friendly and reassuring, targeting parents’ concerns while highlighting Kumon’s credibility.
Key selling points such as “Free Assessment” and “Individualised Learning” are repeated across different sections to reinforce trust and ensure consistent messaging. The site’s structure is also designed to lead users from awareness to decision-making progressively.
4. Visual Design and Layout
The colour palette uses a clean white background paired with Kumon Blue as the primary accent. Kumon Blue is the official brand colour and communicates steadiness, intelligence, and a sense of light playfulness which suits their brand identity. This blue is applied to highlight key information and buttons, guiding user attention while keeping the overall interface calm and approachable. Supporting images were selected to match the blue colour scheme, most are background-free and placed within playful circular or square frames to add personality without making the layout feel cluttered.
To reinforce the educational and child-friendly atmosphere, vector graphics like ‘+=×÷’ and ‘ABC’ (Figure 2.8) were added into the background. These small touches add liveliness and help visually connect the website to Kumon’s identity as a learning platform.
Typography was chosen with clarity and hierarchy in mind. Poppins Bold is used for headings to ensure visibility, while Lato Regular supports clean, legible body text. The body font size is kept slightly smaller to maintain a clean reading flow and avoid visual heaviness.
Icons and simple illustrations (Figure 2.9) are included throughout, especially on the Programs page, to make concepts more understandable at a glance. Consistent spacing and margin systems are applied across all pages to support visual structure, helping users move through the content easily while maintaining a clear sense of order and balance.
Figure 2.8 Background vector graphics
Figure 2.9 Icons and illustrations
5. Footer
Footer on each page includes quick access menu buttons, links to Kumon North America's social media platforms (e.g., Facebook, Instagram), and an additional “Book Free Assessment” CTA button (Figure 10). This ensures that key actions and external platforms remain within reach, even after users scroll through content-heavy pages.
Figure 2.10 Redesigned Footer
5. Performance
The prototype performs smoothly with little to no noticeable delay during interaction. Carousel transitions are seamless, hover effects respond as expected, and all CTA buttons are functional, each link successfully redirects to the intended pages. The prototype performance was only tested on desktop view.
Prototype (Final)
Figure 2.11 Page Final Layouts
Figure 2.12 Navigation Flow
Figure 2.13 Design System
Figure 2.14 Hovering Effects
Figure 2.15 Card Slider Components
Figure 2.16 Contact Form Components
FEEDBACK
Project 2: Website Redesign Prototype
Week 7 (03/06/2025)
Feedback: -
Week 8 (10/06/2025)
Feedback: -
Week 9 (19/06/2025)
Feedback: The layout, design and flow are good. Suggestion: No drop shadow as it make the design looks cheap; Programme page: the 2 colums on top is a bit too long
REFLECTION
In this task, we were required to develop a functional prototype that demonstrates the user flow and detailed layout of our proposed wireframe. I found Figma to be highly beginner-friendly for those new to prototyping. it was intuitive to use, especially for those familiar with Adobe Illustrator, as many shortcuts and navigation features were similar.
During the UI development process, I paid close attention to consistent spacing and margins, appropriate typography choices, clear distinctions between headings and body text, strong sense of information hierarchy, and imagery that best communicates the brand identity. This process has definitely strengthened my sensitivity to layout precision and visual coherence in UI design.
The most rewarding part was learning how to create interactive prototypes. Initially, I struggled with setting up components and interactions, particularly for the card carousel. It took a lot of trial and error to understand how to use Smart Animate, every frame had to be grouped correctly, and vector buttons needed to be separated to achieve the sliding effect. Though challenging, getting it to work was incredibly satisfying.
Another challenge was designing the contact form. Figma doesn’t support native input fields, and while I intended to explore using variables to create typable inputs, time constraints led me to rely on a plugin with limited functionality. The plugin lacked input validation, feedback, and proper character deletion, which slightly compromised interactivity.
Overall, this task deepened my understanding of interactive prototyping and refined my attention to UI details. It also strengthened my technical confidence, which I believe will benefit me greatly as I continue to grow as a UI/UX designer.
Figure 2.14 Hovering Effects
-03.png)
Comments
Post a Comment