Visual Design for Behavioral Change: Encouraging Personal Climate Responsibility through the Design of a Mobile Application
Watt Bank

Project Type:  
Academic 

Role:
Mobile Application Design, Icon Design, UI/UX

Watt Bank is the design artifact created as part of my Master's thesis - Visual Design for Behavioral Change: Encouraging Personal Climate Responsibility through the Design of a Mobile Application. Watt Bank is a solution designed to affect behavioral change in young adults to encourage actions which might have a positive impact on the environment. The concept of this application is to take scientific data and help users relate to it in a way that is memorable.

Research:

Development of Watt Bank began with brainstorming about the specific content that should be included. All of the options were written down and categorized, resulting in five main sections: Learn, Newsfeed, Progress, Connect, and Profile. The following are notes from brainstorming the application's contents.

Research:

The categories were reorganized into four sections, and then sketches of the main pages weremade. Originally the sketches were drawn for a horizontal orientation, such as a tablet, but were later sketched in a vertical orientation for smartphones.

Research:

The preliminary wireframes were revised and expanded to include more details, as well as all possible screens

Testing and Design:

Using Adobe XD, five main screens were designed with a color palette, type treatment, and layout, then tested for functionality and user reactions. After feedback, the entire application layout was designed in grayscale to narrow user focus to navigation and grid. Next, a revised color palette, type, and illustrations were added one section at a time. Navigation between sections was generated, and the design finalized.

Finalized Design:

The finalized screens of Watt Bank are categorized below. These screens are presented to a user upon their first time logging in to Watt Bank. The sequence evaluates the user's utility usage and transportation spending, then calculates a budget and carbon dioxide score.

Finalized Design:

These are the home screen and screens from the news section of the app. The home screen fades into the newsfeed with up-to-date information on climate technology, information, and policy. The daily tip screen changes daily to give suggestions on saving money and energy. The remaining screens contain information about how climate change impacts different areas.

Finalized Design:

These are the screens for the progress section of the app. The first four screens allow the user to track money related goals, while the next four track carbon dioxide emissions goals. The remaining screens show the user's progress in saving since starting the app, as well as a comparison to their friends and the average person.

Finalized Design:

The screens from the community portion of the app show a ranking of friend's savings for the week, upcoming events, and groups in the area for chatting and planning.

Finalized Design:

These screens are from the user profile section of Watt Bank, which allow users to see their personal information, change settings, reset their budget and carbon dioxide score, and find more information about the app.

For more information about the project, or to request a copy of my thesis, contact me.