Hiba Academy Bay Area

Project proposal

Website Design & Development October 2026
Mangrove
Our purpose

We create joyful, equitable, inclusive digital experiences that enable changemakers to do their best work.

We create inclusive websites and future-forward technologies for organizations driving transformational change. for credit unions and community-first finance. for educators making learning accessible to all. for nonprofits and foundations strengthening communities. for organizations protecting people and planet. for fellow B Corps and purpose-driven businesses.
Executive summary

Hiba Academy Bay Area is a new English-Mandarin school in San Francisco and part of a global network of sister schools. As enrollment grows and operations shift under Bay Area leadership, the current site is no longer enough. Hiba Academy Bay Area needs a bilingual platform that reflects this campus, supports day-to-day publishing, and can scale with future campuses and fundraising.

Founded in 2009, Mangrove designs and builds websites for mission-driven organizations navigating growth and complexity. This project gives Hiba Academy Bay Area a clear, manageable digital foundation the local team can own and evolve over time.

Hiba Academy Bay Area
Challenges & opportunities

US-side control for day-to-day updates

The current site got Hiba Academy Bay Area through launch, but routine updates still depend on an overseas vendor and limited admin access. A modern WordPress rebuild will give the Bay Area team direct control, faster publishing, and cleaner governance.

A bilingual presence grounded in this campus

Today, key pages still rely on sister-school imagery and Mandarin coverage is incomplete, creating an uneven experience across languages. Designing English and Mandarin together, while centering Hiba Academy Bay Area students and campus life, gives families a site that feels current, local, and clearly aligned with the school they are choosing.

A foundation for enrollment and growth

Hiba Academy Bay Area plans to grow toward K-12, add campuses, and prepare for fundraising while key systems for admissions and CRM are still being decided. The website should be a stable hub with modular templates, analytics-ready structure, and integration flexibility to support events, community engagement, and next-phase operations.

Our approach

Our approach

Our approach to this project is structured in three phases, all building toward a site your team can manage with confidence and your audiences can navigate with ease.

Discovery begins with an information architecture and UX audit to identify which sections of the current site can carry forward and which need rethinking. The build then translates the approved direction into modular templates and reusable content blocks, so multiple staff can publish and maintain content with confidence.

Project phases
  1. 1 Kickoff, scoping & discovery
  2. 2 Brand, design and content creation
  3. 3 Development, QA, training & launch
Phase 1

Kickoff, scoping & discovery

Connect and align on expectations, timeline, and ways of working.

Mangrove leads structured discovery sessions with project stakeholders to understand your mission, goals, audiences, and key challenges.

We assess your current content and technical landscape while defining site structure (sitemap & wireframes) and project priorities.

We deliver a Creative Strategy presentation and a comprehensive Project Plan — including a Creative & Technical Brief, refined scope, and updated timeline.

Client expectations

Prepare for and participate in discovery, provide required back-end access, and collaborate through timely feedback, approvals, and ongoing engagement.

Phase 2

Design & content creation

Shape how your site looks, feels, and communicates.

Mangrove establishes a clear visual direction through moodboards, then creates responsive mockups of key pages to define the overall look and feel.

We develop a flexible system of custom content blocks and page templates to support scalable, consistent page building.

In parallel, messaging and content structure are refined to ensure alignment between story, design, and user needs.

Client expectations

Provide sample content and collaborate with Mangrove through timely feedback, approvals, and asset procurement as needed.

Phase 3

Development, QA, training & launch

Mangrove develops a flexible, editable website based on the approved design system, using custom blocks and content types, and integrating core functionality and analytics.

Content is integrated and the site is tested for performance, accessibility, and overall quality.

Training and documentation are provided ahead of Client QA to support effective review and content management.

Following launch, Mangrove provides a post-launch warranty, with optional digital partnership tiers to support ongoing improvements and site evolution.

Client expectations

Provide finalized content at the start of development, support launch readiness, and participate in QA through timely, consolidated feedback.

Thoughtful execution at every step
Working with Mangrove means a process that is structured, collaborative, and designed to support your team.

Clarity at every step

Clear timelines, defined roles, and thoughtful facilitation keep the project moving forward with confidence — no guesswork or chasing updates.

Strategic, not just tactical

We don't just execute — we help guide decisions, prioritize what matters, and keep the project aligned with your goals.

Designed to reduce your load

From working with content partners to managing feedback and approvals, we structure the work to make participation straightforward and efficient for your team.

Proactive and responsive

We anticipate needs, surface risks early, and stay responsive so nothing stalls or gets stuck.

A partner you can count on
Our team brings deep, focused expertise in their craft, and the experience to know how the pieces fit together.

Discovery, first

We take the time to understand your audiences, content, and how your site works, so we have a clear foundation for everything that follows.

Design with depth

Our designers are visual problem-solvers who translate your brand into a flexible digital system that feels intuitive to use and holds up over time.

Content that connects

The storytellers we partner with craft messaging that resonates with real people and works with the ways they find and engage with your site.

Technology, purposefully applied

Our developers are as fluent in strategy as they are in code, so every technical decision serves your goals, not just the build.

A result that performs and evolves

A backend built for you

Your website backend is intuitive and designed around how you actually work, so updating content is straightforward, not technical.

Custom and curated

Every component is thoughtfully designed to reflect your organization's voice and goals — a cohesive experience that supports your story.

Modular flexibility that lasts

Reuse, adapt, and expand components over time without starting from scratch — your site grows with you.

Scalable, reliable technology

Modern tools keep your site secure, stable, and ready for what's next — whatever that looks like for your organization.

Project details

Investment options
Tier 1 · Foundation
A launch-ready bilingual WordPress site on Hiba Academy's existing brand, built from an IA and UX audit, with full admin control for the school's team, SEO that protects current rankings, GA4 and Tag Manager tracking, and a CRM connection.
$50,000 to $55,000
Tier 2 · Extended
Everything in Tier 1, with a wider set of page templates and content blocks, WCAG Level A accessibility at launch, and SEO guidance the school's writers and SEO partner can work from. Three months of support follow the launch.
$60,000 to $65,000
Tier 3 · Robust
Everything in Tier 2, with an extended discovery phase, WCAG Level AA accessibility confirmed by manual testing, and AEO so the site is found in AI-generated answers. Six months of support follow the launch.
$70,000 to $75,000
Investment options
Tier 1 · FoundationTier 2 · ExtendedTier 3 · Robust
Research & discoveryDiscovery & strategic auditDiscovery & strategic auditExtended discovery & strategic audit
IA & contentSitemap & wireframes · content outlines for 12–15 pagesSitemap & wireframes · content outlines for 15–20 pages*Sitemap & wireframes · content outlines for 20–25 pages*
Design & developmentDesign system on the existing brand · bilingual EN/ZH build · 12–15 blocks & 4–5 CPTs*Design system on the existing brand · bilingual EN/ZH build · 16–20 blocks & 6–7 CPTs*Design system on the existing brand · bilingual EN/ZH build · 20–25 blocks & 7–9 CPTs*
AccessibilityBest practicesWCAG Level A at launchWCAG Level AA + manual testing
SEO, analytics & integrationsTechnical SEO foundation · GA4/GTM setup · CRM connectionAll of Tier 1, plus SEO guidance for your writers · 3 months supportAll of Tier 2, plus AEO (AI discoverability) · 6 months support
Training & handoffUser manual & training · 30-day warrantyAll of Tier 1, plus extended trainingAll of Tier 2, plus a 60-day warranty
Investment$50,000 to $55,000$60,000 to $65,000$70,000 to $75,000

*Final counts confirmed during the technical strategy phase. Copywriting is available as an optional add-on when applicable.

Project timeline

We estimate approximately 6 months from start to finish. Our timelines are honest and based on decades of experience — they account for holidays, realistic client preparation and content-creation time, a 2–3 day turnaround for feedback, and our own working weeks.

If this feels long, let's talk — we're open to a V1/V2 launch or other creative solutions to uplevel your presence sooner. We are currently scheduling new projects in mid October 2026, on a first-come, first-served basis.

When can we start?

Once your project is fully confirmed, we'll schedule a start date and outline what comes next. We'll continue to refine the timeline together during Phase 1. The timeline may shift if signing or start is delayed, or if our capacity changes after this proposal.

Sample project timeline
NovDecJanFebMarApr
Month 1Month 2Month 3Month 4Month 5Month 6
Phase 1: Kick-off, scoping & delivery
Phase 2: Design & content creation
Phase 3: Development, QA, training & launch
Phase 4: Warranty, post-launch
Content management system
WordPress

We recommend WordPress for websites that need to be highly customized with more complex content types, API integrations, plugins and marketing scripts. WordPress is great for marketing or content managers that need to quickly and flexibly create dynamic content from a tailored back end.

A core advantage to using WordPress is that it is 100% open source and highly customizable, giving us more control as developers to build advanced functionality and customized editing experiences for clients.

WordPress CMS & hosting

Why WordPress?

A WordPress site is 100% owned and managed by the client — versus files living on a proprietary third-party platform.

Accessibility can be built directly into the user experience, and conformance to WCAG guidelines can be better controlled.

Website hosting

WordPress is free, but maintaining a site involves hosting, ongoing maintenance, and potential plugin fees.

We typically build on our WPEngine hosting account. We recommend WPEngine and a small handful of other WP-specific hosts for their attention to performance, security and scalability.

Accessibility & SEO

Accessibility

We use a combination of digital tools and optional manual testing to support compliance with current WCAG Level A or AA guidelines. Accessibility is considered throughout design and development.

Post-launch, we offer accessibility compliance monitoring as part of our digital partnerships.

If in scope, manual testing can be conducted by one of our trusted partners.

SEO and AEO/GEO

Accessibility and AI search reinforce each other: the same clean, well-structured markup that guides a screen reader is what AI crawlers and search bots follow, so building to WCAG doubles as a foundation for AEO — answer engine optimization, or being surfaced in AI-generated answers.

We ensure best practices during setup — installing an SEO plugin or third-party tool and setting up Google Analytics. At launch we re-index your new site and manage redirects and 404s. We can share best practice resources for keywords, meta descriptions, page titles and URL structure.

In-depth SEO/GEO services can be implemented under the direction of one of our partners.

Security & data privacy

Security

Our baseline security protocols meet current ISO 27001 A.9, A.12.4, A.13.1, and GDPR compliance.

Our digital partnership tiers include user authentication, firewall & malware protection, activity logging, SSL, and GDPR compliance.

Data privacy

We make recommendations based on the data-privacy requirements needed for your project (e.g. GDPR and CCPA).

Where appropriate, we may recommend third-party services to maintain compliance.

The benefit

Each partnership tier includes proactive stewardship and strategic guidance to optimize performance and support long-term progress.

Your website becomes a dependable asset that evolves alongside your impact.

If none of our partnership tiers suit your needs, our partner organizations offer smaller website management options.

Ongoing partnership & support

Mangrove offers ongoing digital partnerships that help organizations maintain, improve, and evolve their websites over time. We provide security updates, performance monitoring, and strategic enhancements that compound quarterly.

Through strategic planning, we help you focus on what matters next and deliver meaningful improvements throughout each quarter. Your website grows stronger and more capable, adapting to your organization's changing needs.

Using blocks to build pages

As part of the site architecture deliverables, we recommend block types based on what best fits the site's content and functionality needs. These flexible blocks can be chosen and reordered for any given page.

Page wireframe built from content blocks Page wireframe built from content blocks Finished page built from content blocks Finished page built from content blocks
Pricing option clarification

Blocks

Content blocks are a foundational part of your site. The number and type included shape the range of layouts and functionality available across your pages.

A thoughtful set of reusable blocks helps your team create consistent, flexible pages without ongoing development support.

Content types (CPTs)

Custom post types help structure and manage repeatable content — news, events, case studies, or team members.

This content automatically populates across your site, appearing in lists, grids, or featured sections without being added in multiple places.

Pricing option clarification (cont.)

Content migration

Content volume and migration needs are confirmed during the technical strategy phase, and scope can be adjusted then. We are continually developing new ways to migrate content more effectively.

If additional migration support is needed beyond what's outlined, it can be scoped as an add-on. Our training also supports your team in taking a more hands-on approach, if preferred.

GTM/GA + SEO setup

If included: keyword research & analytics audit, GA goal-logic recommendations and setup, a reporting template with live data & campaign dashboard, and follow-up review/updates and reporting.

Case studies

WEBSITE

Providing joyful, in-depth learning

Prospect Sierra delivers groundbreaking education to TK–8th graders from their breathtaking El Cerrito, California campus. Students get daily opportunities to engage in meaningful academic learning that allows them to gain self-knowledge and compassion for others. We built a customized WordPress site that will meet the growing needs of Prospect Sierra's admin team. Using captivating visuals that underscore compelling messaging, the school now has a site that conveys its vibrant and embracing community.

  • Custom WordPress development
  • Strategic direction & content
  • Impact report microsite
Prospect Sierra website
Testimonial

“It's a delight to work with Mangrove. The team is accessible, approachable, knowledgeable, and efficient. I hope to build on this partnership in the years to come!”

Mary DeNardo
Director of Communications · Prospect Sierra
Mary DeNardo
IDENTITY + WEBSITE

Helping every child access a great school

The National Center on School Infrastructure (NCSI), is a federally funded technical assistance center supporting the improvement of U.S. public school facilities. As a new organization, NCSI needed a clear visual identity and a digital platform to share resources, tools, and data with education leaders nationwide. We built an accessible WordPress site with a custom Airtable integration and intuitive Resource Library, giving NCSI a solid digital foundation to share knowledge and strengthen school communities nationwide.

  • Custom Wordpress Development
  • Identity/Branding + Website Design
NCSI website
WEBSITE

Uniting a community of givers across the Mid-South

The Community Foundation of Greater Memphis, a philanthropic hub connecting donors, nonprofits, and community partners across three states, needed a cohesive digital home to match the breadth of their work. With content scattered across three separate sites, they wanted a unified platform that could serve distinct audiences while making it easy for everyone to find what they needed. We rebuilt their site on WordPress, consolidating three sites into one, and developed a custom nonprofit directory, connected grants database, and purpose-built member portal — all designed and built to WCAG Level AA standards.

  • Custom WordPress development
  • Website design
  • Accessibility (WCAG AA)
  • Content strategy
Community Foundation of Greater Memphis website
Testimonial

“It was such a pleasure working with the Mangrove team to bring our new website to life. They embraced our vision and offered creative, solutions-oriented ideas. Simple to manage yet incredibly robust, the site is full of tools and resources for donors and grantseekers alike. I truly believe it will drive increased philanthropy in our community.”

Julia McDonald
VP of Marketing & Communications · Community Foundation of Greater Memphis
Julia McDonald
WEBSITE

Turning deep, joyful learning into intellectual, emotional, and cultural fluency

Presidio Knolls School is a K-8 school in San Francisco built around progressive education and deep Mandarin immersion. We moved their site from Squarespace to custom WordPress, rebuilt the navigation so families can find the Curriculum Guide, Admissions Brochure, and School Calendar, and built custom blocks that support their bilingual content. We also adapted PKS's brand colors, especially their green, to meet WCAG Level A accessibility standards. The site gives PKS a modern, welcoming home that reflects its mission and ethos.

  • Custom WordPress development
  • Website design
  • Content strategy
  • Accessibility (WCAG Level A)
Presidio Knolls School website
Want a closer look?

Visit our website to explore more of our work, expertise, and approach to building websites that last.

References
Paulo Vergara, Exec. VP of Marketing and Development, SF Zoo
Project type: Website build (pre-launch) / Email: PauloV@sfzoo.org · 415.753.7286
Wil Kristin, Senior Director, Strategic Communications, Beneficial State Foundation
Project type: Website / Email: wkristin@beneficialstate.org
Jill Hollosi, Marketing Programs and Brand Manager, Assiniboine Credit Union
Project type: Website / Email: JHollosi@acu.ca
Ericka Taylor, Co-Executive Director, Americans for Financial Reform
Mary DeNardo, Director of Communications, Prospect Sierra
Project type: Website / Email: mdenardo@prospectsierra.org
Conor Curtis, Head of Communications, Sierra Club Canada
Project type: Website / Email: conorc@sierraclub.ca

About Mangrove

Certified B Corporation Women Owned — WBENC Woman-Owned Small Business Clean Creatives approved 1% for the Planet

Mangrove is a woman-owned website design and development company with a diverse and talented team distributed around the globe. We have headquarters in both the United States and Canada.

As a Certified B Corp, we are committed to meeting the highest standards of social and environmental impact. We are also a certified Women's Business Enterprise (WBENC) and a Woman-Owned Small Business (WOSB).

Headquartered in the US and Canada Canada United States
Our philosophy

We are technologists and designers, equally.

Our work bridges human-centered UX with deep technical expertise to create intuitive, robust digital experiences. We bring a values-driven perspective to building thoughtful, inclusive technology.

This approach allows us to create sustainable design systems and websites that last.

What guides our work

Clarity first

We believe good digital work starts with getting clear. When information is organized and grounded in real thinking, teams can make better decisions and focus on what matters.

Designed with care

We approach our work with intention, creating experiences that are accessible, inclusive, and grounded in the values our clients bring to their work.

Built to grow

We take a long-term view. The systems we build are flexible, maintainable, and designed to evolve, so your site continues to support you over time.

A few clients

Winnipeg Foundation
(RED)
Wikimedia Foundation
National Center on School Infrastructure
CAL FIRE
Mighty
Tipping Point Community
Sierra Club Canada
Assiniboine Credit Union
SHCLA
Adjuvant Capital
McConnell Foundation
National Screen Institute
GiftPact Foundation
University of Manitoba
Blend
Elemental Impact
Biomimicry Institute
Royal Winnipeg Ballet
Beneficial State Foundation
Mangrove leadership
Maiya Holliday
Maiya Holliday
Founder & CEO

A creative leader focused on digital solutions that drive organizational impact. With over 15 years solving complex technology challenges for mission-driven organizations, she pairs deep technical expertise with strategic vision to build platforms that amplify reach and engagement. Maiya founded Mangrove to empower changemakers to do their best work.

Andrew Boardman
Andrew Boardman
Senior Art Director

Andrew's mission is to design a web that is more humane, crafted ethically, available to all visitors regardless of ability, and built on open-source technologies. With over 25 years working with innovative, diverse mission-driven clients worldwide, he brings his skills as a designer, technologist and ally to every project.

Project team
Karen Niedzwiecki
Karen Niedzwiecki
Sr. Art Director + UX Lead
Chae Clark
Chae Clark
Dev Enablement + Sr. Tech Strategist
Chloe Ross-Rogerson
Chloe Ross-Rogerson
Sr. Account Manager
Ada Marcelino
Ada Marcelino
Account Manager
Cristina Mayol
Cristina Mayol
Developer
Senka Ibrahimpašić
Senka Ibrahimpašić
Sr. Developer
Shelby Neville
Shelby Neville
Designer
Aykan Burçak
Aykan Burçak
Sr. Developer
Dan Acuña Moreno
Dan Acuña Moreno
Developer
Jonathan Denni
Jonathan Denni
Dev Ops Manager
Lindsay Moore
Lindsay Moore
Marketing + BusDev Coordinator
Our practice

Diversity is our strength

Given the tech industry's well-known diversity gap, we are passionate about widening career opportunities for people who identify as Black, Indigenous, non-Black people of color, women, non-binary, LGBTQIA+, disabled, or any other underrepresented group.

We are committed to working with designers and developers from diverse backgrounds, bringing broader perspectives, deeper empathy, and more innovative solutions to every project.

Design for equality

We utilize best practices in design based on many years of UX research and web development practice.

Our design team works with universal design principles in mind to ensure that our products can be perceived and operated by most people, including those with diverse and divergent backgrounds and abilities. The web is made for everyone. Our mandate is to help bring that to fruition.

Our practice

Our Use of AI

Mangrove uses AI thoughtfully to support our team's creativity and effectiveness. Our approach is guided by principles of intentional use, client benefit, transparency, human oversight, and responsible data practices.

We use AI for tasks like transcription, research, and development, always with a human in the loop. We do not use client data to train AI models and aim for transparency around AI use where appropriate.

We build for the long-term

A core objective for every client engagement is to create a website that lasts. A sustainable and durable website requires long-term thinking and planning, which is done up front and before we ever touch design or code.

For us, extensibility is non-negotiable. Modular components, smart infrastructure and backend usability are fixtures in our practice. We want every client to see deep, lasting value in their digital investments.

Next steps

Thank you

We would love to work collaboratively with you to build an impactful site that will catalyze your growth and success. Thank you for your consideration.

If the outlined scope and budget look good to you and you're interested in moving ahead, just let us know as soon as possible so we can lock in the timeline and budget.

If you'd prefer to chat further before moving forward, we are more than happy to do so! Schedule a time to chat.

Next steps

Moving forward, our next steps would be:

1

Scope of work

Create a detailed SOW to confirm scope, project timing, and budget.

2

Agreement

Prepare your contract and deposit invoice to send with the finalized SOW.

3

Kickoff

Schedule an official kickoff call with key stakeholders to align on goals and next steps.

4

Scheduling

Confirm your ideal meeting schedule and communication rhythm for the project.

Give us a shout.

mangrove-web.com510-319-9521
Mangrove Certified B Corporation