Source of Synergy
Website Design & Development Proposal
Nondual Temple
Website Design & Development Proposal
Introduction
Hi Hannes & Carina,
Here is a proposal for creating 2 websites together. I've shared a lot about our new model, but perhaps our old way of working might be what works best for this project. Of course it is not 'old', it is always evolving. But there are processes and patterns I've come to learn and employ over many years of leading creative projects.
The scope of the websites in question (exactly what will need to be included/considered), is still unclear to me. But, I want to share this proposal with you to give you a sense of this structure and format.
We can discuss specifics about how many pages will be needed, what level of graphic developement, wether or not there will be any animations and how complicated are they. These questions can affect total cost significantly, but we can also design the project around a timeline and a budget.
Premise
The Nondual Temple, founded by Hannes Michel, serves as a spiritual sanctuary where individuals can discover their true nature through nondual awareness, timeless wisdom, and unconditional love. Currently, the online presence doesn't fully convey the depth and transformative potential of the Temple's offerings, limiting its ability to reach and support those seeking authentic spiritual awakening.
A thoughtfully redesigned website can address this by creating an immersive digital space that embodies the Temple's essence while clearly presenting its programs, mentoring opportunities, and community connections. Our goal is to develop a site that resonates with the energy of the Nondual Temple—welcoming, profound, and accessible—while effectively communicating Hannes' unique approach as an integral mystic, psychologist, and spiritual guide.
This project extends beyond a simple website update—it's about creating a digital extension of the Nondual Temple that serves as both a gateway for newcomers and a nurturing space for existing community members. By integrating modern design principles with the timeless wisdom Hannes embodies, we can craft an online experience that authentically represents the Temple's mission to support universal awakening.
Hannes Michel Personal Website:
As a transpersonal psychologist, nondual scientist, and integral mystic, Hannes Michel brings exceptional credentials and transformative insights to his work. His current personal site fails to showcase the distinctive blend of academic expertise and spiritual realization that defines his approach.
The redesigned website will create an intuitive journey through Hannes' background and methodology, highlighting his ability to bridge ancient wisdom traditions with contemporary psychological understanding. This digital platform will reflect both his scholarly qualifications and profound spiritual experiences, making his teachings accessible to seekers at various stages of their awakening process.
This redesign represents an opportunity to create an authentic digital expression of Hannes' presence and commitment to guiding people through emotional blocks toward discovering their essential nature.
A full design and development process ideally takes place over 8–12 weeks, and we'll collaborate to set a clear deadline and work backward from there. A launch date by mid July 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 skillsets 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. Then as lead consultant/facilitator, I (James) will kick off the creative process with you in one, or two (or more) 'Creative Visioning Sessions'. In these 1.5 - 2hr meetings, we'll dig into who you are, what you're doing, and most importantly, why. I want to feel like I'm inside your organization and co-creating 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'll look at structure, strategy, content, and branding. We can build on what you already have
We can develop 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 assets for us to use in later stages.
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:
- 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.
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.
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.
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
We've done an analysis of hannesmichel.de and I will share some considerations given this existing site. We know we will be re-building this site from the ground up but this helps us orient to the existing website as we design the new one.
There are 5-7 main content pages on the website
- Home: Introduction to Hannes Michel and his institute.
- Institut: Details about the institute, its philosophy, and offerings.
- Psychological Counseling: Information on counseling services.
- Spiritual Orientation: Details on spiritual guidance and nondual teachings.
- Nondual Temple: Description of the "Nondual Temple" and enlightenment training.
- Mindfulness Trainings: Open mindfulness groups, courses, and methods.
- Contact: Email and phone for inquiries and registration.
- Accessibility: No indication of accessibility features (contrast, font size adjustment, alt text, etc.).
- Mobile Responsiveness: Not specified, but should be a priority for a modern redesign.
- Performance: With mostly text content, the site should load quickly, but optimization for images and scripts (if any) is necessary.
- Contact Mechanisms: Currently relies on email and phone; adding a secure contact form would enhance usability.
- Multi-language support: This site currently has English and German languages available.
Below are the site’s more complex sections that call for careful planning and migration:
1. Mindfulness Trainings Page
Currently presents information about ongoing mindfulness groups, courses, and methods, but lacks an event calendar or registration system.
- If you want to offer dynamic scheduling or sign-ups, consider integrating a CMS collection for events or a third-party booking tool.
- Alternatively, maintain a static listing but ensure content is easy to update and filter as offerings grow.
2. Nondualer Tempel (Nondual Temple) Page
Describes recurring enlightenment training sessions and group meetings.
- If meetings are scheduled regularly, a dynamic calendar or events feed could improve usability.
- Consider adding registration or RSVP functionality if demand is high, or keep as static content for simplicity.
3. Contact Page
Currently provides only an email address and phone number in text format.
- To enhance user experience and security, implement a contact form with spam protection (honeypot or CAPTCHA).
- Ensure GDPR compliance by including a privacy notice and consent checkbox.
4. Philosophical/Long-form Content Pages
Several pages (e.g., Institut, Psychologische Beratung, Spirituelle Orientierung) contain dense, text-heavy sections.
- Break up content with clear headings, summaries, and bullet points for scannability.
- Add internal links and anchor navigation to help users jump to relevant sections.
- Consider adding collapsible sections or accordions for lengthy explanations.
5. Legal/Privacy Policy Page
No visible privacy policy or cookie consent.
- Add a dedicated privacy policy page and cookie consent banner to ensure GDPR compliance.
- Content Structure: Content is rich but may lack clear headings, meta descriptions, and keyword optimization. Use structured headings (H1, H2, H3) and simple, descriptive URLs.
- URL Structure: Uses German-language URLs (e.g., /institut/), which is appropriate for the target audience2.
- Internal Linking: Should ensure logical internal links between related topics (e.g., from "Mindfulness Trainings" to "Contact").
- Schema Markup: Consider adding structured data for local business, person, and event (for trainings/courses).
- Page Titles & Meta Tags: Each page should have a unique, keyword-rich title and meta description.
- Alt Text: If images are added, ensure all have descriptive alt attributes.
- Loading Speed: Optimize for fast loading, especially for mobile users.
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
Webflow lets us refine how pages adapt to various screen sizes. We can ensure tables or directories 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 into a single collection also prevents duplication. This makes for simpler content management and a more consistent user experience.
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 Nondual Temple to evolve its online presence smoothly as new initiatives, programs, or resources become available.
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
I've designed a few package options for our journey together. At any of these levels we can recreate the Hannes Michel website and build the Nondual Temple. Any package will bring us to the destination we've been discussing together. We can do any of these packages over a course of 8-12 weeks. The larger packages include more time for iteration, exploration of ideas, and development of special features/functions.
Payment terms: we request a 50% up-front deposit. 25% is due after the Design stage is completed, and the final 25% due at launch. Adjustments to scope can be discussed at any time if more support is needed.
Our base level package is still comprehensive. We'll employ a design and development process that is thorough but to the point. This engagement includes minimal brand enhancements, content facilitation, creative guidance, and a complete, but limited final product. This package gives us enough space to explore possibilities and potentials but limits iterations and review cycles. Sticking to a clear path will be key for achieving the design we want within this budget.
This package includes:
- 1-2 Strategy Sessions
- Sitemap creation process
- Mood-Board Facilitation
(Visual inspiration gathering) - Visual Strategy Development
(Articulating a visual strategy) - Brand Guideline creation process leveraging existing logo
Level 1 - (typographies, colors, logos, buttons, and standard graphic elements) - Creative Brief
to guide the rest of the process
- 1-2 Vision Sessions
- Content Doc and Content Facilitation/Content Coaching
Level 1 - (it’s largely up to you to prepare your content, we help you find the words and create the structure with you) - Visual Story Process
Exploring together the visual story we want users to experience - Pattern and/or Visual Language Exploration
- 1 Primary Design Review
- 1 Design Sign-off Session
- Website Design Process in Figma
- Up to 5 Unique Page Designs
(additional pages can use the same or similar designs) - Up to 7 Unique Graphic assets
Can include, illustrations, icon sets, patterns, artworks - Simple Animation Creation
Animations will be kept to simple Webflow interactions, with standard accessibility checks and responsive design.
- 1 Primary Development Review
- 1 Final Sign-off Session
- Development of up to 5 Unique Pages and 5 Additional Similar Pages.
- Webflow Website Development Process
- Fully Responsive Development (mobile version)
- 1 - 3 CMS customizations
(custom post types, blog, resources, etc) - Development of 1 custom Special Function (membership access, online course delivery, etc)
- Simple SEO Optimization
- Testing and Launch Process
- 1 Round of Bug Fixes and Alterations
- 1 Recorded Training Session on How to Use your Website
At this level we can spend a lot more time exploring strategies and visioning together. We can also achieve more page designs and special website features like a membership area and product automations.
Differences from Package 1 are underlined in gold
This package includes:
- 2-3 Strategy Sessions
- Sitemap creation process
- Mood-Board Facilitation
(Visual inspiration gathering) - Visual Strategy Development
(Articulating a visual strategy) - Brand Guideline creation process leveraging existing logo
Level 2 - (typographies, colors, logos, buttons, mobile and desktop variations, organized graphic assets, image styles, usage guidelines, and standard graphic elements) - Detailed Creative Brief
to guide the rest of the process
- 2-3 Vision Sessions
- Content Doc and Content Facilitation/Content Coaching
Level 2 - (deeper content massaging and copywriting assistance) - Visual Story Process
Exploring together the visual story we want users to experience - Extensive Pattern and/or Visual Language Exploration
- 1-2 Primary Design Reviews
- 1 Design Sign-off Session
- Website Design Process in Figma
- Up to 7 Unique Page Designs
(additional pages can use the same or similar designs) - Up to 10 Unique Graphic assets
Can include, illustrations, icon sets, patterns, artworks - Animation Creation
More advanced animations are possible at this level
- 1-2 Primary Development Reviews
- 1 Final Sign-off Session
- Development of up to 7 Unique Pages and 7 Additional Similar Pages.
- Webflow Website Development Process
- Fully Responsive Development (mobile version)
- 2-4 CMS customizations
(custom post types, blog, resources, etc) - Development of 1-2 custom Special Functions (membership access, online course delivery, etc)
- SEO Strategy Development
- Testing and Launch Process
- 2 Rounds of Bug Fixes and Alterations
- 2 Recorded Training Sessions on How to Use your Website
If we wanted to build out an extensive feature list for the website here's how it can look. At this level we can build a membership site (free and paid), online course delivery, product automations, event system, and newsletter marketing automations.
Differences from Package 2 are underlined in gold
This package includes:
- 3-4 Strategy Sessions
- Sitemap creation process
- Mood-Board Facilitation
(Visual inspiration gathering) - Visual Strategy Development
(Articulating a visual strategy) - Brand Guideline creation process leveraging existing logo
Level 3 - (comprehenisive brand booko creation) - Detailed Creative Brief
to guide the rest of the process
- 2-3 Vision Sessions
- Content Doc and Content Facilitation/Content Coaching
Level 3 - (complete content facilitation and copywriting assistance) - Visual Story Process
Exploring together the visual story we want users to experience - Extensive Pattern and/or Visual Language Exploration
- 2-3 Primary Design Reviews
- 1 Design Sign-off Session
- Website Design Process in Figma
- Up to 10 Unique Page Designs
(additional pages can use the same or similar designs) - Up to 14 Unique Graphic assets
Can include, illustrations, icon sets, patterns, artworks - Advanced Animation Creation
More complex animations are possible at this level
- 2-3 Primary Development Reviews
- 1 Final Sign-off Session
- Development of up to 10 Unique Pages and 10 Additional Similar Pages.
- Webflow Website Development Process
- Fully Responsive Development (mobile version)
- 3-5 CMS customizations
(custom post types, blog, resources, etc) - Development of 4-5 custom Special Functions (membership access, online course delivery, etc)
- SEO Strategy Development
- Testing and Launch Process
- 3 Rounds of Bug Fixes and Alterations
- 3 Recorded Training Sessions on How to Use your Website
Next Steps
Just let me know which package you'd like to choose and we can layout a timeline and schedule meetings for the coming weeks.
In loving service,
James Redenbaugh and the Iris Cocreative team
All images in this proposal were generated for this project by us in MidJourney and edited in Photoshop
