Professional Design Portfolio of Tony Hawkins

Introduction

The Problem

Objectives

Research

Personas

Wireframes

The Solution

Reflections

Eckhart Tolle Foundation

A complete redesign of the iconic Eckhart Tolle Foundation’s website.

See Official Site

Summary:

I led the Eckhart Tolle Foundation’s website redesign to better highlight its mission and impact, improving it’s branding, usability, and donation pathways to inspire giving.

Timeframe:

4 months

My Role:

UX/UI Designer & Researcher

UX/UI Designer

& Researcher

Tools

Figma, Wordpress,   Adobe Suite,

Zoom, Lookbak.io

Figma, Wordpress,   Adobe Suite,

Zoom, Lookbak.io

INTRODUCTION

Formed in 2016, the Eckhart Tolle Foundation focuses primarily on awakening human consciousness, as well as alleviating – and ultimately ending – the suffering created by the dysfunction of the egoic human mind. They accomplish this through making Eckhart Tolle’s teachings available to communities in need, and by funding and collaborating with like-minded organizations, especially those who work with youth and students, incarcerated people, hospice patients and the elderly, animals, and other vulnerable beings.

Who is Eckhart Tolle?

Eckhart Tolle, a globally renowned spiritual teacher, inspires millions with his teachings on living in the now . His bestselling books, The Power of Now and A New Earth, have been translated into over 50 languages, reaching readers across the globe. Through his talks, retreats and the Eckhart Tolle Foundation, he continues to advance his vision of global consciousness, offering resources that help individuals and communities embrace stillness, inner peace, and transformation.

Realize deeply that the present moment is all you ever have. Make the Now the primary focus of your life.

Impact Statistic

50M+ books sold globally.

Presence in 50+ languages and 100+ countries.

8.73M social media followers:

2.5 M

2.1 M

2.3 M

762K

225K

THE PROBLEM

The Eckhart Tolle Foundation’s website no longer effectively communicates its purpose or impact. The outdated design fails to clearly showcase what the Foundation does, making it difficult for users to connect with its mission. A lack of compelling content and an uninspiring layout further limit engagement, resulting in missed opportunities for deeper participation and giving. The Foundation believes that a modern, visually engaging redesign—one that highlights its transformative work—will not only enhance user connection but also inspire greater support and donations.

The Eckhart Tolle Foundation is dedicated to advancing global consciousness through the teachings of Eckhart Tolle. Its mission is to inspire individuals to live in the present moment, cultivate inner peace, and transcend ego-driven thinking. The website serves as a central hub for sharing Tolle’s teachings, providing access to resources such as articles, videos, and events.

How might we transform the Eckhart Tolle Foundation’s website into a more engaging, user-focused experience that authentically reflects its global impact, mission and cultivates connection?

OBJECTIVES & GOALS

I designed a Venn diagram to highlight the overlap in goals, providing a clear and engaging way to visualize shared objectives.

RESEARCH

Research Plan Overview:

My research plan centered on three essential steps: engaging with the client to deeply understand the project's challenges, vision, user pain points, and goals—laying a strong foundation for a design that truly resonates. Auditing the old site and performing a competitive analysis of other comparable websites.

Client Vision Meetings

I met with the client to understand their vision for the project, ensuring that their goals and expectations were clearly defined and aligned with the redesign strategy.

Key Meeting Insights

What I learned was that
• The website was 8 years old and was in need of a refresh.
• Some of the user pain points I learned of was that users struggled to see what the Foundation does or understand its impact.
• There was not enough areas that showed how users can get involved with events, programs, courses, etc.
• There was insufficient engaging content to encourage donations.
• The client expressed a clear vision for a modern, refreshed site that maintained a sense of stillness, with a strong focus on driving contributions as a key business goal.

Key Meeting Insights

What i learned was that:
• The website was 8 years old and was in need of a refresh.
• Some of the user pain points i learned of was that users struggled to see what the Foundation does or understand its impact.
• There was not enough areas that showed how users can get involved with events, programs, courses, etc.
• There was insufficient engaging content to encourage donations.
• The client expressed a clear vision for a modern, refreshed site that maintained a sense of stillness, with a strong focus on driving contributions as a key business goal.

Key Meeting Insights

• The website was 8 years old and was in need of a refresh.
• Some of the user pain points I learned of was that users struggled to see what the Foundation does or understand its impact.
• There was not enough areas that showed how users can get involved with events, programs, courses, etc.
• There was insufficient engaging content to encourage donations.
• The client expressed a clear vision for a modern, refreshed site that maintained a sense of stillness, with a strong focus on driving contributions as a key business goal.

Audit of the Old Website

Outdated Design

The overall look and feel of the website appeared dated and in need of modernization.

Content Deficiency

The site lacked new, engaging content.

Additional content was needed to clearly express what the Foundation does and its mission.

Impact Visibility

The impact of the Foundation was not effectively conveyed.

Structural Enhancements

Additional pages were required to better display content.

Layout improvements were needed for better user experience and content presentation.

Donation Accessibility

A more prominent donation call-to-action (CTA) was necessary to encourage and increase donations.

About Us Page

The About Us page needed a refresh.

Better headshots and an improved display of the organization’s hierarchy were required.

These findings formed the foundation for the redesign strategy to enhance user engagement, convey the Foundation’s mission, and drive support.

Competitive Analysis - SWOT Analysis

Competitive Analysis

- SWOT Analysis

Oprah Winfrey Foundation

Strengths: Strong branding, high-quality imagery, and clear CTAs.
Weaknesses: Heavy imagery may slow load times, limited interactivity.
Opportunities: Add interactive features, highlight global outreach.
Threats: Similar foundations with polished sites.

Holistic Life Foundation

Strengths: Simple, earthy design and clear navigation.

Weaknesses: Simple design may appeal less to tech-savvy users.

Opportunities: Add videos or infographics, share success stories.

Threats: Competitors with more dynamic designs.

Dear Jack Foundation

Strengths: Powerful storytelling, bold branding, clear CTAs.

Weaknesses: May focus too much on fundraising, bold design may not appeal to all.

Opportunities: Add educational resources, interactive donation trackers.

Threats: Competitors with more sophisticated UX.

Research - Key Takeaways

• Client Needs: A fresh, modern website that feels dynamic yet maintains a sense of stillness.

• Site Audit Findings:

• Outdated visuals and design diminished engagement.

• The old content was outdated and needed a refresh.

• Navigation challenges impacting user flow.

• Lack of engagement-driven elements.

• The old site's donation cues were too subtle to drive contributions effectively.

• Competitive Analysis Insights & How They Inform the Redesign:

Oprah Foundation;

Strong emphasis on storytelling and emotional connection/Heavy imagery may slow load times, limited interactivity.

• Takeaway: Incorporate compelling visuals and narrative-driven content to highlight the Foundation's mission and impact.

Holistic Life Foundation:

Clean, calming design that enhances user engagement/Simple design may appeal less to tech-savvy users

• Takeaway: Implement a minimalist aesthetic with intentional white space to align with Eckhart's teachings on presence and stillness.

Dear Jack Foundation:

Seamless donation experience with clear CTAs and progress indicators/May focus too much on fundraising, bold design may not appeal to all.

• Takeaway: Simplify the donation process with clear messaging, intuitive steps, and visual cues to show impact.

Research - Key Takeaways

• Client Needs: A fresh, modern website that feels dynamic yet maintains a sense of stillness.

• Site Audit Findings:

• Outdated visuals and design diminished engagement.

• The old content was outdated and needed a refresh.

• Navigation challenges impacting user flow.

• Lack of engagement-driven elements.

• The old site's donation cues were too subtle to drive contributions effectively.

• Competitive Analysis Insights & How They Inform the Redesign:

Oprah Foundation;

Strong emphasis on storytelling and emotional connection/Heavy imagery may slow load times, limited interactivity.

• Takeaway: Incorporate compelling visuals and narrative-driven content to highlight the Foundation's mission and impact.

Holistic Life Foundation:

Clean, calming design that enhances user engagement/Simple design may appeal less to tech-savvy users

• Takeaway: Implement a minimalist aesthetic with intentional white space to align with Eckhart's teachings on presence and stillness.

Dear Jack Foundation:

Seamless donation experience with clear CTAs and progress indicators/May focus too much on fundraising, bold design may not appeal to all.

• Takeaway: Simplify the donation process with clear messaging, intuitive steps, and visual cues to show impact.

PERSONAS

A typical Eckhart Tolle Foundation user is someone seeking deeper meaning, inner peace, and personal transformation. They are drawn to Eckhart’s teachings on presence and mindfulness, looking for resources to integrate stillness into their daily lives. To represent this audience, I created two key personas:

The Fulfillment Seeker – Someone navigating life’s challenges, searching for wisdom and practical tools to find purpose and balance.

The Seeker of Stillness – An individual longing for inner peace, drawn to Eckhart’s teachings to cultivate mindfulness and deepen their

spiritual journey.

These personas helped guide design decisions, ensuring the new site resonates with the Foundation’s audience.

The Fulfillment Seeker – Someone navigating life’s challenges, searching for wisdom and practical tools to find purpose and balance.

The Seeker of Stillness – An individual longing for inner peace, drawn to Eckhart’s teachings to cultivate mindfulness and deepen their

spiritual journey.

These personas helped guide design decisions, ensuring the new site resonates with the Foundation’s audience.

FEATURE REQUIREMENTS

Feature Set & Requirements

Following multiple discussions with the client, we established key priorities for the redesign, building upon the existing website’s foundation while introducing critical enhancements to better serve users and support the foundation’s mission.

Key Additions & Improvements
- New Pages: A Programs page to highlight offerings and an Impact Stories page to showcase real-world transformations.
- Expanded Content: New impactful photo videos and testimonials to better communicate the Foundation’s purpose and encourage deeper engagement.
- Donation & Book Requests: A revamped donation experience and a more seamless request process for Eckhart’s books.
- Site Optimization: Improved load times and overall performance to enhance user experience.
- Branding & Aesthetics: A refreshed design that aligns more closely with the Foundation’s identity and inspires connection.
- Encouraging Giving: Thoughtfully crafted content and design strategies to drive donations and support.

Feature Set & Requirements

SITEMAP & USER FLOW

Key Highlights:

- Addition of two new pages, with potential for more as content expands.
- Stakeholder discovery meetings identified evolving site goals.
- Flexibility is key to accommodating future growth.
- Scalable, content-rich user experience was a priority.

The donation page was revamped for a smoother user experience, offering more flexibility and the option to support specific causes. A clearer layout and intuitive design make the process seamless. Here is the new user flow:

DESIGN

Strategy & Ideation

To kick off the redesign, I used the existing site as a reference point, which allowed me to understand its strengths and areas for improvement. From there, I began sketching wireframes to explore different layouts and structures. I had a clear vision of incorporating specific colors into the design, which would come to life further down the line. I knew that a conventional template wouldn’t suit the direction I wanted to take, so I focused on creating a unique, tailored solution to meet both the client's and users' needs

Strategy & Ideation

Wireframes - Low Fidelity Sketches

Initial sketches of the mobile screens Home Page.

Here i mapped out the key screens and new layout ideas in a bit more detail.

I experimented with different footer designs in hopes of creating a new vibe and energy to spice things up if you will.

Wireframes - Low Fidelity Sketches

I created mid-fidelity wireframes to give the client a clear, structured preview of the site’s layout and functionality. Each wireframe was annotated to explain design ideas, choices and user interactions, ensuring clarity and alignment with the project goals. The client appreciated the direction and found these early visuals helpful in understanding how the redesign would bring their vision to life.

Wireframes - Low Fidelity Sketches

The high-fidelity screens I created are a significant improvement over the old version, featuring a polished, modern design that enhances both aesthetics and usability.

BRAND IDENTITY

For the redesign, I focused on creating a visually cohesive experience that aligns with the Foundation’s mission while introducing fresh, modern aesthetics.

Color Palette & Symbolism

I chose a deep purple as a primary color due to its strong association with spirituality, wisdom, and introspection—values deeply embedded in Eckhart Tolle’s teachings. Complementing this, I incorporated a bright teal, a color often linked to clarity, communication, and renewal, reinforcing the sense of openness and transformation that the Foundation promotes.

Design Elements & Layout

I introduced flowing, organic design elements throughout the site, subtly evoking a sense of movement and presence. This approach extended to the footer section, where fluid, asymmetrical shapes were used to break away from conventional layouts, adding a unique, mindful touch. The footer design was also inspired by the Pause symbol often associated with Eckhart’s teachings, reinforcing the theme of stillness and mindfulness.

Navigation & User Experience

The navigation menu received a modernized aesthetic, enhancing usability while aligning with the updated design language. The client particularly loved this new approach, as it provided a cleaner, more intuitive browsing experience.

Typography & Continuity

To maintain brand consistency, I retained the typography from the previous design, as it is used across the Foundation’s promotional materials and main website. This decision ensured seamless integration across platforms while allowing for fresh design enhancements.

Raleway

H1 65PX

H2 40PX

H2 28PX

body 16PX

small 14PX

Every new design choice was made with the goal of reinforcing the Foundation’s identity while improving engagement and accessibility.Layout

KEY CHANGES

This testimonial section is just too text heavy

Text Testimonials to Visual Ticker Testimonials

The new testimonila section i brought it to life incorporating the real indivuals images in a ticker syle

Text Testimonials to Visual Ticker Testimonials

The new testimonila section i brought it to life incorporating the real indivuals images in a ticker syle

Improved mobile menu layout

much more legible wit a clear CTA

Text Testimonials to Visual Ticker Testimonials

To push beyond conventional design norms, I sought opportunities for more creativity. The footer stood out as the perfect space to experiment, so I explored asymmetrical shapes to create a more dynamic and engaging design—incorporating the pause symbol was a meaningful bonus. Additionally, the content of the footer section was greatly improved, making it more functional and informative.

I implemented a new step on the contact page to reduce misdirected emails, which were causing unnecessary workload for the client.

A confirmation question now prompts users to verify they are contacting the correct support channel, keeping input fields disabled until they select "yes" or "no." This simple addition has significantly cut down on erroneous emails, saving the client valuable time, and they couldn't be happier with the improvement.

The companies the Foundation wanted to recognize were originally presented in a simple text format. I first transformed this into a visually engaging logo set and then made it dynamic by incorporating them in to a scrolling ticker.

BEFORE & AFTER

Before redesign

After redesign

After

redesign

I created a sense of continuity by standardizing headshots with one of four background colors and replacing outdated or inconsistent images with more updated, professional-looking ones.

Before redesign

the original homepage had too much text very muted colors and no dynamic content

After redesign

Dynamic content achieved with a Parallax effect

The new site is vibrant has new dynamic content and has a much improved layout

Before redesign

After redesign

Revamped the Donations page by simplifying content, reducing text, and introducing new giving options. The new design enhances clarity, improves usability, and creates a more engaging donation experience.

ITERATIONS

New Programs Page Interactive Banner

I updated the Programs page banner image, replacing a single static photo with a dynamic four-image layout. Each image now highlights a specific program, enhancing functionality and aesthetics. The clickable images allow users to navigate directly to their respective sections, creating a seamless and engaging experience while effectively showcasing the breadth of the Foundation's offerings."**

This testimonial section is just too text heavy

New Programs Page Interactive Banner

The Request books is an important part of the site. Here i made a fix to the button layout to avoid any confusion

Social Impact Stats section

On the homepage, the Social Impact section originally featured five key statistics. I added a sixth—*Individuals Served*—and carefully refined the descriptions of each to ensure accuracy and inclusivity. Thoughtful updates, such as changing *Incarcerated* to *Incarcerated Individuals* and *Universities and Schools* to *Non-Profits and Schools Served*, were made to respectfully represent the diverse communities the Foundation supports.

On the homepage, the Social Impact section originally featured five key statistics. I added a sixth stat—

'Individuals Served'—and carefully refined the descriptions of each to ensure accuracy and inclusivity. Thoughtful updates, such as changing 'Incarcerated' to 'Incarcerated Individuals' and 'Universities and Schools' to 'Non-Profits and Schools Served', were made to respectfully represent the diverse communities the Foundation supports.

This testimonial section is just too text heavy

USABILITY TESTING & VALIDATION

Usability Test Sessions

I performed usability testing with five participants aged 26–52, I organized the feedback into an affinity map to identify patterns and key insights. This collaborative exercise helped group user comments into common themes, highlighting what was working well and where further improvements could be made—providing valuable direction for refining the final design.

Affinity Map & Key Takeaways

The feedback analysis revealed several key themes, with layout improvements and design praises emerging as the most common. Suggestions for enhancements provided clear opportunities to refine the experience, while the positive feedback validated many of the design decisions, giving me confidence in what was working and where to focus next.

FINAL DELIVERABLE

• Improved Usability: The redesign significantly enhanced the user experience, making navigation more intuitive and engaging.
• Increased Engagement: Dynamic content and interactive elements resulted in a more captivating browsing experience.
• Positive Feedback: Stakeholders and users praised the redesign as a major improvement, with several noting the upgraded visuals and functionality.

CHALLENGES

Like any ambitious project, this redesign came with its share of obstacles. Delays, unforeseen issues, and difficult decisions occasionally disrupted the flow of progress. These challenges required careful coordination, creative problem-solving, and a commitment to staying aligned with the project’s goals. The list below highlights some of the key difficulties faced during the build.

• Delays in New Images & Videos – Had to wait for events to take place before obtaining necessary media.
• Limited Headshot Availability – Eckhart Tolle is known for not taking photos for this type of use case, which required alternative visual solutions.
• Client-Side Access Delays – Challenges in obtaining credentials for Mailchimp, form-building tools, and other essential accounts.
• Dependency on AV Team – Had to wait on the client’s AV team for specific content approvals and updates.
• Scheduling Coordination – Aligning availability for meetings proved challenging.
• Clearance for Names & Testimonials – Obtaining consent for individual mentions in videos and testimonials was time-consuming.
• Hosting & Development Issues – Worked with a developer to resolve hosting, domain, and custom CSS challenges.

Client Marketing

Campaign Video

Outcomes and User Reception

OUTCOME AND RECEPTION

Outcomes and User Reception

Global Impact: Showcased the Foundation’s worldwide presence and long-lasting influence. The client loves the re-design and showcased it on social media

Improved Usability: Enhanced navigation for a more intuitive and engaging user experience.

Increased Engagement: Dynamic content and interactivity created a more captivating browsing experience.

A New Precedent: Established a design system adaptable for other areas like social media and potentially the flagship .com site.

New Opportunities: Opened doors for greater marketing and collaboration potential.

Overall Positive Feedback: Stakeholders and users praised the upgraded visuals and functionality.improvement

Global Impact: Showcased the Foundation’s worldwide presence and long-lasting influence. The client loves the re-design and showcased it on social media

Improved Usability: Enhanced navigation for a more intuitive and engaging user experience.

Increased Engagement: Dynamic content and interactivity created a more captivating browsing experience.

A New Precedent: Established a design system adaptable for other areas like social media and potentially the flagship .com site.

New Opportunities: Opened doors for greater marketing and collaboration potential.

Overall Positive Feedback: Stakeholders and users praised the upgraded visuals and functionality.improvement

Client Testimonial:

"We recently partnered with Tony Hawkins at TeeHawk Design to redesign the Eckhart Tolle Foundation website, and the results are exceptional. Tony took the time to understand the organization's needs and goals, and then translated our vision into a dynamic and engaging online experience. I was particularly impressed with how Tony balanced our desire to maintain the existing site structure and brand identity while modernizing the site. Throughout the process, Tony was responsive, creative and communicative, keeping us informed along the way. His willingness to go the extra mile, including suggesting innovative features we hadn't considered, resulted in a website that exceeded expectations. I highly recommend TeeHawk Design to any organization looking to enhance their website”

-Aly Waibel

Executive Director

Eckhart Tolle Foundation

Conclusion/RefIections

The Eckhart Tolle Foundation website redesign transformed an outdated, static platform into a modern, dynamic, and visually stunning experience. Despite challenges like limited user access, legacy elements, and image availability, the project achieved its goals by balancing aesthetic appeal with functional upgrades. The new design not only meets the Foundation’s current needs but also positions it for future growth and success

Future Plans/Recommendations

Continue to add new and engaging content.
Additional Pages for a new courses curriculum
Interactive content

See next projects

Get-A-Glimpse

Anthem Tattoo

Fairway 2 Heaven

Lets Connect!