CO2 Tracking Mobile Application Concept Design Challenge

Welcome to CO2 Tracker Mobile Application Design Challenge.

We are building a sustainability-oriented mobile application that will help users track and manage their CO2 consumption. We are looking forward to seeing concepts that help the user to experience delightful navigation through the different elements of the app, as well as gathering the data in a very smooth fashion.

Round 1

Submit your design for a checkpoint feedback.

01. User Authentication
02. Home
03. Register Activity
04. Progress

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

Round 2

Submit your final design plus checkpoint feedback.

01. User Authentication
02. Home
03. Register Activity
04. Progress
05. Saving Network

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Objectives

• To create UI screens.
• To provide a seamless flow to complete user goals.
• Mobile application.

Application Overview

• Sustainability and CO2 are becoming undoubtedly a sensitive topic in our current times, but we don't know how much we consume and which impact this has. So we'd like to give users an overview of their CO2 consumption and set that in ratio to make the implications clear. Our app needs to measure this.
• The main purpose of this application is to track, score and provide an overview of CO2 consumption, driving behavior, and individuals' sustainable impact (like a “CO2-fitness-tracker”).
• Users will engage - i.e create CO2 saving networks by group Scoring and Ranking.
• Users will Compete/Gamify - ie compare the score with other users.

Design Goals & Principles

• Components arrangement and layout must be clean: be thoughtful about the elements that are truly needed for the user in the screen space.
• Simplicity: the design should consider frictionless paths to achieve the goals. Avoid placing too many buttons or overcomplicating the workflow steps.
• The design solution should be easy to understand.
• Open to variants from the branding guidelines. We want to explore colors that help making the application more engaging. This will be a “sponsored by” framed application, so the provided branding should be visible but not the main center of attention.

Business Goals

• Collect data to get an overview over users CO2 consumption.
• Marketing: attract new users to our brand.
• Network externality effects: expanding user circle per word of mouth.
• Positioning us as a sustainable-oriented company.

Application Fundamentals & Concepts

• Co-driver: we want to motivate users to take other people in their car with them if they are heading the same way. If users drive with their friends or family in a car, we may take less of their consumed CO2 into account to incentivize ridesharing.
  • To measure co-drivers:
    • Users may enter if they are taking other people with them in the app.
    • We may allow co-drivers who have also installed the app, so we can measure it by tracking their GPS. The second possibility sounds better and would be more attractive for users because it's more convenient; it would also improve network externality effects.
• Driving behavior: The CO2 consumption depends on car type, how many miles users drive, and how they drive (what we call driving behavior).
  • We are convinced that lower CO2 consumption positively correlates with driving safe, that means that people who are always driving fast in curves, often exceed the speed limit and brake hardly are consuming more CO2. We want to include this in users' CO2-consumption value.
  • To measure the driving behavior, first, we need to record users' GPS-data because it gives us an overdriven overview route, speed, and driving behavior to some extent. Second, we need the gyroscope data of users' mobile phones to see how users drive in curves and if they are braking or speeding up hardly. We may also record information about objects nearby their mobile devices to be sure about their current position.
• Mobility: we want to incentivize users to lower their CO2 consumption by traveling by train or bus more often.
  • To measure mobility, either user enters this manually, or we may also capture this from the GPS coordinates get from users' mobile phones (if users are moving on a railroad track and with a train typical speed we can assume that they are currently riding by train).
• Saving network: we want to enable users to build up saving networks and compare their CO2 consumption to their friends and family. The competitive character may incentivize them to lower their consumption by driving more environmentally friendly. Enabling users to interact with others promotes the dissemination of the app by word of mouth.
• Score system: it is basically built of:
  • Car type.
  • Driven km.
  • Driving behavior.
  • Co-drivers.
  • Mobility.
  • Network.

Screens/Features
Note:
These are skeleton requirements, brainstormed features simply to be used as inputs into this challenge. Feel free to come up with ideas and concepts for this mobile concept, we are open to alternative workflows and alternative features not listed here that would help the overall application. In terms of expectations, we would like to measure the concept against the following in the one to ten scales:

• Creativity: 8
  1: barely new ideas
  10: a utopic product with features not proven to be able to be fully implemented
• Aesthetics: 7
  1: low-fidelity design, wireframe or plain sketch
  10: top-notch finished looking visual design
• Exploration: 9
  1: strictly follow an existing reference or production guideline
  10: open to alternative workflows/features not listed here that would help the overall application
• Branding: 4
  1: don't care at all about the branding just functionality
  10: without a properly branded product there is no success

01. User Authentication

• User signs in with email address and password.
• Signing in with an account from another social media network (Facebook, Snapchat, etc)
• Selecting car type
  • Open to suggestions to handle this feature.
  • Maybe small buses for large families but not more than seven seats, because the app is more thought for private usage.
  • For us, it is interesting which car the user is driving and in what condition the vehicle is. It may include tire pressure, battery voltage, and other indicators that give us information about the general car condition.
  • We may get this information from the car manufacturers because they already measure them, but we're currently not sure about that.
• It needs to be clear and simple.
• Less data as possible given by the user.

02. Home

• First screen users normally see when opening the app.
• Overview
  • Consumed CO2.
    • Absolute value, basically build of car type, driven miles and driving behavior.
    • Co-drivers, new mobility and network have no impact on absolute CO2 consumption.
  • Consuming score (scale):
    • Includes all the indicators we are measuring (CO2 consumption, Co-drivers, new mobility, networks).
    • Our current idea is to take "saved trees" as a unit for the score representation, which means telling users how many trees they've saved by improving driving behavior/ taking co-drivers, riding by train, enlarging their networks.
    • Saved trees by people in user networks may count proportionally for the user too. This would incentivize the recommendation of the app by word of mouth because users get incentives to enlarge their networks.
    • Other ideas are accepted. We are open to exploring this concept.

03. Register Activity

• In order to increase the score, any of the following inputs must be collected. Show the workflow for both.
  • Co-drivers: users can enter / connect with co-drivers to increase the consuming score.
  • Mobility: traveling by train, bus, bicycle, etc (sustainable mobility) improves users score.
• We like the idea of giving users individual tips for improving their driving behavior to enable lowering the CO2 consumption. Where is the best place to do this? Home page? Another page? We think of another page just for tips, because then users can decide if they want them or not. If they are on the start/home screen some of our users may be distracted.

04. Progress

• Development of the consuming score (charts and statistics) to give an overview of the CO2 consumption over time.
• User can set parameters such as the period of consideration (week, month, year).
• Open to suggestions to show progress. Incentives play an important role in the improvement of the score.
  • An important incentive for using the app and improving CO2 consumption value and score is the sustainable impact and the competition with other users.
  • If you use “saved trees” as a unit for CO2 consumption score, this may be a strong incentive too.
  • It’s great to show progress because the number of saved trees is constantly growing. But we are open to ideas here. 

05. Saving Network

• Users are enabled to build up saving networks.
  • Network improves score:
    • By motivating many people with good consuming scores to join your network to improve your score.
    • Giving users an overview about how their networks affects their score
  • Users should see a number of how their networks affect their score “your network improves your score by X points”.
  • User sees an overview of his network, can search for contacts on a search bar (user name) to compare scores (to single users or in groups)
    • Contact suggestions per connecting with phone contacts, Facebook.
  • The network score must be the focus on this workflow (score for the collective efforts of the members of the network). How to present it? When? In which pages?
• Your workflow must showcase:
  • 1) How to find a network (list? grid? suggestions based on location/score? search?).
  • 2) Search.
  • 3) Compare scores
  • 4) Action to join.

Screen Specifications

• Phone: 750px width. Height as much as needed.
• Make sure your work is in a vector format, for retina scaling and high fidelity.

Branding Guidelines

• Use a logo placeholder. 
• Follow the branding document for style, colors, and typography.

Design Assets
Folder: https://drive.google.com/open?id=16UKxZYVCwAwrq9ELbEFb1HWXVPqnlmss 

• Branding: official guidelines for style reference.

Target Audience

• Young and sustainability-oriented car persons. They can be drivers, passengers or simply interested in helping.
• It’s targeted to be launched in Germany first (US English language). Also planned to be rolled world wide.
• Typical use case examples may be:
  • Young people that just gathered their driver’s license or seniors who like to get some tips for driving more safe and CO2 saving.
  • Children who want to act more sustainable oriented and motivate their parents to install the app for saving CO2.
  • Parents of these children, who care more for their sustainable driving impact because their children motivate them to do so.
  • People from all ages who are just interested in how much CO2 they are consuming and what it means if it’s set in ratio (by our score).

Judging Criteria

• How well you plan the user experience and capture your ideas visually.
• Are mobile-first principles properly applied to your solution?
• How well you implement the challenge requirements.
• Cleanliness of your graphics and design.
• Creativity and ease-of-use is key to success as it must be engaging to users.

Final Deliverables

• All original source files.
• Files should be created in Adobe Photoshop, Adobe XD or Sketch.
• Numbered/Ordered JPG screen files.
• Marvel Prototype
  • We need you to upload your screens to Marvel App.
  • Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30113090
  • Do not use the forums to request for MarvelApp.
  •  Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
  • You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).

Stock Artwork (Illustrations, Icons, Photography)

• Stock artwork is allowed for this challenge.
• Make sure to declare all your assets properly or you might fail screening.
• You don’t want to fail screening? Read this.