Clime app
Graduate Student @ MCAD in 2019
Context
This is a mobile app concept I designed during my graduate Design Studio course. The goal of the assignment was to explore the development of a research-oriented project with logical design solutions for broad audiences ranging from personal initiatives to public forums.
Objectives
Brand design of Clime
Product design of IoT app
Data visualization research and exploration
Best practices and principles
How to use effectively
Accessibility
About
Climate change is overwhelming and it can be difficult to figure out how you can start making a change. Clime is built to help you start tracking, measuring, and changing your habits at home to lower your environmental impact. Clime tracks data from things like your smart gadgets and utilities. This data is then fed into the Clime app where you can see your ratings throughout the day and get real-time feedback. We are at a pivotal time in climate change where we need to start taking action and no better way to start than with getting Clime into your home.
Mission
To educate and engage users to responsibly work towards curbing climate change by tracking their impact and show how to make their habits more sustainable
Vision
To make sure that we’re doing our best to take care of our planet.
Core values
Compost and recycle
Use less water and energy
Work towards cleaner earth
Personas
Avery / 25 / Young professional
Avery is few years out of college, working in an office and living on their own in a rented apartment in the city. They are tech savvy, environmentally conscious and up to date on all of the smart house gadgets. They have Alexa in every room, smart plugs and lightbulbs, nest thermometer and are looking for a way to gather all of their device’s data in one place. They are also concerned about global warming and looking for guidance on how to track their impact and make their habits more sustainable.
Jamie / 42 / Working parent
Jamie is a parent of two kids living in a first ring suburb and working in the city. Jamie has a busy household taking care of her kids and spouse, commuting to work and throughout the day is anxious about her impact on climate change. She has dabbled with smart home gadgets with a smart security system and a few smart plugs and lightbulbs. But she’s looking for a way to get her home in order, be able to track her bills, and make smarter sustainable decisions.
Logo
Two color logo
The Clime logo pictured above is the primary logo treatment, the reverse should be used on lighter backgrounds.
One color logo
Use black & white logos sparingly and only when needed. Black text should be used on light backgrounds and the reverse on darker backgrounds.
Clear space
To ensure the logo stands on its own, please leave at least one “c”’s worth of space around the lockup.
Minimum size
To keep integrity of logo and stay legible logo should never be displayed smaller than 50px wide.
App Icon Lockup
For iOS and Android use dark navy background color (#2D3341) with two color logo
Logo don’ts
Rotate logo
Change typeface
Change the logo color outside of the Clime brand colors
Distort or wrap the logo in any way
Apply a gradient to the word mark
Typography
Color palette
Primary palette
Secondary palette
UI patterns and designs
Dashboard UI
Mobile onboarding
Smart watch
Marketing materials
Marketing site
Data Visualizations
Principles
Data visualizations should help users understand information faster and reveal insights that would otherwise have gone unnoticed
Avoid analysis paralysis, navigate users towards the insights they’re really looking to make versus letting them search for every possible data correlation
Reduce the learning curve while conveying powerful analytic capabilities
Balance design and function, convey ideas effectively with both aesthetic form and functionality
Accessibility
Support data visualizations with a brief description and chart type for users that may have be able to have a full understanding of the graph
Make sure there’s sufficient contrast between colors in the graph so users with color blindness can distinguish between colors
Ensure data is clearly labeled
Complement the chart or graph with machine-readable data format, this could either be a table within the app or a link to a CSV document, that can be more easily read by screen reader users
Anatomy of a chart
Types & use cases
Bar chart
Bar charts are used to make comparisons between items and track changes over time. They work best when the changes being illustrated are larger and easier to see.
Pie chart
Similar to donut charts, pie charts are part-to-whole to show how smaller categories add up to a total. Avoid including too many categories.
Donut chart
Donut charts need to add up to 100%, represent less than 7 categories and best used to compare the size of a slice with the whole.
Gauges
Gauges only compare two values on a scale, a current value and a target value. They are great for tracking single metrics that have a clear objective.
Line chart
Line charts are best for showing overall patterns and trends in data. Time is shown on x-axis and measurements are shown on the y-axis.
Tree maps
Tree maps are a way to show hierarchical data using nested rectangles. They easily show patterns that may be harder to spot in bar charts.
Do’s and Don’ts
DO use donut charts to show comparison of multiple categories that make up 100%
DO use other visual cues to reinforce the meaning of colors, such as icons
DO use bar charts to compare changes over time
DON’T use multiple donut charts to compare changes over time, it’s difficult to compare slice sizes
DON’T use gauges to show more than a current and target value
DON’T use color alone to indicate meaning