Hi Aterah,
It was wonderful meeting with you last week and starting to learn about the Osher Center for Integrative Health. It sounds like a wonderful organization. We would love for Iris to help this organization develop a more user-friendly, attractive, and useful digital presence.
This website, oshercenter.org, was created almost 10 years ago. Technologies have evolved considerably in this time. This proposal describes a process we'd lead you on to completely re-design and re-build this website using more advanced and easier to manage tools and systems.
The process starts with a deep-dive into content and information architecture. We want to build a user experience strategy grounded in purpose, function, and outcome. Then we'd move into design, aesthetics, brand, and user interface strategy. Finally we would completely rebuild the website on Webflow. The result will be a much more intuitive, more responsive, more alive and dynamic web experience for your users and your team.
Excitedly,
James and Team
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.
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:
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.
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:
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.
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.
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.
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.
We use WebFlow because it allows us to build beautiful, dynamic, and highly responsive websites quickly and efficiently.
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.
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.
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.
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.
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.
Below are the site's more complex sections that call for careful planning and migration:
Maintaining the Osher Center's existing SEO value is a top priority during migration. Here are the key points:
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.
Migrating to Webflow not only allows us to rebuild the site, but also to modernize and enhance it. Several improvement opportunities have been identified:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
In this most streamlined package, we focus on a lean development process, minimal brand enhancements, and a simpler approach to animations and node-based UI.
This package includes:
Animations will be kept to simple Webflow interactions, with standard accessibility checks and responsive design.
At this level, we provide a stronger brand refresh, moderate custom animations, and the option for a lightly customized node-based interface—along with more design and development reviews. This package allows for a more expansive site architecture and richer visual storytelling.
This package includes:
We'll incorporate moderate custom animations (e.g., select Lottie files or scroll interactions) and enhanced accessibility considerations. The node-based UI can either be an embedded Kumu map or a semi-custom solution.
This top-tier Webflow option includes a comprehensive brand overhaul, richer animations, and a fully custom-coded node-based UI if you want maximum interactivity. It also offers multiple design iterations, deeper accessibility work, and thorough reviews before launch.
This package includes:
We pay special attention to accessibility (ARIA labels, color contrast, etc.), advanced responsiveness, and performance optimization. This option provides ample time for multiple feedback loops and a highly polished final result.
If WordPress is preferred, this option supports large amounts of content and offers a familiar CMS. However, achieving the same dynamic effects you get in Webflow often requires heavier development and more plugins. Even then, some of Webflow's effortless responsiveness can be challenging to replicate.
This package includes:
Please note that a WordPress build is likely to be less dynamic and responsive than our Webflow options, given the extra complexity and plugin dependencies involved.