Case Study:
Revisiting & Redesigning
tred’s Web Experience

UX/UI Design

About the Project

Overview

Project Name: tred

Project Team: A team of 8 people including the founders & developers

Project Duration: 4 weeks spread across December 2020 & January 2021

Project Description: tred is a UK-based startup founded in 2020 with the mission to reduce carbon emissions by enabling people to precisely track, analyze, reduce and offset their carbon footprint through a native mobile app linked to either their own tred debit card or any other existing debit card.

In order to reach out to people quickly in early 2020, a website with the purpose of informing people briefly about the app and letting them sign up to the waiting list was pushed out.

Since then both the product and the team evolved and the web experience was to be enlarged and enhanced, covering both products, the tred app and tred card, as well as further knowledge on carbon offsetting in general. In addition some elements, such as the mission statement and the display of the team members, were not housed anywhere due to the restructuring and needed to be housed again.

Role in the Project: Along with another UX/UI Designer I took the lead in auditing, designing, prototyping and testing the overall experience of the website and creating three new pages.

Contents

Click on the keyword to get to this part of the case study directly.
UX/UI AuditProblem StatementWireframingUser TestingPrototypeFinal Screens

Objectives

My tasks in this project were the following:

  • Auditing the existing pages, acting on the findings & handing them off to development
  • Designing the app & about page
  • Prototyping the complete web experience
  • Setting up & running an unmoderated user test
  • Preparing all assets for handoff

Tools

The project was engaged with the help of the following tools:

  • Figma (All Deliverables & Prototypes)
  • Slack (Written Team Communication)
  • Google Meet (Team Communication)
  • Maze (User Testing)
  • Trello (PM & Developer Handoff)

Outcome

The changes and pages are currently pushed out by development and it may be that not all changes reflected in the shown designs are live yet.
See the results HERE

Emphasizing & Reviewing

UX/UI Audit

As an initial step, a complete audit of the exisiting website was to be done in order to both lead discovery of the existing assets and also to learn more about the overall product. Following the audit the following changes were made before moving on with the creation of any new pages:

  • Implemented consistent breakpoints for mobile, tablet & desktop
  • Implemented a grid for all breakpoints for better reference & development handoff
  • Started a component library in order to make future design work more efficient, scalable and to ensure consistency throughout the designs
  • Made changes for increased accessibility under W3C guidelines
  • Resized & realigned several elements and section for better usability across all devices
  • Refreshed mockups for consistency and optimal product representation

 

App page

The app page formerly acted as the home page of the website and contained a very top-level overview over the app and it’s functions. However user testing done prior to me joining the project revealed that this information was not sufficient for most users in order to understand the product. The research showed that many users also lacked knowledge about carbon offsetting in general, making it harder to explaing the product dealing with such.

About page

With the transition from the old home page to the new one some content lacked a proper home such as the presentation of tred team members. Additionally there were types of new content just recently becoming relevant such as news articles and other media-related content. While user research didn’t give away much about the user needs for such a website, the content needed to be housed appropriately again.

You can scroll me!

Step 1

Discovery

Gaining insights into the problem & emphasizing with the user

Problem Definition

After analyzing the current state of the overall web experience of tred, reviewing existing user research and implementing methods to ensure consistency further down the line, a problem definition could be derived on which basis both of the new pages were to be designed.

 

App page

The review of both the existing design and the user research conducted before the following core needs for the app page could be stated as following:

  • Educate the user about the core functions of the app
  • Educate the user on a top-level about the offsetting options within the app
  • Give users the ability to engage with tred further than joining the waiting list

At this point it was clear that the knowledge about carbon offsetting would need to be spread across two pages, keeping the top-level insights on the app page while explaining the deeper process on another page to be designed by another designer on the team.

About page

After reviewing both the content of the old home page and the new content to be housed, the following needs for the new page were stated as the following:

  • Display any media content related to tred
  • Present treds mission
  • Display all current team members of tred

Generally the user should be able to see what and who tred is behind the product itself.

 

 

 

Step 2

Definition

Narrowing the scope & focus area to make a problem statement

Solution & Validation

Wireframing

Thanks to the existing components and clearer styling guidelines following the initial audit, the creation of new pages was simplified. However for the kind of content that was to be featured on the pages, some new elements needed to be defined in line with the existing component library. 

App page

The first challenge with the app page was presenting the core functions of the app in a quick overview while allowing the user to learn more about carbon offsetting in case they lacked knowledge about it. While in the original version of the page a very short flow was presented, the new presentation was designed to allow the user to breathe and read through all steps one-by-one. The additional mockups also give users the chance to contextualize the step with the step in the app. The last step “Offset” also includes a button directed to the education page so users can get additional knowledge about carbon offsetting. For mobile and tablet breakpoints this section was turned into a horizontally scrollable section to allow a better usability and refer to mobile device patterns.

You can scroll me!

The second challenge was to show users what carbon offsetting with tred (currently) means. Offsetting can be done through various schemes like e.g. tree planting schemes but also schemes involving renewable energies, solar, wind or hydro energy and other projects helping neutralizing carbon emissions. At that date and for the foreseeable future, tred only engaged in one offsetting scheme which should be made transparent. However there were other schemes to let users choose from planned for the future. To help users understand what they are (potentially) offsetting with, a clickable card with information about the current offsetting scheme was created. The card also opens a modal with further information on the scheme (can be seen in the prototype).

The third challenge was to create a way for users to engage with tred further, creating a feeling of connectedness to the brand and product. The solution to achieve that was to involve users in choosing the next offsetting scheme(s) that tred is to pick up in the future. To do so, a section with clickable cards similar to the existing scheme card was created that also includes a voting function. By voting for the offsetting scheme users can decide which offsetting schemes they like best and want tred to pick up.

About page

The about page’s first challenge was posed by the media content such as news articles that were published about tred. The first solution to give users a quick overview about the media tred appeared in was to install a carousel rotating all the media outlets automatically. This function and its behaviour was closer discussed with development prior to implementing it, double-checking if it is technically feasible.
Beneath the carousel a more detailed display of the individual articles was designed. This section shows a featured article that is either the most recent or most relevant article. Beneath that a row with two articles is featured. This row could easily be replicated if more articles were to be displayed. The cards for this section were created on the basis of the cards for blog articles, existing prior to these elements in the component library. However some modifications were necessary to display all the necessary information about the article.

The second challenge was to find a way to display the current team members. On the former home page the team members were displayed with little cards at the bottom of the page. The general idea of that was kept, however user research showed that some people would like to have more information on the people of tred and compared it to content featured on tred’s social media outlets. Some of the employees were displayed there with each a work and play description. This type of content was adopted for the about page in form of a modal that opens when clicking the individual members card (this can be seen in the prototype). Additionally as a way to further engage with the team members, social media icons were implemented on both the smaller cards and the modal.

Prototype & User Testing

After finishing the work on the pages, the designer working on the education page and myself decided to create a prototype containing the website as it would be after the addition of our pages. This was done in order to find out if people could locate the content with the information given and also if the new content served its purpose of informing people about the product and carbon offsetting in more depth.

After setting up the protoype in Figma, an unmoderated user test was set up with the help of Maze. After internal testing the test was send to both current users of tred, as well as people who have not yet been exposed to the brand or product. With results coming in, it became clear that the structure and nature of the test itself was too complicated for users to follow through without further assistance. After reconfirming this by approaching invididual testers, asking about their experience, the test was pulled and a second, simpler test was constructed and deployed. This time very little problems arose with the scenarios and tasks and users could focus on usability issues.

After wrapping up the test with a good number of users giving feedback, it was clear that the overall usability and depth of insights on the website was fine. However there were some issues discovered around the offsetting cards for both the current scheme and the possible future schemes to be voted on. Users had a hard time differentiating these as they were very close to each other. In consequence, the current offsetting scheme was moved to another place on the page divided from the voting section by the mission statement.

Step 3

Development

Finding & Testing solutions

Handoff

Final Prototype

After testing and iterating based on the testing results, a final prototype was prepared to show developed the behavior of several elements of the page.

Note: This prototype only includes pages I have directly worked on during the audit and after. The prototype is best viewed on a desktop device and in full screen.

Final Screens (Desktop & Tablet)

You can scroll me!

You can scroll me!

You can scroll me as well!

You can scroll me as well!

Step 4

Delivery

Filter viable Solutions & acting on them

Thank you for your interest!
Do you like what you just saw?
Then let's talk!