Interactive Design : Project 2
1. Instruction
2. Project 2 - Figma redesign prototype
Prototype write up:
Overview of the Prototype
This prototype presents a redesigned version of the Bromley Education Matters website, developed in response to the redesign proposal outlined in Project 1. The primary objective of the redesign was to improve visual clarity, usability, and accessibility while maintaining a professional tone suitable for an educational support platform. The prototype includes five key pages: Home, About, Programs & Services, News & Events, and Contact, each designed to communicate the organisation’s purpose clearly and guide users efficiently through the site.
The prototype was created using Figma and later translated into a functional HTML and CSS implementation. It focuses on supporting education professionals by presenting information in a structured, intuitive, and visually coherent manner. The design decisions throughout the prototype were informed by the needs of the target audience, which includes teachers, administrators, and education leaders seeking resources, guidance, and professional development opportunities.
Key Features of the Prototype
One of the key features of the prototype is its consistent layout and navigation system. A fixed navigation bar appears across all pages, ensuring users can easily move between sections without losing orientation. This consistency improves usability and reduces cognitive load, aligning with common web usability principles.
The prototype also employs a card-based layout across multiple pages, particularly on the Programs & Services and News & Events pages. Cards are used to group related information, making content easier to scan and understand. This approach supports users who may be browsing quickly while still allowing access to more detailed information.
Another important feature is the use of clear visual hierarchy. Headings, subheadings, and body text are visually distinct, guiding users through the content in a logical order. Hero sections at the top of each page introduce the page’s purpose through concise text, reinforcing clarity and context.
Hover interactions are implemented on buttons, navigation links, and cards to provide visual feedback and improve accessibility. These subtle interactions help users understand which elements are interactive without overwhelming the interface.
Design Decisions Made During Development
Several design decisions were made during the development process to align the prototype with the goals of the redesign proposal. A minimalist visual approach was chosen to reduce clutter and improve readability. This decision was particularly important given the informational nature of the website, where excessive visual elements could distract from the content.
The selected colour palette, consisting of deep maroon tones, soft peach backgrounds, and neutral off-whites, was chosen to convey trust, professionalism, and warmth. These colours support the educational context of the platform while remaining visually engaging and consistent across all pages.
Typography was also carefully considered. Clear, legible fonts were prioritised to ensure accessibility for a wide range of users. Consistent spacing and alignment were used throughout the layout to create a balanced and organised appearance.
During development, additional emphasis was placed on responsive structure, ensuring that the layout adapts effectively to different screen sizes. While the prototype primarily focuses on desktop views, the structure supports mobile usability through vertical scrolling and flexible content blocks.
Addressing the Redesign Proposal Objectives
The prototype effectively addresses the objectives outlined in the redesign proposal. One key objective was to modernise the visual design while maintaining a professional and educational tone. This was achieved through the use of a cohesive colour scheme, clean layouts, and consistent component styling.
Another objective was to improve usability and navigation. The consistent navigation bar, clear page structure, and card-based layouts directly address this goal by making it easier for users to find information and move through the site intuitively.
The redesign proposal also aimed to enhance clarity and accessibility. The use of clear headings, concise text, and interactive feedback supports this objective by improving readability and helping users understand the site’s structure and functionality.
Finally, the prototype demonstrates how thoughtful interaction design, such as hover effects and visual feedback, can improve user engagement without compromising simplicity. These features contribute to a more polished and functional user experience that aligns with the original redesign goals.
Overall, the Bromley Education Matters prototype successfully translates the redesign proposal into a functional and visually coherent interface. Through consistent layout, considered visual design, and intuitive interactivity, the prototype enhances usability and clearly communicates the organisation’s purpose. The design decisions made during development directly support the objectives of the redesign proposal, resulting in a prototype that is both professional and user-focused.
Comments
Post a Comment