tred Hero image.png

Introduction

Tred is an early-stage start-up that helps track, reduce, and offset your carbon footprint by taking everyday purchases and converting them into the amount of carbon emitted

The Objective

The objective of this project was to redesign the current website to increase early access sign-ups for the product from the landing page, promoting their product on their site, build credibility, and educate others on the importance of offsetting carbon.

My Role

My role for this project was to redesign the website by conducting research, wireframing, and finally testing.

 

My Team

I was collaborating with another designer, two developers, and the two founders on this

project. 

Design Audit

The first step to redesigning the website was to perform a UX audit of the current website to uncover what needed to be improved.

current landing page

Key Insights

Current Landing Page.png

Key Insights

Weak visual design

 

The website did not express the vibe of the app very well with its visuals, color, and typography.

Confusing content 

 

The content about the app was not organized and sporadic. Some information was also redundant

Not accessible

 

There were accessibility issues on the site such as low contrast, 

Low Fidelity Wireframing

After performing the audit and understanding what needed to be changed, the wireframing

process was started.

Mobile Landing Page Wireframe.png
Tablet Landing Page Wireframe.png
Deskstop Landing Page Wireframe.png

What we included

  • More organized content 

  • Potential visuals - icons/sign up field, buttons

Visual Design

Using the low fidelity wireframes, I began to conceptualize the visual design elements such as color, typography, and imagery needed to best convey the message of Tred.

Color Palette

I chose this color palette since it supports the message of Tred to be environmentally conscious and resembles nature themes.

Typography

Typography.png

Typography pairings were researched to mimic a relaxed, gentle spirit

Imagery

imagery.png

Photography that represents nature and the environment were added to pull in the user

High Fidelity Wireframes 

The visual design elements then helped create high fidelity wireframes

Mobile Landing Page hifid before.png
Tablet Landing Page hifi before.png
Deskstop Landing Page hifi before.png

Usability Testing

After having the high fidelity wires in place, we decided to test the site with 5 participants. The testing was done through remote moderated sessions. The participants were asked to explore the site and complete 3 tasks. 

Key Insights

  • Users questions the validity of the app and how the scope of the mission was to be carried out (planting trees to offset carbon) 

  • Users were unsure about what the CTA was letting them sign up for

  • In terms of the subscription service and payments, users were confused about whether they would have to pay for the app or just to offset their carbon

Revisions

CTA was made more clear so users knew they were signing up to have early early access to the app

In progress: Mention that the app is free 

Logos of affiliations were added to add credibility

Tablet Landing Page hifi.png

In progress: Add exerpt of planting trees and how that will be carried out

 Additional CTA was added at the bottom

Challenges and Next Steps

Some challenges during the project included trying to complete tasks in an organized way, handing off designs to developers, and not being to test with relevant users.

 

If I were to do this project again, I would try to test my designs with those more inclined to using the app (eco-councious, environmentalists, etc.), and follow an agile process to improve working with cross-functional teams.