Responsive website redesign for Native.eco, a public benefit corporation.

• Role: UX Designer

‍• Scope: Designing Native's B2C experience for calculating carbon footprints and purchasing carbon offsets.

‍• Timeline: 80 hours

"As business leaders set increasingly ambitious commitments to reduce global greenhouse-gas emissions, a market is developing that can help to achieve them by supplementing companies’ efforts to reduce their own emissions. This is the rapidly growing market for voluntary carbon credits."

– How the voluntary carbon market can help address climate change
Blaufelder, Katz, Levy, Pinner, & Weterings // McKinsey Sustainability 2020

Background

Native works with individuals and organizations to develop solutions to their sustainability challenges that reduce greenhouse gas emissions, strengthen businesses, and contribute to environmental progress around the world.

Problem

Native’s website is outdated and needs a more user-friendly experience to help individuals better understand Native’s product offerings, and how they can assess and reduce their impact on the environment.

Solution

Native made their website more user-friendly for new potential customers by redesigning their website and refreshing their dated brand and look.

Research Goals

Discover potential customers’ thoughts about Native’s website, and gain insights into carbon offsets competitors
What pain points do users encounter when visiting the Native website? (to calculate their carbon footprint and to purchase offsets?)
What are the feelings and expectations users have when calculating and purchasing carbon offsets online?
What actions do customers take when they consider buying carbon offsets?

Competitive Analysis

There were few direct competitors that had the same business structure as Native (which is both B2B and B2C), however, there were more competitors that offered solely carbon calculators and individual offsets.

Identified product + value gaps:

easy-to-use carbon calculator
catered to needs of new users
quick checkout process

Survey

The survey consisted of 23 users that were interested in reducing their carbon footprint and personal impact on the environment.

Takeaways

Participants didn't have access to information about carbon offsets and felt they didn't know enough about them to purchase
Participants thought they were too expensive, but would buy them if they were affordable
Participants needed guidance when considering buying carbon offsets

Interviews

I conducted user interviews and a moderated website walk-through to get insights into Native's current website experience. The parameters for participants were adults between the ages of 25-65 who have bought carbon offsets or are interested in buying carbon offsets to reduce their personal environmental impact.

Questions I asked were:

Can you give me your initial thoughts about this website?
How would you find out more about what this company offers?
Say that you’re interested in seeing how your lifestyle activities affect your carbon footprint. Where would you go to calculate that?
Can you use the calculator to calculate your carbon footprint and pay to offset it?

User Persona

Based on the user research interviews and survey, I synthesized findings and created a persona to refer to through the rest of the design process. The main needs and pain points that the Native website would solve for this persona were related to exploration, digestibility, visualization, and context.

Sitemap

I reversed engineered Native's existing sitemap to create a targeted outline for content creation and ultimately define the scope of the project.

Mid-Fidelity Wireframes

Since this was a redesign I chose to create mid-fidelity wireframes. I was still able to iterate through different design ideas with this approach.

Insights that influenced my design decisions:‍

Interactive elements like carousels and module previews (carbon calculator), so Native's website could better cater to new users visiting the site
Digestible, bite-sized content for exploration
A simplified and streamlined checkout process
More visual context + guidance, and less text-heavy sections

Hi-Fidelity Wireframes

I iterated high-fidelity wireframes for the rest of the pages. This helped me organize detailed content and focus on the nitty-gritty of designing for quantitative information.

UI Design + Prototype

I created a simplified logo, style guide, and prototype for Native using Figma.

I ran a usability test on the final product using Maze, and provided context screens to give testers foundational knowledge about what carbon offsets are.

Testing

The prototype tested 3 tasks for individuals on the Native desktop website across 11 screens:

(1) Learning more about Carbon Offsets
(2) Purchasing an offset subscription plan
(3) Calculating users' carbon footprints

Results

93.9% Avg. Task Success Rate
80% Avg. Usability Score

Key Learnings

One of the biggest lessons I got from this project was understanding the nuances of designing for a product that's in a specialized space.
‍
Additionally, the more technical challenges I encountered during this project were designing for data visualization, interaction, and engagement with the carbon calculator. All while demonstrating visual consistency across an end-to-end process (from purchase and checkout to confirmation).