Figma Webdesign Service Offer Request for Small Business

1. Introduction

This project proposal outlines our comprehensive proposal for delivering a Figma-based web design service for Nuwa's new website redesign following its entire rebranding. The redesigned site will reflect Nuwa’s leadership in research commercialisation, technology & innovation and social impact while addressing its commercial imperatives. Our proposal details the scope of work, design and technical requirements, project milestones, pricing structure, and our collaborative process to ensure a seamless transformation of Nuwa’s digital presence.

2. Background & Project Overview

Nuwa aims to reposition its digital presence as the Centre of Excellence and Innovation that not only drives commercial success but also showcases significant social impact. The new website will serve diverse audiences including funding bodies, global partners, researchers, and enterprise customers and facilitate visitors to explore our secondary brands. Drawing inspiration from leading industry websites and innovation pages, the design brief covers multiple sections:

• HOME: Hero banner, dynamic impact highlights, and clear CTAs
• INDUSTRIES: In-depth pages segmented into Humanitarian & Civil Protection, Performing Arts, and Media & Entertainment
• TECHNOLOGIES: Detailed insights on Cloud, Edge, Data & AI, IoT, and Immersive technologies
• INSIGHTS: Aggregated thought leadership, news, and research content
• PARTNERS: Comprehensive partner profiles 
• CONTACT: Interactive contact options

Our migration and redesign project is built on modern technologies based on the NextJS framework with react frontend development, Payload CMS for robust content management, and Storybook for component documentation. Figma will be the primary design tool for this "Webdesign Service Offer Request" to create a unified design system alligned with our bradn guideline and that integrates tightly with our CMS.

3. Scope of Work

3.1 Design Strategy & Deliverables

• Figma File(s):
  • A master Figma document segmented as follows:
    • Unified Design System, 
    • Segment Blocks, 
    • Heroes and Layouts, and;
    • Full-Page Website and Templates.
  • Inclusion of design tokens (semantic colors, typography scales, spacing multipliers, ...) to ensure consistency.
  • Reference like https://fluent2.microsoft.design/ and https://carbondesignsystem.com/ are our recommendation as standard to follow.
• Component Library:
  • A repository of reusable components (buttons, forms, icons, cards) with locked high-impact elements (e.g., hero CTAs, main navigation) to prevent misalignment.
• Documentation & Mapping:
  • Annotated guidelines on component usage and detailed mapping documents to provide front-end developer a clear correlation with each Figma component to its corresponding Payload CMS block and Storybook component.

3.2 Technical Requirements

• Responsive Design:
  • Figma auto-layout frames that enforce responsive behaviour with preset breakpoints, minimum/maximum content widths, and spacing ratios for the following breakpoints:

    Size class	Breakpoint range	Breakpoints
    small	320-479	640px or less
    medium	480-639	641px to 1007px
    large	640-1023	1008px and larger
    x-large	1024-1365	1008px and larger
    xx-large	1366-1919	1008px and larger
    xxx-large	1920 and up	1008px and larger

• Accessibility compliance (WCAG 2.1)
• Dark/Light mode support
• Consistent branding
• Ease of CMS and Front-End Workshop Integration for Front-End Developers
• Design System Architecture:
  • Adoption of atomic design principles and constraint-based component structures to maintain a cohesive design language based on  https://fluent2.microsoft.design/ and https://carbondesignsystem.com/.

4. Process & Collaboration

Our approach emphasises collaboration, transparency, and iterative improvement:

• Collaborative Wireframing:
  • Initiate joint sessions with content owners, designers, and engineers to align on core messages.
• Feedback Loops:
  • Regular stakeholder reviews and structured feedback sessions to ensure alignment with our strategic objectives.
• Quality Assurance:
  • Continuous testing using Storybook to verify component behavior across devices and adherence to design tokens.

5. Terms & Conditions

• Intellectual Property:
  • All deliverables and associated materials will become the property of Nuwa upon full payment.
• Confidentiality:
  • Both parties agree to maintain confidentiality regarding proprietary information.

9. Submission Guidelines

Interested designers are invited to submit their proposals. Proposals could include:

• A summary of your understanding of Nuwa’s requirements.
• Drafted methodology and timeline for the project.
• Portfolio examples relevant to the Figma web design.
• Any additional documentation that supports your technical and design capabilities.

10. Addendum

The following resources are attached to the project brief:

• Webdesign References, Requirement and Specifications
• Nuwa Brandbook, and Guideline (All additional assets will be shared at the start of the project through WeTransfer)

Access to UI components and libraries can be provided:

• Hero UI, Tailwind CSS Plus, Aceternity UI, and 21st.dev