PROBLEM AND SOLUTION OVERVIEW

Similar documents
CS Equalizing Society - Assignment 8. Interactive Hi-fi Prototype

KinX. Bringing families together. Brandon Development Jackie Design Tony User Testing / Documentation Shahab Manager

showme Interactive Medium-fi Prototype

balancer high-fidelity prototype dian hartono, grace jang, chris rovillos, catriona scott, brian yin

Team : Let s Do This CS147 Assignment 7 (Low-fi Prototype) Report

Assignment 8 rekindl Local Community (1:30PM) Meet The Team. Ryan C. Amanda L. Sara V. James C.

First login to your personal HealthFitness website (there are separate login instructions to get to HealthFitness posted on HR Solutions).

MANAGE YOUR CONSTRUCTION21 COMMUNITY

Chris Jung, Garrick Li, Luyi Lu, Grant Neubauer CSE Autumn d: Usability Testing Review. Usability Test 1

Interactive Hi-Fi Prototype

Dropbox.com redesign. March dropbox.com/business

Problem and Solution Overview: An elegant task management solution, that saves busy people time.

meetchewthere Medium-Fi Prototype

meet chew there Medium-Fi Prototype

Understanding prototype fidelity What is Digital Prototyping? Introduction to various digital prototyping tools

facebook a guide to social networking for massage therapists

Mayhem Make a little Mayhem in your world.

MiPhone Phone Usage Tracking


To register for the Colorful Choices Challenge you must complete TWO Steps: 1. Create a Health Fitness Account 2. Create a Colorful Choices Account

Mobile App Guide Utility Telecom Accession Communicator

EventCenter Training SEPTEMBER CrowdCompass 2505 SE 11 th Ave, Suite #300 Portland, OR

WEEK 6: Interactive Medium-fi Prototype

NationBuilder Handbook: How to get the most out of your database

Google Classroom User Manual

An Introduction to Google Calendar

Turn Your Ideas Into Actions A 5 MINUTE GUIDE TO STORMBOARD

MyOfficeSuite Desktop App

TEAM FOCUS POCUS JOCELYN HICKCOX DANIEL MELENDEZ ASHLEY MILLS

2013 STRIVING FOR EXCELLENCE AWARD SUBMITTAL RAISING THE BAR

RMUG February Photos App

Competitive & Comparative k Analysis k

WHY AN APP? Communicate, Educate, Train, & Sell

Introduction. Creating an Account. Prezi.com Getting Started

Click here for a PDF version of this tutorial. Start. MSTI 260 l HOME

ADULT-THINGS. Erica Eastrich - UXD

SkillSwap. A community of learners and teachers

American Public Health Association s Affiliate Online Community User s Guide. October 2015 edition

Usability Testing Review

Promoting Your Small Business with and Social Media

August 12. Tips for Gmail. Tips to save time and increase your productivity. Gmail Training

EECE 418. Fantasy Exchange Pass 2 Portfolio

Box. Files and Folders. Upload files or folders. Create a folder.

Scorebook Navigator. Stage 1 Independent Review User Manual Version

CS 147 Let s Do This! Assignment 6 Report

Breeze at Penn State. About meeting roles and permissions

GVSU Skype for Business: Quick Start Guide (using a MAC)

ACP. online store. the new. Detailed product

Portfolio Classified due to NDA agreements

The Kindred Directory allows you to search for employees and locations across all of our lines of business.

Technoversity Tuesdays

Table of Contents Chapter 1: Getting Started System requirements and specifications Setting up an IBM Cognos portal Chapter 2: Roambi Publisher

Medical Photography and Digital Imaging

Office 365 for ipad. OneDrive for Business Word Excel PowerPoint OneNote Lync OWA for ipad

GRADY NEWSOURCE KATE DEVLIN, LEAH MOSS, ANDREA SKELLIE & ASHLEY PANTER

Perfect Timing. Alejandra Pardo : Manager Andrew Emrazian : Testing Brant Nielsen : Design Eric Budd : Documentation

What s New in Cognos. Cognos Analytics Participant s Guide

Introduction to NET CR 16 Release May 22, 2018 Page 1

interview.io Final Report

How To Create Apps For Internal Communications

Wanderlust Kye Kim - Visual Designer, Developer KiJung Park - UX Designer, Developer Julia Truitt - Developer, Designer

STG Android User Guide

Introduction to the Learning Environment v8.3.0

Ryan Parsons Chad Price Jia Reese Alex Vassallo

Spark Quick Reference Guide

QUICK START GUIDE NTS HOSTED PBX CALL MANAGER. Welcome. Getting Oriented

Vela Web User Guide Vela Systems, Inc. All rights reserved.

How to Host WebEx Meetings

Getting Started with Yammer Nicolas Kanaris July 2016 Cyprus Pedagogical Institute #ATS2020

The guide for the Merrill Mobile catalog available for tablet-based devices. Version 3.0

FAQs. A guide for school app administrators

Contents Office 365 Groups in Outlook 2016 on the web... 3 What are groups?... 3 Tips for getting the most out of Office 365 Groups...

UI/UX BASICS. What is UX?

DIGITAL IDENTITY MANAGEMENT Temple Community Platform

FoodBack. FoodBack facilitates communication between chefs and patrons. Problem Solution and Overview: Yes&: Andrei T, Adrian L, Aaron Z, Dyllan A

Heuristic Evaluation of [ Quest ]

LimeSurvey manual. Version; Authors: Carl DEVOS, Laurence Kohn. Page 1 of 48

DIGITAL IDENTITY MANAGEMENT Temple Community Platform

DIGITAL IDENTITY MANAGEMENT

This is like an educational version of Facebook. Pupils seem to like using it and do so with ease.

CUSTOMER PORTAL USER MANUAL. Marketing

Heuristic Evaluation of Covalence

Flow. Streamlining your creative process so you can pursue your passions. Hi-Fidelity Prototype Report

Yahoo! Digits: A Design Driven to Provide Instant Data Driven Insights and its Use in User Experience Design

Sukjun Lim Strategic Planning, User interaction, Design research specialist

ValuesVenture User Guide

The Researcher Development Online Tool User Guide for AUT Postgraduate Research Students

Human-Computer Interaction: An Overview. CS2190 Spring 2010

QUICK START GUIDE. Welcome to EDGAR Pro, your access to SEC filings and more! We ve created this user guide to facilitate your use of this service.

Mobile App. Create an account. Login with Facebook

Even better, you can have the Start Menu expand to full screen whenever you want, eliminating the need for a Modern UI Start Screen.

View the Advisor Case Load Self Service Report

Thank you for purchasing your new Moochies Watch. We hope you, and more importantly your kids will love it as much as we did creating it.

Evernote for Educators

Chronodat Help Desk (Lite)

soneme encouraging the cooperative discovery of lesser known artists

Facebook Basics (for individuals)

Chronodat Issue Tracker Add-in. User Manual CHRONODAT, LLC. February 15, 2017 Version P age

PRODUCT PAGE PHASES and EXPERIENCE DESCRIPTION

Chronodat Help Desk. (User Manual) By CHRONODAT, LLC

Transcription:

PROBLEM AND SOLUTION OVERVIEW Currently, very few people have systems in place to track water usage. At this time, there is no easy or convenient way to collect this information. As a consequence of this, most people have no concept of how much water they use, or where it is used, and therefore have no motivation to track or reduce use. Even for those who are interested in saving water, there are no concrete implementations to feasibly and easily facilitate this, because people cannot even definitively determine their main source of water use. To combat this void in available technology, our group proposes a vision of a comprehensive, in-residence system that 1) automatically tracks water use and sends data to our app, 2) allows users to set personal and residence goals, and 3) allows users to see

their performance compared to that of others (by location or demographic), which would hopefully create a competitive backdrop for conservation motivation that may even encourage those who might not have cared without these added incentives. TASKS Check personal water usage data simple We ve made the personal usage our new home page. Once a user logs in, he or she will be directed to the new my usage page. Each bubble represents a type of water source: shower, sink, toilet, laundry machine, etc. The bubbles are layered to show your personal average, personal best, and current usage. This allows the user to easily compare their current performance with previous performance at a quick glance. Clicking on a device type switches to a detailed page about that specific device. This page includes a line graph that shows usage over time, tips for conserving, and a list of friends who are performing the best relative to this device. Compare water usage with friends medium Swiping to the left brings the user to a page where they can view their friends overall water usage. This page is just an overview to get a general picture of friends relative water usage based on bubble sizes. When the user click on a specific friend, he or she will be brought to a bar graph view that compares his usage with the selected friend s usage with data broken down by device type. Find motivation to conserve complex Finally, the last tab is the competition. There will be the ability to create a new competition, but the user can also be invited to join a competition. In the competition tab, the user can see the team standings for each competition he is participating in. Another way we are trying to motivate our users is also just by presenting them with personalized tips. As we discovered through our interviews, many don t conserve mostly because they don t have concrete ideas of how to reduce water usage. We also received a lot of feedback on our lo-fi prototype to provide tips. By educating, we will be providing extra motivation to conserve. REVISED UI DESIGN We redesigned a lot of our UI to address feedback on our lo-fi prototype: Removed home screen (resulting in cleaner navigation) We received feedback that our home screen did not help users complete any of their tasks. Not only was our home screen static, but it also lacked any useful information and we realized that the navigation functionality of the homepage could be condensed into a toolbar allowing users now to go between views using a single swipe instead of two clicks.

Removed campus/city screen We removed the campus/city screen because not only was it a cause of a lot of ambiguity, but we also realized that large scale water usage analytics would not be useful to everyday users of our app. Though the campus/city feature would have been useful for people managing utilities, we realized that these people are not part of our target audience. With the mindset that we want our app to be focused on doing a few tasks well, we decided the campus/city screen was not worth keeping. Removing this allowed us to rethink the flow of the app and make the parts that we kept more integrated.

Focused on individual usage Part of refining our app into a medium-fi prototype involved narrowing our focus to individual users. We implemented a new level of analytics that allow users to view trends for showers, laundry machines, toilets, and sinks. By clicking on the icon of the desired water usage, the user is brought to a page that also includes customized tips to improve usage habits. For example, our app detects an extremely low efficiency toilet in in the house, it will suggest the user to replace it with a high efficiency toilet and give the user water savings estimate to quantify the benefits. Incorporated social/tips Also shown in the screen above, we ve incorporated the social and educational aspects of our app directly into the my usage screens.

Provided more data through visuals Our user feedback indicated that our Friend s Usage page did not give enough concrete data, but provided a fun visual way to see general usage. For our medium-fi prototype, we wanted to maintain the easy-to-read and fun aspect of our original design while incorporating detailed analytics. Our new design, shown below on the left, organizes each water usage as its own bubble. The outer ring of the bubble represents the user s average usage, while the dotted ring represents the user s personal best. The darker inner circle represents the user s current usage level. Clicking on an icon will open a page dedicated to a specific water source type. My usage: left shows general usage amounts, right gives more in-depth view that gives change over time as well as tips and top friends. Friends/friend usage: left shows overview of all friends usage where user can quickly compare friends by bubble size, right give more in-depth view that gives device-specific comparisons between the user and a selected friend.

PROTOTYPE OVERVIEW HTML: https://www.dropbox.com/s/zwzpmp0iqqc2pix/howlow.zip?dl=0 PDF: https://www.dropbox.com/s/t2by9ce8rme8zfw/protoio.pdf?dl=0 README: https://www.dropbox.com/s/e173u3d92bxklrd/readme.txt?dl=0 (also copied in appendix for convenience) Our team tested the three different prototyping tool options (Marvel, InVision, Proto.io), and decided to use Proto.io because of its interactive capabilities. We found that Marvel and InVision were similar to PoP and only allowed minimal user interaction such as swiping and linking pages. WIth Proto.io, we were able to create interactive buttons, toggle features, and animations that closely resemble what we want our High-Fi app to look like. Proto.io helped us create our prototype by providing a number of premade features such as buttons and interactive lists, and allowing us to simulate our app on the ipad through their web preview feature. Though the tool is very useful, Proto.io has quite a steep learning curve and it took our team members a few hours of tinkering to get the hang of it. Proto.io also has poor collaboration capabilities that make it difficult to have multiple people working on a prototype simultaneously. In our prototype, we left out our homepage animations simply because it would have been too difficult to hard-code the bubbles bouncing off each other. We made sure to implement at least one version of each feature into our prototype, but left out all of the redundancies. For example, on the Friends page, only one of the people on the friends list is clickable. We also had to leave out the option to change the viewing scope on all of our various graphs between day, month, and week because we lacked time and the built-in menu wheel tool in Proto.io was too difficult to user.

APPENDIX README.txt Enter your name on the login page and press enter. The app can be navigated either by clicking the icons at the top or by swiping left or right (click swipe mouse). The main page displays the user s water usage, broken down by appliance. The inner bubble shows the use in the current week, the dotted bubble shows the previous lowest water usage and the outermost bubble represents the average usage. As the current usage reaches the average, the bubble pops (not implemented). If you click on an appliance s icon, it will take you to a page with the breakdown of how that appliance was recently used. We do not have settings to change the time frame of the graphs yet. The page also contains tips on how to improve water conservation with that appliance. There are currently two notifications that you can interact with from the main page (the notifications appear on the other pages, but those cannot be interacted with); one indicates that you have a friend request, the other that you have been invited to a competition. You can accept Alex White as a friend on the friends page or join the Roble Dorm Competition by clicking on the competition icon and accepting the request. The friends page shows all of the user s friends in their individual bubbles. The bubbles size indicates how much water the friend has been using. By clicking on a friend s tab, you can see your usage compared to theirs. We have only implemented Andrew Johnson. The competition tab shows the state of the competition that the user is part of. The top right icon will include all account information.