Introduction

Premise

The Osher Center for Integrative Medicine offers a blend of conventional and complementary therapies to help people take charge of their health through education, research, and clinical care. Right now, their website doesn't fully capture the range of what they offer, and this limits its ability to reach the people who need these resources most.

A thoughtfully designed website can solve this by clearly and simply presenting the Center's programs, research, and mission. Our goal is to create a site that's easy to navigate, welcoming to all visitors, and aligned with the Osher Center's commitment to holistic well-being.

This project isn't just about upgrading a website—it's about supporting a community that values integrative health. By working closely together and following a solid plan, we can create an online space that truly reflects the Osher Center's spirit and purpose, and helps more people find the care they need.

Timeline & Process

Our design phase can unfold over 8–12 weeks, and we'll collaborate to set a clear deadline and work backward from there. A launch date by the end of June is well within reach, and we can move faster if needed.

We believe the most effective designs emerge from genuine collaboration. By combining our individual expertise at the right moments and embracing a shared creative process, we can produce a result that resonates with everyone involved and achieve all our design goals. My role is to integrate our collective skill sets and guide the project so that it stays focused, efficient, and true to our overall vision.

The Iris Cocreative process goes like this:

Stage 1: Strategy, Alignment, and Branding

We'll start by thoroughly reviewing your existing materials and bringing them into a shared cocreative environment in Figma. Then as lead consultant/facilitator, I (James) will kick off the creative process with you in one or two 'Creative Visioning Sessions'. In these 1.5 - 2hr meetings, we'll really dig into who you are, what you're doing, and most importantly, why. I want to feel like I'm inside your organization and cocreating with you.

It's my job to evoke the vision and inspiration behind this organization and then create from there. We'll see it together, and hold this vision through the course of this project.

In this stage we also want to look at branding. We can build on what you already have but focus the brand into a clear set of brand guidelines and beautiful logo-form that aligns with the present state of the organization. We'll bring in a brand designer or two to assist with this and create a clean, professional, beautiful set of brand guidelines.

After these sessions we'll harvest our finding artifact documents we will share with you. These artifacts inform the development strategy we'll design and employ for the subsequent creative stages.

Stage 2: Content

In stage two, we help you bring structure to your content. With a clear vision of your organization in mind, we'll work together to establish a solid framework for an elegant, clear, and compelling website. If any content needs updating, our content facilitator will guide you through its creation and assembly during up to two 'Content & Structure Sessions.' We'll then organize all the moving pieces into a cohesive structure document.

At this stage, our goal is to clarify exactly what belongs on the site, ensuring every element aligns with the product's purpose. We'll then help you translate these insights into compelling content. We'll address questions such as:

• Which technologies need to integrate with the site?
• Which image sources can we draw from for the design?
• What pages and sections are needed to effectively convey the product's value?
• What written and photo content will each page include?
• Which words and calls to action will best capture your audience's attention?

Your input and participation are essential during this phase. You'll typically generate most of the content in your own voice, while we facilitate its creation and review.

Once we've assembled a clear, organized document of all content and structure, we're ready to move on to the next stage.

Stage 3: Web Design

With our vision and structure in place, and the necessary content ready, we can now bring our web designers into the project to focus on the visual creative process. Any designers we involve will review the materials and session recordings to ensure they're fully up to speed. James will serve as creative director and coach, guiding the process toward our goals and offering fresh ideas. However, much of the hands-on design work will be led by the designers themselves, as they develop beautiful concepts in Illustrator and Figma.

We believe it's important not to rush this stage, so our creatives have the time and space to produce their best work.

Once we have a mockup of the initial landing page, we'll schedule design reviews with you. If minor issues or questions arise, we can jump on brief calls to address them. Our budget will help determine how many reviews we can accommodate, and generally, more reviews and iterations lead to a brighter, more refined final design.

Final Design Check-In:

If you're satisfied with the design, we'll make any necessary adjustments and then move on to the next phase. If you feel we've gone off-track, we'll revisit the drawing board and make it right.

Step 4: Development

Dev Phase

Once we're about 90% complete with the design, we move into development. We don't aim for 100% perfection in Figma because we usually finalize details in WebFlow, where we can test mobile responsiveness and add dynamic elements like animations. At this point, our developer steps in and translates the Figma design into a polished WebFlow website.

Software

We use WebFlow because it allows us to build beautiful, dynamic, and highly responsive websites quickly and efficiently.

Flexible Workflow

With a WebFlow site, you and your team can easily edit and update most content—text, images, and more. We'll also utilize WebFlow's CMS functionality to create manageable content types such as blog posts, team profiles, news items, or research papers. If you want to experiment with more complex visual change yourself, you can do so through WebFlow's interface and test them on a staging site. Alternatively, you can leverage on our creative team for quick updates or new features. We offer ongoing support plans to give you affordable, flexible access to our experts.

That's it!

Once we finish development, we'll have a final development review' and make any final adjustments that we need to before pushing live on your domain. We'll share a doc where you can easily record any last requests and fixes you'd like us to make to the site before we launch. We make sure you have everything you need to use your new site, and we'll share with you whatever brand and social media assets we've created for you in this process. Your site is now ready to share with the world, and we'll also share it with our network.

Scope and Special Features

This is a large site with lots of moving parts. It's not nearly the largest site we've worked on but there are some important considerations regarding the scope of this project.. The site will include a few special elements that we can design and develop for you. Here is a description of the major scope items we are considering along with the special elements we can develop for you.

Unique Static Pages (non CMS)

The Osher Center site currently features about two dozen static pages, covering top-level areas like Home, Contact, and main section landing pages (e.g., About Us, Research, Clinic, Education), as well as their subpages (such as Our Center, Leadership, Advisory Boards, Careers, and specialized COVID-19 resources). All told, there are roughly 25–30 static pages on the current website.

Together we'll be re-analyzing the site structure with you to see if we can streamline or consolidate any pages. Our goal is to ensure only the essential pages remain, so that the final site is clear and efficient. These pages are largely informational. Whenever possible we will create templates for pages and content elements that we can use across the website. Webflow lets us create dynamic elements that can be easily edited globally. So if you want to improve these content blocks in the future, doing so will be easy.

CMS Post Types in Use

The current site uses several types of dynamic content, which we'll translate into Webflow's CMS collections in a way that's organized and easy to maintain. The primary CMS component is a News & Events feed (essentially a blog) covering updates, event announcements, videos, and interviews, all filtered by categories like Clinical Grand Rounds and Conferences. Beyond that, the site has custom post types for people—such as a "Service Providers" directory and Leadership profiles—as well as a collection of Research Awardees (past pilot grant recipients). Each of these is distinguished by a unique URL structure.

We plan to re-create or consolidate this content in Webflow, likely as three main collections: (1) News & Events, (2) People (which may unify providers and leadership), and (3) Awardees. We'll also replicate the site's category/tag structure using Webflow's reference or multi-reference fields to preserve filtering and organization.

As part of our overall site restructuring, we'll take a fresh look at these CMS elements to see if any can be combined or simplified. Our goal is to create a streamlined, flexible system that's easy for you to update and maintain.

Fortunately we can export and re-import all your existing posts without having to manually recreate them in Webflow.

Pages Needing Special Attention

Below are the site's more complex sections that call for careful planning and migration:

News & Events Listing

• Currently offers category-based filtering (e.g., "All, Clinical Grand Rounds, Conferences").
• Webflow does not natively provide dynamic filtering, so we may need either multiple category-specific pages or a we can use a custom filtering script.
• Alternatively, we could simplify the structure or rely on a single feed with categories to help users navigate.

Integrative Medicine Grand Rounds Page

• Features recurring event details, registration links, and a proposal submission form.
• We can handle the monthly schedule as static content or create a dedicated CMS collection for easier updates.
• Zoom registration links and embedded forms will be migrated carefully to preserve functionality.

People Directories (Leadership & Providers)

• Contains lists of individuals (with photos, titles, bios) linking to detailed profile pages.
• We'll recreate these using Webflow's CMS. We can either unify them under one "People" collection with categories or keep them separate (e.g., Leadership vs. Providers).
• External links (e.g., Harvard Catalyst) and internal references will be maintained.

Past Awards (Pilot Grants) Page

• Displays awardee names, project titles, and years, currently in a table format.
• We can either recreate the table manually or set up a CMS collection (e.g., "Awards") for easier long-term updates.
• Links to awardee profile pages will be preserved, ensuring no broken connections.

Classes & Events Integration

• The site lists class offerings (like Tai Chi workshops), which overlap with the broader events feed.
• We may create a single "Events" collection for all classes, conferences, grand rounds, etc. and use filtering to show relevant items on specific pages.
• If that's not feasible, we'll maintain a static page for classes, though a CMS approach is often more efficient.

Forms & Newsletter Signup

• The site includes contact forms and a newsletter subscription form.
• We'll replicate these in Webflow, ensuring all form fields, email recipients, and integrations (Mailchimp or otherwise) carry over.
• Any spam-protection measures (e.g., honeypot fields) will also be preserved.

Publications Page

• Offers a bibliography with outbound PubMed links, grouped by year.
• We'll accurately migrate all references, links, and special formatting.
• There's also an opportunity to make it more user-friendly with collapsible sections or filtering options, but at minimum, we'll preserve existing content.

SEO Preservation and Improvement

Maintaining the Osher Center's existing SEO value is a top priority during migration. Here are the key points:

Page Titles & Meta Descriptions

• Carry over existing titles and meta descriptions, adjusting only if improvements are clearly beneficial.
• This ensures search engine snippets remain accurate and familiar to users.

URL Structure & Redirects

• Whenever possible, use the same URL slugs (e.g., /about/our-center/, /research/..., etc.).
• If a URL must change, set up a 301 redirect to preserve inbound links and bookmarks.
• This approach prevents broken links and retains SEO equity.

Header Tags & Content Structure

• Preserve each page's hierarchy: one clear H1, relevant H2s, and so on.
• Keep crucial on-page text (e.g., mission statements) visible to maintain keyword focus.
• Avoid removing or hiding important headings and copy.

Schema Markup

• If the current site uses structured data (JSON-LD or similar) for events, people, or the organization, re-implement it in Webflow.
• If no schema is present yet, adding Organization or Event schema is a worthwhile upgrade.

Internal Linking Strategy

• Preserve existing internal links in text, navigation menus, and footers to maintain SEO benefits and user pathways.
• Recreate or update these links in Webflow to point to the corresponding pages.

Media & Alt Text

• Migrate all images with their alt attributes intact.
• Proper alt text supports accessibility and contributes to SEO.

Load Times & Indexing

• Webflow's code is typically optimized and fast-loading.
• Avoid large, uncompressed images or unnecessary scripts that could slow performance.
• Use Webflow's settings to mark staging or duplicate pages as "noindex," ensuring primary pages remain discoverable.

With careful planning, search engines will recognize the new site as a continuation of the old one. We'll also generate an updated XML sitemap and compare it to the original, confirming that all critical URLs are covered. This meticulous approach both protects existing rankings and provides opportunities to enhance SEO.

Design, Usability & Functionality Improvements in Webflow

Migrating to Webflow not only allows us to rebuild the site, but also to modernize and enhance it. Several improvement opportunities have been identified:

Streamlined Navigation & Information Architecture

Migrating to Webflow is an ideal time to reorganize overlapping menu items and consolidate related content in one location. Rather than having "Grand Rounds" appear multiple times, for instance, we can provide a single, clear reference and use cross-links where needed. This approach will give users a more intuitive experience and reduce confusion around where to find important information.

Responsive & Mobile Experience

Although the current site is responsive, rebuilding in Webflow lets us refine how pages adapt to various screen sizes. We can ensure tables or directories (like the Past Awards or People listings) are easy to navigate on phones and tablets, potentially turning large tables into collapsible lists. We can also replace long dropdown menus with a compact mobile-friendly interface so users can browse efficiently on any device.

Improved Performance & Accessibility

Webflow's code is optimized for fast page loads, but we will still compress images, minimize scripts, and ensure color contrasts and text sizes meet accessibility standards. This results in a faster, more inclusive site that benefits all visitors—and helps with search engine visibility.

Content Management Efficiency

By structuring content in Webflow's CMS, we make it easier for editors to update text and media. A new event, for instance, can be added once and displayed automatically on multiple pages. Consolidating similar content types (such as leadership and providers) into a single collection also prevents duplication. This makes for simpler content management and a more consistent user experience.

Better Error Handling & Linking

We'll comb through all existing links to resolve any outdated references. A custom 404 page will guide users back to key site areas if they land on a retired URL. This thorough approach ensures a polished, user-friendly experience and preserves internal link equity.

Search Functionality

Webflow includes a built-in search tool we can configure to index all pages and CMS items. This provides a more powerful search option for users looking to navigate content on research, events, clinical services, and more—all from a single search bar.

Future Expansion & Scalability

By setting up collections and design components strategically, it will be easy to add new pages or sections in the future without extensive development. This positions the Osher Center to evolve its online presence smoothly as new initiatives, programs, or resources become available.

Node base UI for network mapping

The app you used to use for network mapping is no longer supported. We can replace this functionality either with an embedded Kumu map https://kumu.io/ or we can create our own custom node-based interface. I was curious how difficult this would be so I just went ahead and did it: https://www.iriscocreative.com/node-graphic-ui-test

This is a simple demo of what we can do with Webflow and custom Javascript. This interface pulls from a local database but it could be configured to work dynamically with your own database. We can create an interface where users can submit their own nodes and connections.

Tools like this are easier to create than ever, but some functions will be easier to develop than others. Some functional requests may require additional budget to develop. This simple example took me only a few minutes to build.

Animations

Custom animations, when done mindfully, can dramatically improve the feel of a custom website. There's a few approaches we can take to creating custom animations. Whatever we do we'll want to avoid overwhelming the user with unnecessary motion. Accessibility is a key consideration as well, we don't want to create anything that would prevent any user from accessing the content they're looking for.

Animations are most effective when they are contained within graphic illustrations or used as interaction cues or when loading content. We can create custom animations using Adobe After Effects to create vector-based animated Lottie files. Or we can use custom Javascript to create more dynamic, interactive animations. During the course of our creative process we'll determine the most appropriate approach to creating these animations with you. Key calls to action—like "Donate" or "Join Our Mailing List"—can be emphasized through subtle animations or pop-ups that appear at opportune moments. Webflow also makes it easy to add simple loading or scroll based interactions that can make the whole site feel more alive and responsive.

Costs

Below are four proposed cost options for designing and building the Osher Center's new website. All three Webflow-based options share the same overall scope and process, but differ in the level of customization, branding, animations, and the number of revisions. Additionally, we've included a fourth option for building in WordPress, though this would come with certain trade-offs in terms of site dynamism and interactivity.

Required: Please select one or more of the options below to accept the proposal.