OFFSET NOW
A mobile app, empowering users to
offset carbon emissions their way.
UI/ UX design . Branding . IOS
Project
As a millennial living in today’s world, I’ve realized lately that the term “climate refuge” has been a part of my conversations and thoughts. There is at least one article/ news/ documentary on the current climate crisis published every day and where I live, we are advised to be prepared at all times (it’s either the wildfire/ earthquakes or drought).
Process
I set out to find if there’s an answer or if there are people like me wondering along the same lines. Approaching the project with Design Thinking methodologies,
I gathered the goals, needs, wants, and pain points from the community of users.
Looked at the market offerings and studies exploring a sustainable future.
Designed a probable solution based on the data gathered.
It all boils down to a question…How do we make carbon offsetting more accessible?
Product
OFFSET NOW is a mobile app designed to help users understand their lifestyle and lets them choose how they want to offset it (calculate an individual's carbon footprint and suggest self-doable actions or donations to verified offset programs).
The end-to-end mobile app also aims to connect the users with the latest news, new eco-brands, government policies & rebates, etc to keep up with what’s happening and empower them to do good. This passion project was done as a part of Designlab curriculum.
Scroll down to read the case study or use the sidebar to view particular sections
Research
Interpret
Resolve
Design
Test
Research
PLAN | COMPETITOR ANALYSIS | USER INTERVIEWS
Plan
The plan was to…
Know what the users need for a “carbon-neutral” living.
Understand how aware they are of their lifestyle and current situation.
Find what apps they currently use (if any) & how satisfied they are.
Learn their needs and wants and interests regarding this.
Competitor Analysis
I compared the competitors & their offerings; what they provide and what they lack feature-wise. These features are chosen based on their importance in helping us aim for an actionable solution. Some of these were suggested by research participants and have been added on.
Findings
Market trends suggest that companies are working intensely to raise public awareness on the current climate situation (eg. Google recently suggested the most fuel-efficient routes, adding carbon emissions for flight routes, etc).
With most apps offering subscriptions, the current market is only for the 30% who are willing to spend up to $20/ mo.
What about the rest?
This is where I begin to question and explore solutions that don’t just involve spending. I asked the users what they needed here.
Feature matrix
User Interviews
1:1 interviews were held via zoom with prospective users. They were asked about the current products used for this goal (if any) and to prioritize certain features offered by direct and indirect competitors based on their needs. The answers have been quantified and presented below.
100% say they’re aware & interested in taking action against the current global crisis.
75%
Does not know how to get it into their lives practically and would love suggestions.
Wants to be rewarded/ appreciated/ seen for the actions they take.
50%
Do not want to consume more and are willing to donate to vetted offset programs.
Wished for a community to connect with and be in the know of current happenings.
25%
Are willing to spend on monthly subscriptions for an app that would help them.
Agreed that there is complacency and comfort in old ways.
Inferring from the above…
Users would be interested in an app that would...
Calculate their carbon emissions based on individual lifestyles.
Analyze problem areas and suggest eco-friendly changes.
Show articles, documentaries, news, and petitions on what’s happening.
Daily reminders/ prompts to make it habitual and accountable.
Aid in donating (Optionable) to offset programs.
Reward conscious actions.
Connect with others on a similar journey.
Interpret
PERSONA | STORYBOARD | BUSINESS MODEL CANVAS
Persona
The provisional personas; from very passionate voices to the ones that were indifferent to climate change are inspired by the tone in today’s market trends, blogs, and articles. Although I consider all of them to be my potential end-users, I chose to develop one persona type who would be interested in the product, to begin with (build the business with these users and then expand). From them emerged my user persona, Emma.
Provisional personas
⬇
User persona : Emma
Storyboard
There are many possible scenarios my persona would find herself in. I had to understand the what, why and, how to specifically cater to her needs and goals. Storyboards equipped me to better understand the research data and possibly prioritize features; bringing about a visual map of where to start designing.
Storyboards
Business Model Canvas
OFFSET NOW’s business model canvas explains how this would work as a profitable & sustainable business. We keep up the revenue stream, working with key partners and giving free access to the users. A business model that is profitable without giving up on climate change.
Business model canvas
Resolve
SITE MAP | SKETCHES | WIREFRAMES
Site Map
With services like Amazon making it easy to search and buy anything through a device; Offset now had to provide equivalent if not more options for the user to switch up. The site map became expansive as the departments grew (food, transport, home, pert, outdoors, etc).
Mapping the IA also involved thinking about the flow. There were particular challenges pertaining to it being an App. The home page was a profile overview making it easier for the user to view all their important updates immediately after signing in. The other primary navigations included “Discover” and “Community” were based on the majority of users’ wanting to explore and connect with like-minded people.
Sketches
The idea was to keep it simple and understandable for the user. I began sketching screens for the onboarding questionnaire since they might have various input styles and seemed challenging at the time.
Sketches: App Launch
Sketches: Onboarding questionnaire
⬇
Wireframes: App launch, sample questionnaire & sign-up screens
Wireframes
Developing the sketches into wireframes involved learning about the IOS requirements. Users have to answer the onboarding questionnaire when entering the app for the first time. This could be an overwhelming experience. I decided to keep the interface (shown above) simple and offer an option to skip the questions if needed (the result would be more generic).
Explorations
The home screen (shown below) is the profile page and includes all the user’s updates and status. The challenge here was to arrange them all hierarchically and keep them uncongested.
“Switch up to offset” and “Donate to offset” are the main calls to action and have been placed at the top. Above these is a card showing username, rewards, and an offset tracker for quick viewing. Other segments like “Daily reminders”, “Challenges”, and “Committed actions” are aimed to help the user consciously build a routine and make offsetting a habit.
This was the rough coming together of all my ideas to view the flow.
Wireframes: Home and sub pages showing the flow
Design
BRAND DESIGN | UI KIT | HI-FI WIREFRAMES
Brand Design
The Branding colors are inspired by the earth’s hue (blue-green) and yellow denotes us, humans. The logo is an abstract take on the “action of offsetting”; squares denoting earth (before and a better after); the yellow circle, human.
UI Kit
I designed the interface to evoke a sense of ease while doing a good deed. The key was to keep it very minimal; design and experience-wise so that the user gets accustomed easily. UI Kit helped me explore the various possibilities with colors, designs, and patterns.
The act of offsetting is a big lifestyle change the user will have to go through. Offset Now should guide the user without overwhelming them in the process.
Hi-Fidelity Wireframes
I kept the Hi-fidelity prototype to be minimally viable addressing the most important user need and visualizing them; Testing one particular flow where the users configure their carbon emission and switch up to offset. Working in detail on the Mid fidelity wireframes made this part a tad bit easier.
The main challenge I faced was to create a dashboard that had a quick view of Emma’s up-to-date status within a small space. I wanted her to be able to see her offset tracker, challenges she’s enrolled and the earth points (rewards) she acquires. Below shown are some key screens.
App launch & Onboarding: Sample screens
Home Page: Profile dashboard
Test
USABILITY TEST | FEEDBACK GRID | ITERATIONS
Usability Test
With the key flow ready, I wanted to evaluate users’ interaction and experience with the Offset Now app to complete certain tasks and understand their pain points, behavior with the product, negative and positive emotions to refine the final product making it more usable and accessible.
Testing was done remotely & in person. The findings have been listed in a feedback grid.
Feedback Grid
The feedback grid helped me categorize my findings from user testing into 4 categories:
What worked well
What needs to change
What were the questions users had?
Were there any new ideas or suggestions that could be incorporated in the future?
Iterations
I addressed the “Needs to change” column from the feedback grid. The iterations have been listed below with relevant descriptions.
Final Prototype
The embedded prototype presented below might not be suitable to view on a mobile device. Click the “view prototype” button presented at the top or bottom of this page to open a new tab.
What I’ve learned
As pointed above, the tech industry is coming to terms (albeit slow) with the current climate scenario and is taking the steps to familiarize its users.
Google helps the user associate their actions to impact. Thinking that they can be the change by choosing the efficient route/ flight; evokes a sense of empowerment and will make them repeat the positive action until it eventually becomes a habit.
I started out to design an offset subscription plan but changed course to include/ prioritize self-doable actions (switch up to offset) like the majority of users wanted.
It was a challenge to design the content, condense it and make it easier for the user to understand. I would like to work more on the “community” aspect of offset now and hope that someday, all this becomes a reality.
Credits & Contributors
My mentor Igor Dinuzzi
Illustrations from Storyset by Freepik
Icons from The Noun Project, Google Material design
Images Unsplash, Pexels, Google
Fonts: Comfortaa, Avenir Next