UI/UX for the startup with a mission to heal the planet
Handprinter is a startup that helps people track handprints (another word for positive impacts). Going on a bike to work instead of driving, using reusable napkins instead of paper, planting a tree – on Handprinter you can contribute any action you take that lowers your carbon footprint and keep growing the number of all the good things you do.
You can invite friends to track their handprints too. When your friends sign on, their handprints become part of yours.
Web App design
In 2013 Handprinter ran a campaign on Kickstarter which failed to meet its objectives. Despite a great idea, the Handprinter app was having difficulties with onboarding new users.
With enough handprints, we can heal the Planet.
Founder & CEO of Handprinter
A product like Handprinter has no analogs in the world. For this product to generate interest with users, it needs to clearly communicate its value and encourage people to sign up.
But the previous version of the Handprinter app had a poor user experience, so visitors didn't convert into users.
To inspire people to make a positive impact, we added a tab "Actions" with some pre-set ideas on how to reduce footprint. Users can also add their own actions and share them with the whole Handprinter community.
The previous version of the Handprinter app had a very complex user flow. In order to create an action, a user needed to take multiple steps on a page, and at the end, there was no way to see the results.
A dashboard is a place where users go to see a full picture of their achievements. There, users could see their Net Positive days and the ratio of their footprint to their handprint.
The dashboard also classifies the positive actions by their type, such as climate, water, waste, ecosystem, and health.
Working on the Handprinter project was an incredibly creative process. There were no similar products that we could look at as a reference, there was a lack of data on user behavior which we could analyze to inform our design decisions, and mapping out customer journey for an early-stage startup can be tricky.
There are three types of users who register on Handprinter.org: individual users, companies, and communities or organizations. We identified the main goals for each of these groups to create an intuitive user flow.
The previous version of the Handprinter app had a very complex user flow. For example, in order to create an action, a user needed to take multiple steps on a page, and at
the end, there was no way to see the results.
We simplified the user flow, reducing it to only three steps.
We came up with an idea of a calendar to display the days when users are taking actions to save the environment.
We created weights which are a good metaphor to show users how they progress in reducing their footprint and increasing handprint.
This user interface element shows all the people involved in a user's handprint “ripple effect.” We made it look like a net with the user in the center.
The Handprinter app needed to be both human and eco-friendly. We chose green colors, picked out a readable typeface and created amazing and memorable illustrations.
The existing Handprinter app had a pretty nice logo – a lime tree and a word Handprinter in green and dark green colors. We decided to leave the logo and use existing colors for our visual app design.
We made a color scheme of the site according to the laws of color harmony.
When choosing a typeface, we needed to take into account that the app is translated into seven languages. Our typeface needed to be available in each of these languages. We also wanted something distinctive, readable, and beautiful.
Nota Sans seemed to be a great choice. It is available in 40 languages.
When you create illustrations, it's important to make sure they can transmit the brand message and be exclusive to the product. Our solution was to combine the illustration of handprints and things that people associate with "green living."
We made research and put together a list of such things: leaves, animals, planet, vegetables. We made the illustrations look like they were hand-drawn. They turned out very cute.
We rebuilt the platform from the ground up. Our work included backend and frontend development. On the backend, there was a complex logic for how to do calculations to measure impacts. In fact, there is a special technique for assessing environmental impacts. It's called life-cycle assessment or LCA.
As an ecological scientist, Gregory made us familiar with how it works. LCA measures impacts in special units for each different impact category.
But while for LCA specialists these units are highly informative, for regular people they don't mean much.
Handprinter was one of the most creative and challenging projects we've ever worked on. And it was also very inspiring! We completed the main scope of work within about four months.
Currently, we're working on some awesome functionality for companies – an important step in product growth. Currently, we're working on some awesome functionality for companies – an important step in product growth.
To make impacts more meaningful to our users, we expressed each positive action’s impact as a fraction of a total annual footprint.
Had a project that needed work from the ground up on UI/UX, and the Eleken team has been outstanding. They dove in and learned the spirit of the project in depth, then let their creativity shine and combined it with tech expertise. They cover all the bases, and the collaborative experience is light touch, efficient, and day-to-day, but with good attention to the longer view.