Application Screens

Splash Screen & Login

Layout Description

• The Splashscreen will act as our application's loading page the is displayed when their is a delay when routing pages. This page won't have any direct links to other pages as it serves as a buffer.
• The Login page consists of a form where user's will input their username and password information to gain access to the application. This page will be displayed for first time user's of the app and the input values must be verified before they are given access.

Linked Connections

• At the bottom of the login page, there is a submit button that will take the user to the application's home page. The only way to get back to the login page is by clicking Logout in the Hamburger Menu.

Figma Prototype

Login Screen	Splashscreen

Create Account Page

Layout Description

• The Create Account Page is the first page new users will see. Here they can create their new application account, entering an email, username, password, and display name. After a user has completed this process, they will not see this page again after logging out. Instead they will be sent to the login page.

Linked Connections

• After entering valid information, the submit button at the bottom will take the user to the home page. Figma Prototype

Create Account Screen

Home Page

Layout Description

• The Home Page is the first page the user sees when they successfully login to the application. It is responsible for showcasing the primary features of the app, including the progress bar, the user's status/profile information and the drive button (FAB) in the bottom corner of the page. The afforementioned progress bar will be in the shape of a tree that is filled relative to the user's progress. This adds a fun aspect to the app and gives user's an easy visual representation of how well they are doing. Some badges and accomplishments will also be present on this page under the user's profile information.

Linked Connections

• The profile information will be a clickable card that takes the user to their profile.
• The Drive Button will take the user to the Drive page where they can track drives.
• Navigation back to the home page is done using the Bottom Navigation Bar.

Figma Prototype

Home Page

Drive Button Page

Layout Description

• The Drive Button page is the feature of the app in which the user can start and stop a drive to automatically track their drive. A large button is utilized so that the user can easily hit the button and be less distracted during their drive. The goal is for the page to continue running in the background, or if they keep the app open, and that the drive stops when they hit stop. In the initial UI design, there is a timer to track how long the drive has been. However as we develop this page we may remove this feature and rely on GPS data instead, so we can accurately track how many miles they have driven.

Linked Connections

• There is bottom app bar that leads to home, leaderboards, and settings, as well as a header with a hamburger menu that links to other pages stored in the menu.

Figma Prototype

Drive Button Page	Drive Button Page (Pressed)	Drive Button (Stopped)

Challenges Page

Layout Description

• The Challenge Pages are responsible for showcasing the current challenges the user is engaged with. These challenges are organized by their duration, point values, and a description of the challenge details. Each will include a checkbox that can be marked to signify a complete challenge. Much like several of the other pages in the application, there is a FAB (floating action button) that will take the user to the Drive Button Page.

Linked Connections

• Hamburger Menu
  • Opens a right window-pane that includes several options for the user. (located in the top navigation bar)
• Segmented Button
  • This button will take the user to a similar Challenges Page that specifically lists completed/past challenges.
  • When challenges are checked as completed, they stay on the main challenge page until it is closed/opened again.
• Drive Button FAB
  • takes the user to the Drive Button Page where the user can start a drive.

Figma Prototype

Current Challenges Page	Past Challenges Page

Settings Page

Layout Description

• The settings page will list the user's extra options that are typically relegated to the settings. This can range from a profile button to an about page. Many of these buttons will direct the user to additional pages.

Linked Connections

• Getting to and from the Settings page can be done using the bottom naviagation bar.
• Each individual subpage can be exited by pressing the back button at the top left of the top navigation bar.

Figma Prototype

Settings Page	Profile Page	Preferences

Privacy	Support	About

Carbon Report Page

Layout Description

• The Carbon Report page is responsible for displaying the user's drive information (miles, etc) and the carbon calculation after the drive is over. The page will be opened once the drive button is closed. It will need information from API calls to make calculations. The page structure consists of a card/container in the center of page where all the information is displayed. Beneath this container is a button that allows users to screenshot their report and possible share it with other users or members of their challenge group.

Linked Connections

• Hamburger Menu
  • The hamburger menu (drawer) is the primary way of getting to this page. Users need only press the section labeled Reports and they will be taken to the Carbon Report Page.
• Drive button Page
  • When the user's Drive is over and their time is revealed to them, they should be prompted to view their report.

Figma Prototype

Carbon Report Page

Leaderboard Page

Layout Description

• The gamification of the CO2 footprint process comes primarily through the Leaderboard Page. Each of the challenges that a user can complete has a certain number of points that are given to the user. The leaderboard is responsible for displaying the user's with the highest point values and spotlighting especially accomplished users.

Linked Connections

• Getting to and from the Leaderboard page can be done using the bottom navigation bar.

Figma Prototype

Leaderboard Page

Manual Drive Input Page

Layout Description

• The Manual Drive Input Page is for user's who don't want to user the drive button page to automatically track their drive times and locations. This page allows user's to manually input car information(make, model, mileage) before and after a drive to get their carbon emission calculation.

Linked Connections

• The Hamburger Menu in the top corner of the top navigation bar can be used to access this page.
• Also there should be a way to get this page through the Drive Button Page.
• To exit page, the bottom navigation bar, hamburger menu and the back button can be used.

Manual Drive Input Page

Vehicle Management Page

Layout Description

• The Vehicle Page allows user's to submit a profile for their vehicle. This profile is remembered by the application for the user's convenience. This way, the user can begin a drive without having to enter the make and model of their car each time. Instead they can select a preinstalled vehicle profile, and all drives will use that profile to calculate the carbon emission. The primary widget for this app will be a text form where the user can enter the make, model and year of their car

Linked Connections

• To get to Vehicle page, user's must use the hamburger menu in the top right of the app and select the button that's labeled Vehicles. When a vehicle is submitted, their are taken to a page that houses all of their vehicle profiles.

Vehicle Management Page