Project Details
Client: Tony Robbins
Role: UX/UI Designer
URL: thetonyrobbinsfoundation.org
The Anthony Robbins Foundation is a non-profit organization created to empower individuals and organizations to make a significant difference in the quality of life of people often forgotten – youth, homeless and hungry, prisoners, elderly and disabled. The Foundation is dedicated to creating positive change in the lives of people who simply need a boost, envisioning a happier and deeply satisfying way of life.
I was tasked with a complete redesign of the site, and this case study outlines my process, The goal is to improve the overall brand presence of the Anthony Robbins Foundation, providing a more intuitive user experience, while simplifying the process of giving back.
The Problem
Identify & define
The Foundation has a wealth of useful information; however, the old site design presents the user with a sense of “information overload” with an overwhelming abundance of content, making it difficult to contribute or volunteer. The primary tasks a user would complete on the site were often buried under layers of content.
Task-Based Analysis
What are users trying to accomplish on the site?
Donations
The current structure displays a red “Donate” link within the main nav at the top of the page. The link leads the user to a page with 6 CTA buttons. Despite the bright color, link gets lost in the remainder of the content. The Donate page is cluttered with redundant CTAs, all leading to the same place, resulting in user frustration, as so many unnecessary options are presented.
Basket Brigade
The Basket Brigade is a meal donation service that the site was built upon; a critical component to this site, that needs more exposure. Currently, the site displays a module on the home page, as well as a child link in the main nav. On click, the user is taken to a map with several locations. Despite the significance of this program, it is unclear what exactly it is.
Volunteer
The site contains a volunteer module on the homepage, as well as a child link within the main nav. The site contains a great multitude of content on the homepage, that the user may feel overwhelmed with information. This can lead to user frustration and potential site abandonment.
Gift Shop
The Gift Shop is a key element to the Foundation’s success. Presently, the site displays a “Gift Shop” link in the upper main nav. Link loses its significance and gets lost in a sea of content.
Competitor Sites
Analyzing the Trends
The discovery phase included an analysis of various philanthropic and non-profit sites, which were compared for design patterns and common trends. The findings were then examined and applied as an appropriate design treatment for the rebranding of the new site.
Key Takeaways
- Bold, vibrant color palette sets a warm and friendly tone
- “Donate” button located in upper right corner
- Significant use of whitespace showcases the content
- Statistics outlining non-profit’s impact displayed
- Flat and modular layout design
"Only those who have learned the power of sincere & selfless contribution experience life’s deepest joy: true fulfillment."
-Tony Robbins
Wireframing
From Sketching to Sketch
Once data had been thoroughly analyzed, ideations were roughly sketched out and then moved into Sketch for wireframing. Determining the structure for each critical page allowed us to determine a proper layout before moving on to full UI.
Working in collaboration with another Designer, allowed us to create a new layout using their predefined typography, logo and color palette.
The Solution
To maintain user expectations and keep consistent with majority of other non-profit sites, display the “Donate” CTA as a button in the upper right hand corner of the page. Maintain this static nav across the site. Streamline the donation page by consolidating into one button. Less choice, more action.
In order to encourage interaction with the International Basket Brigade, we must first inform the users about the program. On the Basket Brigade page itself, clarify what the program is in the header, then move on to how to take action. Display as first parent nav item, as well as module listed under Programs. By fully understanding what the program entails, the users are more inclined to participate.
Given that Donations is yet another common task, update the navigation and place directly next to the “Donate” CTA. These two tasks should live together in the upper right hand corner of the site.
To draw more attention to the online store, create a module on the home page highlighting any new items. In addition, dedicate space to feature any specials or promos, to further increase transactions.
The Outcome
Making an Impact
No more information overload! The new simplified layout now allows the content to breathe, so a user can easily give back. Statistics give users a visual representation of the difference their contributions make, and further encourage participation.
This design now caters to the primary tasks of the site: Donations, Basket Brigade, Volunteer and Gift Shop. Essentially, this improved design allows users an improved user experience to quickly and easily accomplish their goals on the site.
