Our Partner

Climate Clock works to spread awareness and encourage activism by conveying the urgency of reaching net-zero emissions using a countdown to 2030.

Problem

Climate Clock displays a countdown to a 1.5 °C increase in our average global temperature. The previous digital clock only displayed the countdown and a few key preset “lifelines,” which are important initiatives we can support to slow the increase in temperature. The digital clock was not mobile-responsive, meaning it was hard to view important information, nor did it have multi-language support, which is necessary for an application being used worldwide. Additionally, there was a lack of customization for lifelines since they were preset, which is important for making the clock relevant to any conversation since the user can display relevant statistics. Solving this last problem also creates the problem of shareability since people may want to share their clock with certain statistics to bring awareness to particular climate issues.

Solution

We worked with Climate Clock to build a Progressive Web App (PWA) that is responsive and customizable to replace the old web-app they used. We reimplemented their original website with our tech stack to be more responsive and usable on mobile devices in any orientation, and added customizability to the lifelines. With a new settings and lifelines page we allow users to choose their own lifelines and also save them locally or even share them with a link. 

Design

Users can come from a variety of backgrounds and use the site on any device. So, it was important for us to make the application easy-to-use and responsive. Since we were essentially adding functionality, we made minor improvements to what already existed on the page and added new pages to the site to organize the new functionality.

We had to think through how new workflows would look, like adding, hiding, and deleting lifelines. Additionally, we had to ensure the quality of the mobile experience; for example, we discussed how to best handle hiding lifelines since dragging lifelines might be difficult on a phone. 

Tech Stack

Climate Clock is a front-end only project which uses React, TypeScript, and Reach UI. Climate Clock already serves an API that generates the data necessary for the Climate Clock website. The original website used Vue, which lacked mobile-friendly features. With the new website, we preserved original features of the website such as embedding support. We also worked with Gregory Schwedock to expand the existing API to support translations in other languages.

Features

Fully Responsive Climate Clock

Our project for Climate Clock was centered around making their well-known clock face more impactful, customizable, and responsive. In the past, the clock face had trouble resizing for laptops and tablets, but we were able to improve the experience across all devices with detailed designs and careful implementation. The clock's movement and liveliness with updates every second was something we also factored into our changes, ensuring important data and messages are always visible. To increase access across compatible devices, our clock supports progressive web app mode in modern browsers.

Climate Clock Clock Desktop
Climate Clock Clock Mobile
Climate Clock Clock Tablet

Lifeline Customizability

Helping make Climate Clock's clock face more personalizable was another goal of ours from the start of the project. We tackled the problem by improving the lifeline customization experience. Users are now able to add their own lifelines with custom values and headers. The way lifelines are displayed was also changed, and they are now able to be reordered and removed at any time. In addition, the default lifelines are always available from a dropdown.

Climate Clock Lifeline Customization

Additional Functional Customizability

We took personalization of the clock face farther than lifelines, giving users the option to change settings from the display language to the clock's news ticker. We recognize that the message someone hopes to convey with a clock configuration is unique, and our customizability helps Climate Clock reach a large audience in this way. To support editing of such custom clock faces, we save lifelines locally so they can be viewed even after the browser is closed. We also support easy sharing of custom lifelines and settings with a sharable URL.

Climate Clock Additional Customizability

Embed

With our improvements to clock face customizability and sharing, we recognized that the next step was to make these changes more presentable across the internet. Like the existing site, our web application allows clock faces to be embedded into other web pages, with the same responsiveness apparent on our own app. For example, clock faces wrap when the embed container is too small to display the side-by-side deadline and lifeline.

Climate Clock Embed
Climate Clock Embed Large

Joining the Climate Clock team gave me the opportunity to grow my skillset in different ways. Not only was I able to explore new technologies and frameworks, but I was also able to do so while keeping the message of a global cause in mind. I got to think and learn about the product-side and understand the thought process behind the design choices. Seeing those ideas come to fruition gave a sense of achievement and excitement knowing our hard work was paying off, certainly a rewarding experience!
Sahil Kamboj
Hack4Impact Software Developer
Sahil Kamboj

Meet The Team

Archna Sobti Archna Sobti Product Manager
Daniel Moon Daniel Moon Tech Lead
Nikhil Gargeya Nikhil Gargeya Product Designer
Aaron Alexander Aaron Alexander Software Developer
Eesha Barua Headshot Eesha Barua Software Developer
Riya Jain Riya Jain Software Developer
Sahil_Kamboj Sahil Kamboj Software Developer