UX/UI
Case Study
ClimaTech Innovations
A web based redesign for ClimaTech Innovation’s carbon accounting solutions.
Project Overview
ClimaTech Innovations is a company committed to supporting businesses with lowering their carbon emissions. They consult with companies to provide them with a report that lists complex information about the impact each company has on the environment. Then they recommend solutions to lower or offset emissions.
Research
Usability Testing
User Flow
My Role
Description
Problem Statement and Challenges
Problem
Solution
The current interface was cluttered making it difficult to navigate the site. It lacked direction; users did not have a clear understanding of what the site provided them.
Learn about their company’s carbon footprint.
Create action steps towards lowering their footprint.
Offset their company’s carbon emissions by purchasing trees that CTI will plant.
Working with a team of four people we created a Saas system with a streamlined interface and minimal design. Business owners can achieve three tasks while utilizing CTI’s website:
Design Process
Strategy
Discovery
Design
Iterate
Stakeholder Discussions
Project Vision
Project Priority
Competitor Analysis
Content Audit
User Testing
Site Map
Low Fidelity Mockup
Style Guide
User Testing
Prototyping
User Testing
Competitor Analysis
We wanted to know if CTI’s current interface met industry standards, so we drafted a competitive analysis.
Highlights
Establish cohesive and branded UI elements and fonts.
Incorporate more supportive text with graphs and charts.
Identify key components for dashboard home.
With this information we were able to overhaul the information architecture that gave a clear direction for users to navigate.
We wanted to streamline the user's experience by working off of a simplified dashboard. User’s can get an overview of their company’s carbon emissions, manage recommendations to meet target goals of lower emissions, and buy trees to offset their footprint.
Site Map
Style Guide
ClimaTech Innovations relied on our expertise as designers to create a product that was more cohesive than the original designs. With minimal design and by matching industry standards, we created a comprehensive style guide.
This is a sleek standard font that is easy to read and accessible.
Typography
Color
Icons
Vibrant colors that inspire calmness, focus, and happiness, provides visual interest that allow the user to find information quickly.
Simple familiar icons make it easy for users to find their way around the interface.
Usability Testing
We really wanted to get into the minds of our client to understand what information was useful in the design, and what information was confusing. We wanted to achieve a dashboard that met the usability heuristic of flexibility and efficiency of use. We conducted two different tests with the stakeholders.
First Test
Second Test
The language was confusing. ”Manage opportunities” made more sense here.
The dashboard was cluttered and hard to read.
No measure flow- we needed to create a space for users to track and upload new data to account for carbon emissions.
Not enough motivation to purchase trees because there was no call to action button.
Visual hierarchy needed adjustments. The “add widget” button was too heavy, users need to know what city they are looking at.
Status tags needed to change from “high/low” to “not started/in progress/complete”
Dashboard
We create a flexible and efficient dashboard based on recognition rather than recall.
Final Design
CTI’s original design
Manage
Created a header that is consistent throughout the website so that companies can know exactly where they are, at all times.
CTI’s original design
Companies can get detailed information about recommendations ClimaTech suggests to help in meeting target goals for carbon emissions.
Measure
Using visual hierarchy, companies have a clear understanding of their total carbon footprint
CTI’s original design
What We Learned
Users want a simple design that they they can easily understand
Strong visual hierarchy gives a clear direction for users to navigate through
Users want a sense of control by having multiple ways to get to the same place