civic mobile app - shawntorres.com · civic mobile app shawn torres final project - icm 517 -...

33
Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II, 2019 See The Live Prototype

Upload: others

Post on 10-Aug-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

CIVIC Service & Mobile Application Project

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you.

CIVIC Mobile AppShawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II, 2019

See The Live Prototype

Page 2: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 2 of 33

CIVIC Service & Mobile Application Project

Introduction

Information Architecture

User Flowcharts

User Interface Development

Design & Branding Development

Medium Fidelity Prototypes

User Testing

Summary of Testing Findings

High Fidelity Prototypes

Conclusion

01

02

03

04

05

06

07

08

09

10

Table of Contents

01. IntroductionThe Problem

It is difficult to access information, stay up to date and track public officials and services. Sourcing accurate, factual and non-partisan political information is challenging and time consuming. There is no single reliable convenient and reference in this area. Reporting issues and engaging with elected officials and public utilities is laborious and requires search engines. According to a survey released by Johns Hopkins University, 1 out of 3 Americans can’t name their governor, 4 out of 5 can’t say who their state legislator is and roughly half don’t know whether they have a uni- or bicameral legislature. Healthy democracies are built upon a knowledgeable population and civic engagement.

The Vision

Introducing “CIVIC”: A new way to be an informed citizen.The CIVIC service and companion mobile app is a non-partisan online database that provides information about all of your government representatives, public services and utility providers information. It removes the need to search various sources for this information and allows you to engage with your community leaders and tax-payer resources from the palm of your hand. Once you create an account and profile, CIVIC will build and aggregate all of your information based on your address. This information is available from a variety of publicly accessible sources as well as compiled from CIVIC researchers and staff. You can also provide the CIVIC service optional profile information to customize your feeds and select issues you want to follow. All account data is private and confidential and will never be used by third parties.

Page 3: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 3 of 33

CIVIC Service & Mobile Application Project01. Introduction

CIVIC Service Company Summary

A lean non-profit start up, CIVIC would have approximately 50 - 75 full-time employees. In addition to Management, finance and administration, departments include, Production, Design & Development, Engineering, Data Services, Testing and Customer Support. Each state or region is assigned a research lead who is responsible for verification, input and maintenance of data for that area. As a subject matter expert, the research lead may be supported by teams comprised by interns, contractors or temporary employees.

Many partners and source data providers have developed API’s and benefit from promotion, referrals and allowing a non-partisan third party manage and develop a single application supporting their individual missions.

Beyond start up capital investment, revenue model and sources could be subscription or advertising based. Functionality unlocking and subscription tiers are also possibilities. In addition, fundraising and donation practices are a proven model for trusted non-partisan online information providers such as wikipedia.

Features & Offerings

From the neighborhood watch captain to the President. This application would allow users to conveniently contact officials, sign petitions, check their districts, voter registration status as well as any other functions that empower and inform constituents, make them more knowledgeable citizens and promote civic engagement. It would be non-partisan and focused on providing local information, imagine a Wikipedia or IMDB for your town, state and federal politics. The following is a list of primary functions:

� Aggregates the user’s representative information into one handy reference tool

� Directory of public utilities contacts and local help lines (based on users address)

� Directory of Local, State and Federal elected officials

� Representative listings providing contact, legislative activities, and campaign finance information

� Checks registration status � Provides polling location (based on users

address) � Provides users political party offices

and leadership information (user self identifies in account)

� Provides current races, candidate profiles and election results (based on users address and district)

� Allows user to add personal listings and contacts

� Allows user to set up notifications (alerts) based on data changes and updates (tracking)

� User can select issues to populate news feed (app aggregates stories related to a specific issue and zip code)

� User can submit information for posting (Wikipedia model)

� Public and political event listings (based on zip code, staff input and vetted user submissions)

� User can add a listing to their personal mobile calendar or download/forward csv

� Share listings and event information via email or social media

Listing information is also predominantly provided by publicly available data sources and partners such as:

www.commoncause.org/find-your-representative/developers.google.com/civic-information/ openstates.orggovtrack.us/congress/votesgovtrack.us/congress/members/opensecrets.org/members-of-congress/vote.org/am-i-registered-to-vote/

Page 4: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 4 of 33

CIVIC Service & Mobile Application Project01. Introduction

Who is “CIVIC” for? Everyone.

CIVIC’s mission is to empower, inform and encourage civic participation. As you will see from our user stories on the following pages, there is a wide range of uses for CIVIC. It provides information that is already publicly available from various sources. It aggregates stories and facts from your interests and political positions. It just makes it conveniently accessible. The user shapes the functionality of the app by how much information it feeds it. Basic users will just use it as an address book, advance users can make it into an activist tool or legislation watchdog. The choice is theirs. Democracy meets the Information Age. The goal is to keep the database up to date, accurate and factual with a mission critical responsibility to filter out any harmful content and make it a priority to reduce partisan, untruthful or unverified additions or submissions. Working hard to be a trusted partner at users fingertips, a reputable and reliable source and protect their privacy.

Unique Value Proposition

An application that provides greater access and store entities like your local home association, public services, local, state and federal officials. This app would also provide guidance on their roles, provide notifications, support voting registration and other key enablers to civic participation and engagement. With a focus on your specific local/county information, this non-partisan application would be a one stop shop to ensure your taxes are working for you and your officials can be contacted and held accountable. Currently there are some similar apps but the developers are marketing the platforms like “citizen lab”https://www.citizenlab.co/ to governments who pay licensing and support fees to manage the public facing applications with the selling point of greater efficiency and streamlining operations. There are also websites like “commoncause.org” https://www.commoncause.org/find-your-representative/addr/ that provide information about elected officials, but are activists in tone and nature. Civic would be a different entity in this space like Angie’s List or IMDB, simply an information provider with feeds based on the users interests given at registration and easily updated in user profile settings. The Civic service would combine all available databases, information sources into one dashboard.

Page 5: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 5 of 33

CIVIC Service & Mobile Application Project02. Information Architecture

02. Information ArchitectureThe general approach to the information architecture of a mobile application is different from a website map in the sense that a useful mobile application is centralized on functionality rather than providing information. Mobile screens are smaller than websites and hence the navigation requires minimized controls and options. For example, rather than just providing a calendar of events, in a mobile app, the user may be able to RSVP or add the event to their personal calendar.

The user will need to register or provide some personal details in order to use a mobile app, the experience can be more personally tailored to that specific users needs rather than an anonymous website visitor who we may or may not know or understand the intentions. A wealth of user information and analytics can be sourced from mobile applications. User navigations can be dynamically created by preferences or activity history.

Proposed Information Architecture

Following the same content classification schema as our web site for consistency, we have reduced the amount of posted information and focused on functionality. Localization and customization are important facets of the app as a primary benefit to those seeking a long term relationship and connection to their area.

Utilizing ideation techniques such as user journey, role playing and flow charts. We have emphasized personalization of the app over static navigation schemes. Functionality will include bookmarking, saving to personal calendar, personal notes and exporting information for use in other applications making the app a useful engagement tool.

Page 6: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 6 of 33

CIVIC Service & Mobile Application Project02. Provisional Personas

Carol is a busy mom and has a full time job. She has noticed standing water on her street for a few weeks. She wants to report the issue but doesn’t know where to begin.

Angelica watches the news and is concerned about crime in her area, especially recent gun violence against children. She wants to know what her community leaders and elected offi-cials are doing about it and engage with them.

Mark is a self-described political junkie. He wants a political reference tool that will keep him up to date and provide clear and unbiased information on issues and congressional repre-sentatives he is following.

Exploring Use Cases

Page 7: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 7 of 33

CIVIC Service & Mobile Application Project02. User Scenarios

There is a puddle of standing water on the corner of Carol’s street and it has been there for a couple of weeks. It appears that there may

be a leak or clogged drainage and Carol is afraid that it may become a nest for mosquitoes and other waterborne illnesses for nearby residents. Carol decides to take action and report the issue, but does not know where to begin. Does she call her water company or the county? She does not have the time to go to several different sources to learn how to report and get contacts. She downloads the CIVIC app as a means to easily access her public utilities, local representatives information and report issues. It is also promises to be a convenient repository for all her community related activities. She wants to find the right contact, report the standing water and keep notes on the issue

In 2019, Washington D.C. reported over 12 shooting deaths of children under the age of 18. Angelica is a

DC resident and watches the news and is concerned about crime, especially violence against children and shootings and does not know how to get involved. She is a working professional and has limited time to attend community meetings and workshops yet she wants to reach out and help somehow. She also wants to know what her community leaders and representatives are doing to curb the violence. She downloads the CIVIC app to learn what her local council persons name, contact information and upcoming activities related to this issue are. She also would like to sign any petitions, join efforts or learn about any volunteer programs related to stopping gun violence.

Mark wants to know congressional representatives voting record. Cares about specific issues and wants to know what their representatives

are doing. He also wants a handy reference next time he gets into a political discussion with a colleague or friend. Aside from weekly programs on his local public broadcasting stations and networks, he is disappointed at the lack of factual legislative coverage on popular media and finds that it is hard to find a non-partisan source of statistics on what political leaders are actually doing. He often has to search online and visit several websites to see what committees his senators serve on, how many times they have appeared and voted, what legislation they have proposed. He wants a simple, clear way of tracking who is who, what they are doing and how to contact them. He wants to see any recent stories mentioning his congressional representatives.

User Scenarios

01 - CAROL 02 - ANGELICA 03 - MARK

Page 8: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 8 of 33

CIVIC Service & Mobile Application Project02. Information Architecture

Basic App Layout

In order to fully explore user goals, tasks and workflows, we first need to have an understanding of the applications information architecture and layout.

On the following pages the first chart is a preliminary content map of the CIVIC app followed by three user workflows our provisional personas might use to achieve their goals. CIVIC will be a complex data app with the sole purpose of making government more accessible. Users will be able to reach out to their representatives on lunch breaks, during commutes and those many idle moments between the activities that fill up our days. As a tool, it should be user friendly and convenient. The proposed workflows will allow us to visually see how we can provide this service, discover potential challenges, and discuss how the components of the app will best meet user needs. We focused on problems that would be unique to CIVIC, as many schemas for things like adding things to your calendar are already standardized by other apps.

Page 9: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 9 of 33

CIVIC Service & Mobile Application Project03. User Flowcharts

Page 10: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 10 of 33

CIVIC Service & Mobile Application Project03. User Flowcharts

Page 11: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 11 of 33

CIVIC Service & Mobile Application Project03. User Flowcharts

Page 12: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 12 of 33

CIVIC Service & Mobile Application Project04. User Interface Development

04. User Interface DevelopmentPaper Prototypes

Low fidelity prototyping is about ideas. Low fidelity means that the items produced require no technology, little effort, minimum experience and skill level and are really about conceptual or design thinking rather than execution. Interactivity is not just digital. Interactivity can be mechanical, analog, organic. Interactivity just means that two entities respond to one another, that there is communication, cause and effect. So, paper prototyping is the art of taking your sketches and converting them into interactive maquettes with layering, scizzors, tape, glue and other materials. I have even seen plywood mobile phone frames that allow paper “screens” to be swapped out on “key presses”. Please see the resource links below to see all the creative ways and methods you can use to make your paper interface wireframes interactive.

Page 13: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 13 of 33

CIVIC Service & Mobile Application Project04. User Interface Development

Basic Interface

We jumped into paper prototyping pretty quickly, creating low fidelity sketches of the actual user interface before working on any tasks. These are focused on spacing. The main navigation will appear at the top. On the first use, the user will be asked to sign up or sign in if they have already created an account with the service. The lower part of the home screen would have a scrolling area of headlines from the feed. It would have a small icon on the right side to maximize the feed.

Page 14: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 14 of 33

CIVIC Service & Mobile Application Project04. User Interface Development

Task: Account Sign Up.

All the data in the app will be aggregated through the online CIVIC service which is a cloud database that compiles information from several publicly available online sources as well as having a staff of researchers who verify and curate data. In order to personalize the directory and other representative information the user must provide their name and address. They also have the option of further personalizing the issue feed by answering a brief survey which gets added to their profile.

Page 15: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 15 of 33

CIVIC Service & Mobile Application Project04. User Interface Development

Task: Reporting and issue.

All the data in the app will be aggregated through the online CIVIC service which is a cloud database that compiles information from several publicly available online sources as well as having a staff of researchers who verify and curate data. In order to personalize the directory and other representative information the user must provide their name and address. They also have the option of further personalizing the issue feed by answering a brief survey which gets added to their profile.

Page 16: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 16 of 33

CIVIC Service & Mobile Application Project05. Design & Branding Development

05. Design & BrandingBuilding a visual language.

We started developing our visual language for the application. Initial design assets have been considered and presented such as color pallette, typography and icon system. I created the static layouts in IPhone X dimensions just out of convenience. I could quickly update screens upload to marvel and preview them on my phone. I learned that if I were missing a section, I could create some basic pages and use pre-existing components directly within the marvel platform.

Page 17: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 17 of 33

CIVIC Service & Mobile Application Project05. Design & Branding Development

Moodboards

In order to prepare for the design process, Image boards are essential in communicating ideas to designers and developers. Tone and theme are captured in the section of images and can set direction and save lots of time as you move forward with developing a style guide and visual assets. Understanding what and where to draw inspiration from is very helpful in communicating your overall vision to your team, stakeholders and decision makers.

Page 18: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 18 of 33

CIVIC Service & Mobile Application Project05. Design & Branding Development

Color Palette, Typography & Logo

Creating design assets early in the project may seem like a trivial or premature task to some, but I believe that working on aesthetics and branding in the ideation and prototyping stage lends legitimacy to your ideas, realizes the product concept in decision makers minds and helps stakeholders see your vision. It provides your project managers and advocates tools they can use to inform, report and solicit support for the project. Images are still the most effective way to communicate messages. It is not just making things pretty, these benefits are invaluable in building momentum, providing direction and keeping goals and the end user in mind.

Page 19: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 19 of 33

CIVIC Service & Mobile Application Project06. Medium Fidelity Prototypes

06. Medium Fidelity PrototypesTools

Software like Marvel POP, InVision and Adobe XD make it possible to quickly take flat designs, merge them into a low tech interactive prototypes and collaborate online with stakeholders and testers. Soliciting and processing user feedback into meaningful and actionable intelligence will always make your designs better, fuel your idea and lead to success. A medium fidelity prototype is a prototype with limited functionality but clickable areas which presents the interactions and navigation possibilities of an application. Medium fidelity prototypes are usually built upon storyboards or user scenarios.

Why Marvel?

I have not had much time learning and exploring all the capabilities of the platform, but I picked Marvel as my primary prototyping tool because it was free and offered the simplest way to add interactivity to static designs. I created all the design in Photoshop and Illustrator CC and it was just convenient to export and share in a cloud based service. In the future, I would like to add animated layered transitions and other elements to my prototype, and will most likely explore proto.io but for the purposes and goals of this class, Marvel POP, was a better fit. This is not an interface design class, it is about developing and refining an idea to a good prototype.I am fairly active during the summer and I appreciated being able to access my project from anywhere on multiple devices. Marvel is focused on collaboration and feedback, so even on the free tier, I was able to embed my prototype on a webpage, send a link and get comments on the fly. I also like that through the Marvel mobile app, I was easily able to see my designs on an actual target device and test users on a device rather than a webpage simulation. This offers invaluable information on screen proportions, readability, finger gestures, lay out and usability.

Page 20: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 20 of 33

CIVIC Service & Mobile Application Project06. Medium Fidelity Prototypes

Screens: Create Account

Medium-fidelity prototypes look like live software to customers allowing participants would be more likely to behave naturally during testing and offer important detailed feedback that could improve the design, ideas, save time and providing fresh perspectives on your plans. During this initial testing of the CIVIC app, watching the participants play with the interface and ask questions really stimulated the thought process and immediately revealed items I could improve.

Page 21: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 21 of 33

CIVIC Service & Mobile Application Project06. Medium Fidelity Prototypes

Screens: Report Water Issue

The intention in these designs is to giove the user more than one path to any given detail listing. They may have a previously saved bookmark under my links. They layouts provide exact proportions for page elements within our target device, an iPhone X. The medium fidelity prototypes were not fully completed for each section. They are intended to test assumptions made about user paths and behavior when assigned a goal.

Page 22: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 22 of 33

CIVIC Service & Mobile Application Project06. Medium Fidelity Prototypes

Additional Screens

Parts of the app that were not specifically tied to the app were created in order to explore cohesiveness of the visual language, alternative pages functions and provide an actual app like feel during testing.

Page 23: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 23 of 33

CIVIC Service & Mobile Application Project07. User Testing

07. User TestingTesting Overview

User testing is designed to explore the CIVIC mobile application ease of navigation, usability and onboarding process. With this particular testing, 3 sessions were completed for three tasks. The sessions were completed using POP, Prototype on Paper app. The goal is to observe how users navigate the application after being given specific goals. Medium fidelity prototypes of the application have been created approximating the layout and functionality of the app. At this point, there has been no coding, much of the content is missing, and the user is simply clicking through a bunch of static pages representing assumed paths. These paths were outlined earlier in the user flow and wireframing generation stage of the project. Ultimately, the results should yield insights into how users will engage with the app, any missing or confusing UI elements and what needs adjustment in order to create a more useful product. Through observation and questioning, users having trouble navigating through primary, secondary and tertiary screens provide rich feedback to the design and development team allowing further refinement of planning documents and guidance for the project. Early user feedback is critical to a thorough and iterative development process and will lead to a successful launch.

Page 24: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 24 of 33

CIVIC Service & Mobile Application Project07. User Testing

Testing Script

Hi, welcome and thanks for volunteering to be one of our testers today! My name is Shawn Torres and I am working on behalf of a new service called CIVIC. Today, I’ll be asking you to complete a few tasks using our mobile app. Please know that we not NOT trying to test YOU, but instead, want to test OUR ideas about the app and how easy it is to use. There are NO wrong answers. Helping us today will ensure that it’s easy to use, will save us time and improve the service for everyone. So, let’s make it fun and don’t worry about getting anything wrong, we learn just as much when things do not go smoothly.

The way this will work is I will provide you with some tasks to complete on the app. I just ask you to try your best to think out loud so I can get an idea of your thought process. I would like to see how you would go about completing the tasks on your own, so any questions you may have, I would be happy to try and answer after we are done.

I do have a non-disclosure agreement for you to sign. This promises that you won’t discuss the product or what we have discussed today with anyone. Here is the device we will be using to test. (Hand participant mobile device)Lastly, with your permission, I would like to record today’s session. The recordings are completely confidential as per the agreement and will only be viewed by members of the development team. Only your voice and hands will be seen in the video, your personal details will be removed from all materials to protect your privacy. I will not use your name during recording. Sometimes it is better for the team to see the sessions themselves in order to understand. Is that OK with you? (wait for verbal confirmation, verify camera is in focus and can record interaction, press record)

So let’s begin!

Page 25: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 25 of 33

CIVIC Service & Mobile Application Project

Task 1: Use the mobile app to create CIVIC account. Pretend you just downloaded the app and do not have a login yet. How would you set up a CIVIC account?

Assumed steps taken 1. On login screen select, “Create Account” 2. Next screen, enter name and personal details or use social media account. Validates. “Next” button appears. Select “next”3. Next screen “One More Step”, user enters personal address, (usually not provided by social media). Validates. “Next” button appears. Select “next”4. Next Screen, as app aggregates user information and builds profile, user reads terms and conditions, Once profile is complete (100%) and user agrees, user selects “Agree” button. 5. “Success” screen appears. 6. User selects “Later” button and arrives on home screen.

Task 2: Use the app to call your local water company. Pretend you are a CIVIC user and want to call your local water company to report an issue.

Assumed steps taken 1. On login screen select, “Login” 2. Home page user selects “Directory”, slide down appears3. User selects “My Utilities” option4. Next Screen, user selects “Water”5. Next Screen, water company details for zip code is displayed. 6. A. User either clicks on phone in details or B. clicks on “take action” tab and slide out options appear. 7. User selects “Call” icon.

Task 3: Get your state government representatives contact info. Check your State Senator’s campaign. finances.

Assumed steps taken 1. On login screen select, “Login” 2. Home page user selects “My Representatives”, slide down appears3. User selects “State” option4. Next Screen, user selects one representative5. Next Screen, representative details are displayed.

07. User Testing

Task List

Page 26: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 26 of 33

CIVIC Service & Mobile Application Project07. User Testing

Summary of Testing Findings

The user tests were very helpful in allowing us to evaluate strengths and weaknesses of our initial design assumptions. Participants felt that the app was easy to understand and navigate. In general users were able to independently navigate through the pages of the app on their own. All participants were able to successfully complete all tasks. Participants had varying ways of completing the tasks, but ultimately yielded the same result. Generally, participants were not clear on the meaning of “My Links”. They expressed a desire to have“My Links” better explained. Also, the “My Links” icon is not consistent throughout the app and participant 3 suggested that the action menu icon for “Save” was a better option for “My Links” throughout the service. The key takeaways from these sessions have been summarized under the following three focus topics:

1. Navigation

Participant 2 suggest “back/forward” navigation in addition to the headers. The user found themselves wanting to return to previous screens and found that navigation awkward. Participant 3 - clicked on “My Links” as first choice for water utility test. Suggested just adding “My Utilities” to primary home navigation. Participant 3 also had trouble returning to the home page while on tertiary page. Possible solution would be to add “home” icon to primary top navigation. Replacing one of the options or providing six options instead of five. Participant 3 would like the ability to reclick the notifications icon to close the notifications screen once it is opened. On the “action tab” icon, the “call” icon should be changed to represent a more modern phone.

2. Sign Up Process

Participant 1 suggested that a privacy note or link to privacy policy be included in the sign-up process. Specifically “The One More Step” screen. To ensure address and personal details confidentiality.

3. App Functionality and Feature Suggestions

Participant 1 suggested ability to hide news feed area on homepage for users who may be uninterested in the news and issue notification functions within the app. Search field should provide suggestions on input. On first use, the home screen should offer a “quick tips” or tutorial.

Page 27: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 27 of 33

CIVIC Service & Mobile Application Project09. High Fidelity Prototypes

09. High Fidelity PrototypesRefining the vision.

One person, or even a few people cannot do it alone. They cannot design a product that will potentially be a tool for thousands, perhaps millions and get it perfect the first time. It takes a village to raise a good app. Do not misunderstand, everyone knows that this is your baby, your brain child and without the tenacity and courage of the seed, there would be no tree.

Early user testing is critical to the design and development process. It saves time and money. It prevents little mistakes from becoming tragedies. It provides insight and reminds the team that there are human beings at the end of their efforts. Those human beings may not behave and use the product in the way the creators intended as they are approaching it without assumption, forethought or domain knowledge. It balances administrative goals, marketing objectives and other forces with a user centered organic observation and knowledge.

There are just things that developers miss, didn’t consider or could have taken further. Testers help us, testers fill in those gaps. They make our designs better, they can support our arguments in resource and timeline discussions, they make our products better and as a result help us beat marketplace competitors. The trick is converting feedback into meaningful and actionable intelligence. That in itself is an art.

Page 28: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 28 of 33

CIVIC Service & Mobile Application Project09. High Fidelity Prototypes

What was changed and why.

In the CIVIC project, most of the flaws were revealed in testing. We were not completely satisfied with the design of the medium prototypes. There was disagreement about the darkness of interface, font size and spacing, Was it boring or not “sleek” enough? But that is not what testers cared about at all. Mostly, they just wanted to get something done. Although our testers found the app easy to navigate, they were unclear about the terminology. It was clear that we rushed through the conceptual stage of “My Links” and that users “would just know” that is where they keep their bookmarks. We needed to go back and think that through some more. Also, in all the materials describing the app, quick access to utilities was a prime benefit but in the UI development, somehow it was placed as a second tier item. This would require us to revisit both the content strategy and the user flow charts.

Time and attention is a precious commodity these days. Everything is competing for it, so when a product seems like it is “wasting” our time, even a millisecond, users are not forgiving. The information age has produced low tolerance for trial and error (or even instruction) and high value to intuitiveness. Even complex commercial products are now required to be immediate, responsive and easy.

That is why collaborative iterative methods is UI/UX magic. There is a paradox, where you need to blaze a trail forward in order to improve what was done previously. Two steps forward, one step back is steady progress. Each new screen informs the last, testing is just a powerful and more effective way of informing the whole process. When the path is not defined, it is prudent to not go too far ahead, but we must push forward just enough to reveal our missteps and go back. And don’t leave anyone behind: consensus is a compass, it lets us know we are making forward progress in the right direction.

Page 29: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 29 of 33

CIVIC Service & Mobile Application Project06. Medium Fidelity Prototypes

Revised Screens: Call Water Utility

High-fidelity prototypes refelected many of the changes suggested by users on our first round. We added back and forward buttons to the bread crumb area. The font was changed in the bread crumb area to a narrower typeface within our style guide in order to allow more characters and save space. The bookmark icon was made consistent throughout the application. Actual photos and headlines were used instead of placeholders.

Page 30: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 30 of 33

CIVIC Service & Mobile Application Project06. Medium Fidelity Prototypes

Revised Screens Continued

The slide out menu was modified slightly and the touch areas on the main navigation were made larger.

Page 31: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 31 of 33

CIVIC Service & Mobile Application Project06. Medium Fidelity Prototypes

Revised Screens: See Senator Finances

A representative detail page was added to our prototype along with chart elements and figure call outs. Action slide out remained the same. The project continues to be a work ain progress and we will provide upadtes as new sections and functionalities are added to the concept app.

Page 32: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you. 08/23/19 Page 32 of 33

CIVIC Service & Mobile Application Project10. Conclusion

10. ConclusionFinal Thoughts.

What anything learned? Yes, I learned a lot through this project and during this course. I have a structured approach and methodology to ideation. It isn’t just eureka moments and divine flashes of brilliance, some work and discipline is necessary. I was introduced to Dan Brown and his eight principles of information architecture.I found creating personas, scenarios, user flow charts all In addition reignited and jump started my curiosity and focus on a user centered development approach. I realized and believe that user testing is a critical part of the design process in order to maintain a state of continuous improvement. Testing makes everything better so do it early and often. I discovered and had a chance to explore a bunch of new tools and resources to create and prototype mobile apps. Prototyping is iterative and iterations are paradoxical. There have been challenges, it all goes so fast, if anything, this was just an introduction and starting point for many more years of studying UX/UI. Six weeks to learn, a lifetime to master.

Page 33: CIVIC Mobile App - shawntorres.com · CIVIC Mobile App Shawn Torres Final Project - ICM 517 - Ideation, Prototyping & Testing Prof. Patrick Hogan, Quinnipiac University, Summer II,

CIVIC Service & Mobile Application Project

Confidential. The information contained in this document is intended only for the person or entity to which it is addressed. This email may contain proprietary, business-confidential and/or privileged material. Any use, review, retransmission, distribution, reproduction or any action taken in relation to this information is strictly prohibited. Please visit www.shawntorres.com for inquiries and requests. Thank you.

Thank You

See the full interactive prototype at https://marvelapp.com/432ah35/screen/60638388

Thank you for taking the time to go through this presentation. CIVIC is a concept for a service and app that has a role in making our lives better. Healthy democracies are built upon a knowledgeable population and civic engagement. As I write these words, there are people being gunned down in shopping centers, immigrants being held in cages along the border for simply wanting what so many had done before them: migrate for a better life. Not all, but most. Our roads, schools and hospitals all need attention. The environment is eroding at an alarming rate. People fear each other and the worse for their futures.

There is so much work to be done, yet people worry about jobs, careers and the “fragile” economy. The only way to tackle these problems is: together. Through participation, being aware and keeping leaders accountable. The hope, vision and potential of the CIVIC app is to make that easier. Partisanship is a disagreement about values, “how” to solve problems, unfortunately, the growing negativity in political discourse has just turned people off to civic involvement.

Leveraging technology in a non-partisan way to make government simply more accessible, is a powerful and right thing to do. Anything that discourages or limits participation is not. As discussed, many of the functions of the app already exist in other forms, the CIVIC idea is just integrating it all into one platform. I encourage anyone who reads this: steal this idea, build it, I would even be happy to help and together we can try to make things better by making better things.

See The Live Prototype