Toronto Environmental Alliance (T.E.A)
Project Overview
Redesigning the existing website and know the usability issues that could be fixed through design to help the cause maximize its reach. To understand what was the main goal of this cause and what could be further done to help the cause succeed.
Problem
- A redesign was necessary to address these shortcomings and improve its overall impact.
- Key issues included ineffective call-to-action elements and underperforming KPIs.
- It struggled to reach its full potential and engage its target audience.
- The website aimed to support an important cause but failed to effectively cater to it due to its design limitations.
Design Process
Donations made easy
Easy way to stay up to date
Easy way to share
Research
There was a lot of scope and potential for this organization to grow in terms of it's beliefs and actions.
The audience online and the website responsiveness was telling us otherwise so we really had to focus on bettering the existing system while maintaining it's core values and niche.
I interviewed 5 different participants from different walks of life and got a few interesting insights regarding the outlook of life and saving the world together.
"I often struggle to find reliable and consolidated information about environmental causes."
"It would be helpful if the website had clear steps on how to participate in local initiatives."
"I want visuals that inspire me, like real-world examples of the impact of environmental activities."
"I rely on social media and blogs for information, but it's often scattered and incomplete."
"Seeing measurable outcomes and transparent impacts motivates me to take action."
User Journey Map
In order to visual how users can track their carbon footprint along with information on how they can be involved with environmental activities, I created a User Journey Map. The journey map involved a scenario where the user wants to give back to environment with a reliable source and is able to do by reviewing the website.
Define
A User Persona was created that resonates with their goals, needs, and frustrations. Referring back to the persona during this design process keeps me aligned with the user goals and helps me solve the problems users have.
Following this, an Empathy map was put together to understand the Goals, Actions, Emotions, and Pain Points of our persona.
User Flow
Wireframes
Low Fidelity frames
High Fidelity frames
Prototype
UI Design
Style guide
I explored different colours and styles before deciding on a final colour scheme. Taking inspiration from the original colours on the website but creating a better contrast and value in terms of size. Placement of all the call to actions and menus on the basis of design principles of Gestalt.
Final Thoughts
I successfully achieved the goals I set at the start of the process. My redesign included the main page, the news page, and the donation page, ensuring a consistent flow and accessibility while adhering to the brand guidelines for design inspiration.
One of the most exciting aspects of this project was collaborating with the stakeholder, who provided valuable insights into the company's background and future plans. Their feedback validated my design improvements, aligning with the changes they were already envisioning, which gave me confidence in our approach.
If I had more time, I would focus on further enhancing the features to elevate both the functionality and aesthetics of the website. These refinements would add even greater value to the overall user experience.
There's more
Do you like what you see?
Feel free to reach out for any collaboration, get in touch!
