KEENEY.DESIGN
  • Home
  • Services
  • Work
    • Graphic Design
    • Illustration
  • Contact
  • About
  • Shop

VISUAL DESIGN FOR BEHAVIORAL CHANGE

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.
Watt Bank Logo
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.
Post-it note brainstorm
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.
App sketches
Research:
The preliminary wireframes were revised and expanded to include more details, as well as all possible screens
Detailed sketches and navigation
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.
Initial digital sketch of app screens
Grayscale app screens and navigation
Color added to app screens
Final navigation added to app screens
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.
Initial log in screens
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.
App home page and news screens
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.
App data tracking screens
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.
App social screens
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.
App personal screens
For more information about the project, or to request a copy of my thesis, contact me.
Copyright 2022. All work and ideas belong to Rachel Keeney.
  • Home
  • Services
  • Work
    • Graphic Design
    • Illustration
  • Contact
  • About
  • Shop