Toronto Environment Alliance

Toronto Environmental Alliance

For over 30 years, Toronto Environmental Alliance has campaigned locally to find solutions for Toronto’s urban environment problems. Donors and users were confused with the website’s purpose and had difficulty locating information on local programs. How might we make the website responsive to different devices and drive attention to the main call-to-action which is to increase donation?

Role: worked with Natasha and Summayya on this project. We shared the work equally and each took on the role of UX Researcher, UX Designer and UI Designer.

Prototype

The Process

Empathize

Define

Ideate

Prototype

Test

Opportunities

Built the proto persona before diving into qualitative user interviews. Consolidated the data from user interviews with the help of the Affinity diagram and Empathy maps to curate the user persona, Green Gabriella, who is an environment conscious Toronto resident who wants to see an impact in her immediate environment.

We also did an extensive user survey to better understand the behavior and needs of our user, and found that over 58% of the respondents were involved in Environmental issues and 100% of them wanted resources and guides on ways to recycle. While 91% of the respondents recycle regularly, only 41% monitors their waste production.

In addition to this, we also completed a stakeholder analysis by interviewing our stakeholder – employees of TEA. We understood that the website has not been updated since 2015, and that their main goal is to get users to engage more by donating and reading articles and blogs on the website. Click Here!!!

Toronto Environment Alliance can expand the reach of their programs to all of Ontario. Additionally, they have an opportunity to create an app that tracks your carbon footprint which would further add value to the programs they already offer.

We conducted two types of user tests: 5 second test to test the effectiveness of Call to Action, and A/B testing to determine the most optimal footer and header.

Our Usability test focussed on finding out if users were able to identify the main Call-to-Action – to Donate. We found that users were able to access the ‘Make a Donation’ page, subscribe to Tea’s newsletter and read articles.

We built a mid fidelity prototype with no images and clean layout. Based on the user research conducted and the heuristic evaluation, we decided to focus on a layout that supported more images and minimal text for easy retention and maximum impact. We also kept all Call-to-Actions as direct and clean as possible.

After creating a mood board , we built the UI Style Tile with accessible colors, typography and iconography for a consistent brand outlook. We added red to the color palette so it can compliment green and also act as a visual indicator to highlight error messages when users are interacting with the interface.

After consolidating user testing on the mid fidelity prototype, we built the high-fidelity mobile and desktop prototype with the support of the UI Style Tile.

We conducted a detailed Heuristic Evaluation and determined that there was inconsistent use of white space and inconsistent color palette throughout the website. Additionally, some images appeared out of context and the articles were text heavy. It was also found that the logo could be more optimally placed and the inconsistent layout could have more order.

We also did a competitor analysis and found that websites like Environmental defence, Green Peace Canada, Ontario Nature and Peta had clear communication on cause and CTA, simple and easy-to-understand terminology, clear and concise Information Architecture, and consistent layout and branding.

Additionally, we conducted Card Sorting as a way to reorganize and simplify the information on the website. During this process, we found some crucial information was buried under a series of links and hard to access.

With this information, we created a User Journey Map and determined the User Flow of the responsive website.

Furthermore, created User Scenario that helped Storyboard the user’s potential journey. This led to the creation of the User Journey Map for the TravelSafe app.

With research collected through user interviews, user survey and stakeholder interviews, we brainstormed ideas through the I like, I wish and I want and Feature Prioritization methodology. We were able to narrow down the crucial problem users of the Toronto Environment Alliance website faced – clear Call-to-Action and better usability.

We believe that the TEA website was designed to help users based out of Toronto take action for a greener city by participating in their programs, donating and through legacy gifts. We observed that the website is not clear on their purpose, actions and projects, and is inconsistent with branding. How might we improve the usability and brand recognition of the website so that our users are able to identify with the cause and actions of the organization leading to higher donations?

The Process

Empathize

Define

Idate

With this information, we created a User Journey Map and determined the User Flow of the responsive website.

Prototype

After consolidating user testing on the mid fidelity prototype, we built the high-fidelity mobile and desktop prototype with the support of the UI Style Tile.

Test

We conducted two types of user tests: 5 second test to test the effectiveness of Call to Action, and A/B testing to determine the most optimal footer and header.

Opportunities

ZOOM

screenbud-58c5148b-00ca-4638-bf25-c282d597dec3

ZOOM

screenbud-65ed9ede-1a76-4321-937c-71152ee8c17f

ZOOM

screenbud-917d115c-fb3b-47c7-8f2e-1218dccf38cc

ZOOM

screenbud-93d761cc-53d5-411d-ae79-ff8c28f9ad77

ZOOM

screenbud-a3c73109-91f1-45fb-9954-0d13e0ce6438

ZOOM

screenbud-6a6f21e7-240c-4f8e-868f-f1e733fc9dc7-650x499

ZOOM

screenbud-c25984db-bfe1-4eac-bfcd-8844158249a7

ZOOM

screenbud-725aa0a9-e479-4364-909e-099584b65889

ZOOM

Keep In Touch!

Contact Me

Name *

First

Last

Email *

Contact No

Company Name

Comment or Message