Last On Earth — Project 4
Last On Earth is a long term product review site.
It is meant to address the problem of responsible consumption, waste, and production. By encouraging and helping consumers to find products that will last not only will they need to buy fewer things and exploit fewer of the world’s natural resources, but also longer lasting products helps to decrease the amount of waste that ends up in our landfills.
It also just feels good as a consumer to know that you are supporting the, oftentimes smaller, brands that make the products that last you a lifetime.
The name is a little bit of wordplay taking advantage of two meanings of the word last. Last can mean final but last can also mean to endure or to continue to function. Both are what we seek for the products recommended here to be.
Design Stage
Since this project was completed on a more aggressive timeline than some of the others I did not have as much time to gather feedback or do too many sketches.
I tried to make up for some of that by first creating an initial sketch and then iterating pieces of it in my head by looking at e-commerce and review sites from around the internet and shots on Dribbble for inspiration.
For example in my initial sketch you can see that I simply had hero text and a search bar. After looking through some e-commerce sites I decided that a hero image would be better suited and that I should shift that instructional text inside the search bar itself.
Not only did this change give me space for a call-to-action and a message statement to help users more quickly understand what this site is about, but it also allowed me to tie the instructions more directly to the search bar.
Once I had a basic layout it was time to start thinking about the theming and design.
For this I had two main inspirations.
The first is that I wanted to design it in a style that felt both a timeless and classic at the same time. It should feel like it is established and trustworthy, but not be too outdated as to feel bad. In other words, it should feel built to last.
Growing up in Cincinnati I’ve been surrounded by a great wealth of Art Deco buildings and influences. From Union Terminal to Carew Tower, these buildings perfectly capture that classic but timeless feel I was going for.
Probably the most distinctive Art Deco influences come in the form of my choice in type and color. I chose to pair Federo, a bold display font, with Instrument Sans, a clean modern sans-serif.
Additionally, Art Deco utilizes a lot of intricate metal detailing so when choosing colors I picked a kind of gold-ish color to further the effect.
My second main inspiration was a trip I took a few years ago to Yosemite’s Mariposa Grove. Mariposa Grove is home to more than 500 Giant Sequoias. Giant Sequoias are some of the oldest and largest lifeforms with many of them being 2,000+ years old.
Walking through the grove you are taken aback, not only by the scale, but also by the stories these towering giants tell. They’ve survived for millennia through fire and drought yet are still standing strong and tall as ever.
This resilience and longevity is the very embodiment of the type of product this project is aimed at helping people find.
I pay homage to these trees, and the Park Service that’s protected them, through my choice in colors, with greens and creams reminiscent of both the trees’ extensive needled canopies and classic National Park Service branding.
With all that in mind, the last step in the design process was to prototype my final design in Figma.
The App
The app itself is pretty simple and is easy to navigate. The home page has a hero with a tagline and a call-to-action inviting you to click or scroll to see and search the list of brands below.
The brands list has the name and logo of each of the brands as well as a score showing an overall rating based on the user reviews for that brand. This should make it easy to identify and search for the recommended brands.
The recommendations are split into two categories, recommended brands and brands to avoid. This is important because seeing that a brand is explicitly not recommended means that you know that it isn’t just some brand that isn’t on the site yet, but actually is of poor quality and should be avoided.
The search functionality lets you search for brands and products and it will filter out only the brands that sell that type of product.
Clicking on the “Read why” button takes you to the brand page where you can read all the reviews and why that brand has received the score it did.
You can see not only the text of the review, but arguably more importantly when someone purchased a product, what type of product they purchased, and the condition the product is now in. This gives you a real insight into the quality and longevity of the brand’s products and is a very important factor in determining their overall brand score.
Clicking on the plus icon in the top right corner will open a modal that allows you to add your own review to the brand page.
Here is a brief video demoing the features:
Implementation Details
The app is implemented using Svelte with SvelteKit.
All of the icons are from Google’s Material Symbols. The brand logos and product information are from each of the respective brands’ webpages.
The beautiful hero image of the Giant Sequoia is originally from Polina Koroleva on Unsplash.
The fuzzy search functionality comes from the fuse.js library.
Use of AI
I used slightly more AI on this project than the past. I used it to generate dummy data in the form of reviews for each brand as this is normally something that in a deployed app would be user generated.
I also experimented this time with using it to help create my modal for writing a new review. It didn’t give me all the correct styling, verbiage, and functionality though so I still had to make some significant changes to get it hooked up and looking right. It did, however, speed up the relatively mundane and repetitive task of setting up each form field. I probably wouldn’t use it for this task again in the future and would instead opt to reuse old code, but it worked well enough in a last minute pinch.
Future Work
Especially given the aggressive timeline of this project there are many things I think would improve this project in the future.
Creating a Chrome extension that tracks things that you buy and sends you follow-up emails every year or so to remind you to write and/or update a review.
Adding individual product pages in addition to brand pages that would allow you to track and review specific products as opposed to a brand overall.
Part of my original vision for the project was that the site would serve as somewhat of a review aggregator, kind of like Rotten Tomatoes.
With that in mind, something I wanted to add, but simply ran out of time for, is adding badges and/or review excerpts from sites like Wirecutter or America’s Test Kitchen that do actual professional testing, comparisons, and recommendations.
This would serve as something of a critics pick type section and would not only provide further reassurance that a product is built to last, but also provide you with a quick and easy link to read more in-depth tests on trusted review sites.
