Joro is a sustainability software company at Harvard Innovation Labs in Boston. Their mission is to make sustainability simple in order to encourage action in addressing climate change.
Small steps we take in our daily lives add up to big impact for our planet. Starting with personal footprints, where users are able to take pledges as small as biking to work for a day and as big as going vegan, Joro allows users to track, analyze, and improve their carbon footprint. From there, users are able to connect with a community, subscribe to more content, and purchase offsets to create a greater impact.
As the product designer, I collaborated directly with the co-founders and worked closely with the data scientist and software engineers to tackle UX problems. In the end, we saw a 30.47% increase in users who connected their credit cards, and generated a 56.89% growth in overall active users.
The end goal of my eight weeks at Joro was to completely redesign the interface of their mobile application and website. We divided the mobile portion of the project into six parts: onboarding, home, community, take action, feed, and profile. For the purpose of this case study, I will be focusing on three sections of the app:
01 / Onboarding For the onboarding flow, our main concern was to improve the number of users connecting their credit cards. Although we provide manual entry self services such as the onboarding survey, transaction data we distill from the user’s credit card helps us collect detailed information in order to more accurately analyze the user’s carbon footprint. However, credit card data is sensitive information, and as a small company, trust between Joro and the user was a big issue. Before the refresh, we had 26% of users connecting at least one credit card.
02 / Home The original homepage displayed a heavy amount of data lacking visual hierarchy and organization. As a user myself, I had only at most taken a glance at them, because immediate comprehension was a challenge. The goal for the homepage was to 1) present comfortable, easy-to-read data, and 2) add an element that makes sustainability more interesting and incentivizes users.
03 / Community When considering topics like sustainability and doing good for the environment, it’s easy for us to feel small and insignificant. This attitude deters people from actively making changes in their daily lives. Creating a community that builds a positive attitude towards sustainability will not only encourage users to take action, but also set us apart from similar applications — essentially, we’re looking at something similar to a social media app.
research + synthesis
ideation & Whiteboarding
style guide & information architecture
Throughout the eight weeks, I built a refreshed style guide, as well as a complete UI assets/illustrations library to consolidate a Joro brand. I pulled shades of blue surrounding the “Joro Blue” from the logo to create a color hierarchy, and selected two shades of green, yellow, and red each for Joro’s ranking system (green = good, yellow = okay, red = not good). I also introduced a new Joro character, the Joro minion, to make sustainability a bit more fun. This minion helped with the gamification portion of the app a lot later on — he became not only a tutorial guide and illustration component, but a character users can customize using their earned points.
I performed three rounds of rapid usability testing with a sample size of twenty and iterated each time. A select few were done in depth and in person; the rest were sent out digitally on Lookback. I gave out instructions and asked questions throughout, and Lookback helps record video and audio information to capture the user’s reactions and immediate responses. Two common issues that came up were that 1) users were hesitant as soon as they saw the connect cards page, and 2) there was too much information presented all at once. This led to us putting more thought into the onboarding process, and designing a more comprehensive onboarding survey, so that users can get something out of the app even without connecting a card, as well as taking a minimalist, functional approach in iterating the design. In the end, we received feedback such as that it’s “very intuitive”, “clean, easily understandable”, and “I’m downloading it right now”. One person’s immediate reaction was that “it’s a game to save the earth”, meaning we were going in the right direction!
01 / Onboarding
In the interest of pushing users to connect their credit cards, we built a sense of trust into our new onboarding flow. The original flow had a landing page with the Joro logo and tagline “make sustability simple”, but that’s as far as it got into explaining what Joro does. It then jumps right into the credit card connecting screen, which, to a lot of users, was aggressive, sudden, and confusing. As a result, 74% of users skipped this important step that lets users utilize the app to its full extent.
The new flow introduces Joro with friendly minion illustrations, and breaks Joro’s mission down into three steps: track, improve, and connect. Then, users are asked to create an account (or connect with Facebook, Google, or Apple) and take a carbon survey. This updated, detailed onboarding survey allows users to analyze useful data and see their results even without connecting a card. It is not until the last step that users are asked if they would like to link their bank.
The result after four weeks of deploying was a 30.74% increase in users who connected cards.
02 / Home
The team spent two weeks focusing on effective data visualization. The end product is a dropdown with four different ways of analyzing a user’s data, starting from an overview to more detailed transaction breakdowns. Within each chart, users can toggle between views such as basic/detailed, and time (today/week/month/year). This organization of the charts successfully saves screen space while presenting the most important pieces of data clearly.
The second part of the homepage update is to add an incentivizing, playful element that renders sustainability more interesting. The result was simple gamification: creating a goal, creating a quest, finishing a quest, and starting a new quest. In addition, we also learned that the four main ways to engage an audience is 1) letting them be a hero, 2) utilizing their desire for human interaction 3) building a sense of mastery, and 4) invoking a sense of discovery and surprise.
This is most relevant in the Take Action page, specifically in pledges users can take. With the gamification implemented, each pledge becomes a quest (being a hero), users are able to connect and share with a community (human interaction), earn badges from completing pledges and/or reaching goals (sense of mastery), and earn points and streaks that they can then turn into something else, such as “purchasing” a new minion outfit with points (sense of discovery). From the first time a user opens an app, they have already started a quest without knowing. Joining a group, connecting a card: each desirable action has a desirable response from us.
03 / Community
We added a social media element to Joro in hopes of building an online community for sustainability related content. In the community tab, users can browse and follow friends, people near them, join and create groups, connect with other social media accounts, and view a leaderboard sorted by Joro Global, friends, or groups. Each user also has a viewable profile that contains achievements, a brief carbon breakdown (users can only see the detailed analysis for themselves), and pledges that they have taken. At the very top of each profile is an animated illustration representing the user’s bracket of carbon footprint. Starting with a desert, the lower the carbon footprint is, the more trees there will be. We incorporated as much visual representation and interaction as we could because we wanted to provide a fun, pleasant experience in this not-very-fun topic. With the social media element added, we are showing the user that he/she is not alone in fighting climate change, and where they are in comparison to the rest of the community. The result was a 56.89% growth in active users.
interactive prototype (click on logo to begin)
Click through the prototype to see the final design.
Click sign up to see the onboarding process. Click sign in to go straight to the homepage. Download Joro HERE
Interning at Joro was one of the most valuable experiences I’ve had. Working in a startup environment allowed room for growth, and for me to be involved in multiple aspects of product development, such as data science and software engineering. As I was the only designer on the team, I learned to self-initiate an end-to-end design process from problem scoping, validating, designing, iterating, to testing. I even had the opportunity of connecting with a former production engineering director at Facebook for feedback, and a game designer at Advanced Microgrid Solutions to learn about gamification theories and strategies. This is the project I am most proud of thus far, not for the final product, but for the time and effort I put into it, and the skills I learned.
10/29/2019 latest deployment updates
For all requests, collaborations, and questions, please reach out to: