UX Research and Design Portfolio

JosephHowerton UserExperienceResearchandDesign

UXPortfolioSamplesandDocumentation

Neighborhood Watch mobile application (prototype)

Project: Neighborhood Watch mobile application (prototype) Problem: Neighborhood Watch is a community awareness app that encourages citizens to "Check In" at trouble spots in their neighborhood. Goal: To reduce crimes or minor problems in an area, and generally, make neighbors aware of what's happening in their community. RolesandResponsibilitiesUserResearch(R is,CompetitiveAnalysis,PersonaandScenarioDevelop

equirementsFindingsandAnalys

UserExperiencement,UsabilityGoalsandUserTesting)(TaskFlowsandNeedsAnalysis)

Documentation( tionDeck,UserTest,SupportingDocuments)SynthesisPresentaProjectManager(ProjectPlanning) Requirements Findings Worksheet 3.1: Requirements

Project Name: Neighborhood Watch mobile application (prototype) Project Date:

Product Name: NeighborhoodWatch

Current Phase: Design

Prototype Name: Neighborhood Watch

Requirement Name

(Examples) Type Priority Validated?

Y/N Results Requested Changes

The system shall have a mobile and desktop aspect of the application.

Functional / Interface High N

The system shall, in the mobile and desktop portion of the application, require user verification.


The system shall, in the mobile portion of the application, provide an interactive map to the user.


The system shall, in the mobile portion of the application, allow the user to tag an area for crime.


The system shall, in the mobile portion of the application, allow the user to check in on an area tagged with a crime.


The system shall, in the mobile portion of the application, use a mechanism to display the level and/or type of crime an area is noted for.

Functional / Interface Medium N

The system shall, in the mobile portion of the application, accept voice input for tagging.

Interface Medium N

The system shall, in the desktop portion of the application, allow the user to add more details to a tag he has previously made.


The system shall, in the desktop portion of the application, allow the user to change settings and specify territories.

Functional / Interface Medium N

The system shall have a user rating system for preventing malicious use of the system, as well as encouraging a social and/or game-like feel to the application.

Functional Medium N

Primary Scenario – Frank Driving home from work, Frank passed by a grocery store, Erie St. Market, which had recently gone out of business. The building was vandalized with graffiti and the owner had moved out after being robbed a couple times. In a conversation with a neighbor, Frank expressed his disappointment; the grocer was a convenient place to shop on the street. Frank's neighbor, Kimberly, suggested he get more involved with the community, and he should install Neighborhood Watch on his smartphone. A number of people on the block were using it. Kimberly explained, "This app makes you aware of potential trouble spots in your community. After you register an account in your neighborhood, you can submit locations that need to be watched. Maybe a crime was committed on a block, like a car window was smashed, or a building was vandalized with graffiti. This context could be added to Neighborhood Watch. If you drive by this location on the way to work, the app will ask you to check out the location. When verify that everything is ok, you will get points attributed to your account, and this is called a Check In. You and your neighbors can compete for Check In points, and the person with the most points is awarded mayor of that location. You'll get ranked on the Neighborhood Watch website, which neighbors compete for top ranking and different badges for doing good work in “looking out” for their community. In addition to trouble spots, you can also tag areas that just need to be checked on occasion. For example, you can check the local park where kids play, or possibly check in on the senior citizen who lives alone, and confirm they're doing ok." Frank liked the idea of using the Neighborhood Watch app while commuting by car. The application connects to the in-car WIFI system and automatically enters driving mode, where it can respond to voice commands. When traveling past Erie St. Market, the car's audio system is lowered and the description is read, "check the south side of the building". Frank responds by voice command "OK", and a Check In occurs which give him three points. After a few months of using the Neighborhood Watch application, Frank has checked into a few trouble spots each week. Although he hasn't witnessed any crimes, he is more aware of what's happening in his neighborhood. He also checks the Neighborhood Watch website to see the rankings and badge awards. The results are that he knows his neighborhood and his neighbors better, and who really cares about the community by their track record of service to it.

Secondary Scenario - Cheryl Cheryl is a mother of two, a twelve year old and a four year old. Being a mother, the safety of the neighborhood they live is one her top priorities. Her subdivision is very close and operates a board of trustees that manage the subdivision's common areas. Cheryl is a member of the board. During their most recent meeting, Cheryl brought up an idea for the subdivision to implement. She wants the all their neighbors to start using this mobile application that she recently heard of. The app is called Neighborhood Watch, and the board agrees to use it. Cheryl drives her children to school every day. On the way to drop them off she passes the local 7-Eleven and Spiro's, the local Greek restaurant. She makes it a point to circle the buildings and mark down if there has been any vandalism. She uses the “Check-In” feature of Neighborhood Watch to mark down the location of the incidents. When she returns home she looks through the newspaper to mark down any incidents reported within the neighborhood. She inputs the addresses of the locations of the incidents in the paper. Later, Cheryl goes to the Neighborhood Watch website to get a full view of all the incidents and their locations. The website pulls in all the incidents reported and is the original location where the neighborhood trustee board has setup their neighborhood watch command center. Further, the website is where neighborhoods are added to the system to allow neighborhood members to join from their mobile devices.

Neighborhood Watch Mid-fi mobile prototype Neighborhood Watch Hi-fi mobile prototype

http://www.unit64.com/midfi-mobile/

http://www.unit64.com/hifi-mobile/

User Test Scenario 1: Mobile Check-in You have already established a user profile. After coming home from work, you are driving through your neighborhood and want to check-in to a flagged location that other members have concerns about. Scenario 2: Add Location You are walking around your neighborhood and you come across a garage door that has been vandalized with graffiti. You want to add a location to your neighborhood so that other members are aware of the trouble and can help prevent it from happening again. Scenario 3: Edit Profile You have used the NeighborhoodWatch application for a few weeks, and you would like to edit your profile. Findings & Recommendations Scenario 1: Mobile Check-in Findings Recommendations User assumes that prototype would store his username and password rather than having to enter it

The final product will remember the user on the mobile device or web browser, but not necessary for the prototype

User wonders whether if he has option to check-in to locations or how close he would have to be to the location to check-in

Will have to determine approximate distance from location that will enable users to check-in for next prototype

User would appreciate that his check-in activity appear in the activity feed

This is an important contribution, and one that needs to be in the next prototype iteration

Scenario 2: Add Location Findings Recommendations User had trouble discerning the difference between flagging illegal activity/vandalism and flagging neighborhood activities. Didn't know that the app allowed for flagging both types of activity

This needs to be more clearly explained. Need to determine if prototype should allow posting of both types of activity OR not. If we do, we need to make the difference more clear

User wanted to be able to sort by his check-ins, other the check-ins of other users, or sort by location, sort by activity

This is key functionality. The ability to sort flagged activity by type, location, and user is going to be integral to the next prototype

User would appreciate that his Add Location activity appear in the activity feed

This is an important contribution, and one that needs to be in the next prototype iteration

Scenario 3: Edit Profile Findings Recommendations User wanted to see his social badges on his profile

We should add this to the next prototype

User wanted to be able to see other member's user profiles

We should determine if we will turn this app into more of a social network where users can look at each other's profiles

User wondered whether user profiles would be anonymous or not

This is a key decision that must be determined in the next prototype

Park and Seek mobile application (prototype)

Project: Park and Seek mobile application (prototype) Problem:With the number of tasks people juggle at any given time, it is not so uncommon to get frustrated with certain occurrences such as spending a good amount of time looking for a parking lot, or worse, forgetting where the car is parked. Goal:ParkNSeek is an application that ensures motorists never have to look for a parking lot or their parked vehicles again. RolesandResponsibilitiesUserResearch(R is,CompetitiveAnalysis,UsabilityGoals,UseCasesa

equirementsFindingsandAnalysnd

UserExperienceScenarioDevelopment,UsabilityTesting)

InteractionDes

(TaskFlowsandNeedsAnalysis)ig

ocumentation(n(ConceptualModelandPrototypeDevelopment)SynthesizedPresentationDeck)

rojectManager(ProjectPlanning,UserTest,SupportingDocuments)DP

User accesses the ParkNSeek mobile Application from their SmartPhone home page” interface by clicking the ParkNSeek logo.

User is presented with the three primary functions/task options:

FIND PARKING SAVE MY LOCATION FIND MY CAR

‣ User selects FIND PARKING.

ParkNSeek displays parking options results in a list format. User can also

choose to view results in a Map View.

‣ Data displayed includes the user’s

current location, an option to hear audio prompts and feedback, the capability to enter location manually, payment credit card options, whether there is GREEN/electric car parking available, the capability to sort by price

or distance, and the capability to go back to the previous screen.

‣ User selects Randolph and State.

‣ ParkNSeek displays the destination

and turn by turn directions to that location.

‣ Other data displayed includes the option to view directions in Map View,

the option to hear audio prompts, the capability to share the directions with friends, and the options to Change location, or Save Location, the ability to access the Help screen, and the ability to go Back to the previous Screen.

‣ User selects Save Location.

User is presented with the three primary functions/task options: FIND PARKING SAVE MY LOCATION FIND MY CAR

‣ User selects SAVE MY LOCATION.

‣ The locations is saved dialog box opens

displaying the exact location of the Parked vehicle, including an icon of a car.

‣ User has options to hear audio feedback,add details to the saved location, share the

details with friends, add another location, or clear the saved location, and the ability to access the Help screen.

‣ User selects Done.

User is presented with the three primary functions/task options: FIND PARKING SAVE MY LOCATION FIND MY CAR

‣ User selects FIND MY CAR.

‣ User is presented with the directions to

the saved location of their car in the default Map View.

‣ Use of icons to represent the car at its location and the user at their current

location.

‣ Other data includes the ability to access the Help screen, From location and To location specifics, the capability

to view turn by turn directions, the option to hear voice prompts and Feedback, and the ability to go back to the previous screen.

Veruca Salt Fashion Boutique

Project: Veruca Salt Fashion Boutique Problem: Veruca Salt is struggling to find better ways to foster continuous communication with customers and do not currently experience a direct positive fiscal result from their various E-Commerce efforts. Goal: To create content and a community to keep users engaged and increase the rate of return visitors. Roles and Responsibilities User Research (Requirements Findings and Analysis, Survey Analysis, Persona and Scenario Development) Content Strategy: Taxonomy Strategy (The Three C’s of E-Commerce, by Mohanbir Sawhney) Documentation (Site Maps, Project Narrative, Supporting Documents) Co-Project Manager (Project Planning)

The Three C’s of E-Commerce

Community Commerce

Content

SiteMapofVerucaSalt’scurrenthomepage

SiteMapofVerucaSalt’sproposedhomepage

Narrative So, it’s here that we will highlight our proposed site map for the Veruca Salt website. It is (foundationally) based off of our group’s client interactions, the original site map we created of the existing Veruca Salt website, our competitive analysis, our sketches and wire-frames, as well as our ongoing project strategy, communications, and documentation. While we didn’t throw the baby out with the bath water by any means, we have made some substantial, reachable recommendations for the Veruca Salt online initiative, and they are conveyed in this proposed site map. The first step we took was to create a site map of the current Veruca Salt website, to serve as a communication tool within our strategy team, as well as Veruca Salt’s project stakeholders, which would give us all a bird’s eye view of the existing Veruca Salt website, and to begin dialing into its strengths, weaknesses, opportunities, and threats. It was an assumption of our group (based off of Crystal’s initial face to face with Amber of Veruca Salt) that there were areas of the site that the client didn’t have a total handle on; including their exact website inclusions and functions. So, though the Home Page was the real focus, we did document the various task flow “offerings” of the current site inclusions to provide as much insight as possible to the client, and our project team, as well as to give the client a backdrop to better understand our final recommendations.

So, as we began to create lo-fidelity sketches, we gathered around the core concept of creating more of an engaging, compelling, community experience for Veruca Salt’s online users. And the challenge became one of re-ordering, and even condensing the site elements, to create a more focused user experience, that is based around that core concept of a community. From there, our higher-fidelity wire-frames began to emerge, and we were now able to inform our proposed site map with the findings, conclusions, and recommendations found there-in. Again, the significant changes in our proposed site map were gathered around the notion of creating a re-designed home, or splash page, that would compel users to engage the Veruca Salt brand as a member of a community, based in fashion.

Current State Assessment Heuristic Analysis and Cognitive Walkthrough

Freecycle.org (Chicago)

Heuristic Analysis


Simple and natural dialog Location: http://groups.freecycle.org/chicagofreecycle/posts/all Problem: I think the ADMIN! Posts at the top of the page are kind of distracting. The term ADMIN! I believe is misleading. Solution: I think it should be called something different as well, like NEW or NEWS or UPDATES. I believe we could add a navigation icon for it, so it’s not at the top of the posts. Severity Rating: LOW Speak the user's language Location: http://groups.freecycle.org/chicagofreecycle/posts/all Problem: At the top of the posts page you will find this e-mail link ModTeam: [email protected], which sends an e-mail to the moderator of the group. I think it’s totally vague and ambiguous, and hard to pick up on. Solution: This should be called something relatable like e-mail Group Moderator. Severity Rating: LOW Minimize user memory load Location: http://groups.freecycle.org/chicagofreecycle/description Problem: This is a description or About Us page of the Chicago Freecycle Network. Solution: I think the page should come earlier in the navigation schema. Further, the files navigation element should be removed because it’s not clear how these fit together, and it is currently adding no value to the user. Severity Rating: LOW

http://groups.freecycle.org/chicagofreecycle/posts/all

http://groups.freecycle.org/chicagofreecycle/posts/all

mailto:[email protected]

http://groups.freecycle.org/chicagofreecycle/description

Be consistent Location: Navigation menu at the very top of the page. Problem: The navigation menu bar at the very top of the page is out of sight for many users. It is not in keeping with design patterns, and the result is competing navigation schemas. Solution: I would like to incorporate the menu and task options into the primary navigation schema. Or at least do something creative with the menu so it “calls out” more readily to the user. Severity Rating: HIGH Provide Feedback Location: http://groups.freecycle.org/chicagofreecycle/files Problem: Under the Group Info tab dropdown you will find a selection called files, but when you click on it there are no files or anything. I feel the user is kind of stuck wondering what is supposed to be here. Further, there is no feedback saying that there no files to be found here. Solution: Let the user know where they are at in this files section, and why it is of value to them with a brief description. Also, add a line of dialogue that says basically, you are here, and there are no files. Severity Rating: MEDIUM Provide clearly marked exits Location: http://www.freecycle.org/?warp=no Problem: This is the Freecycle Home page. If the user lands here, there is really nothing that reminds them they are in the Chicago group. They have to click the back button, or the groups tab. Solution: Provide clearly marked navigation options on this page that are to be found on each of the other pages. Severity Rating: MEDIUM

http://groups.freecycle.org/chicagofreecycle/files

http://www.freecycle.org/?warp=no

Provide Shortcuts Location: http://www.freecycle.org/about/background Problem: The global navigation tabs bar is not found here. Solution: Include the tabs across these pages to create a seamless navigating experience. Severity Rating: HIGH Prevent errors Location: Upon completion of sign-up Problem: There is no communication between Freecycle and their users when they first sign-up, thus it is unclear that you have to wait for approval before you can post. Solution: Have dialogue in the sign-up process that states you will have to wait for approval. And also contact users via upon completion of sign-up saying that they’ll have to wait to be approved as a user. Severity Rating: LOW Help users recognize, diagnose, and recover from errors Location: http://www.freecycle.org/?warp=no Problem: This is the Freecycle Home page. If the user lands here, there is really nothing that reminds them they are in the Chicago group. They have to click the back button, or the groups tab. Solution: If the user is logged in, they should see the page with all of the tabs, and language that says you’re logged in to your Chicago group. Severity Rating: LOW

http://www.freecycle.org/about/background

http://www.freecycle.org/?warp=no

Cognitive Walkthrough Brief


A discussion of our cognitive walkthroughs We conducted cognitive walkthroughs of two of the primary functions/tasks of the Freecycle Chicago website. The functions/tasks included:

Sign up/become a member Search Posts

We had two team members conduct cognitive walkthroughs for each of the two tasks, to reveal any issues with the current state of the website. We were able to identify several deficiencies in the website by conducting these evaluations. Sign up/become a member This task reveals two major problems. One is the labeling and the other is the number of steps it takes just to return to the previous page the user was on before signing up. This labeling of using site related jargon without providing some type of information explaining it can cause confusion with new user. Actions 4 - 7 could have been eliminated by redirecting the user back to their Chicago Freecycle page. Some of the confusion also could have been avoided with an email explaining some of the basic rules, terms, and giving instruction of basic function of the website. Search Posts Based on two evaluator’s assertions, this task reveals a few issues that should be addressed in our opinion. The location of the Search Posts button is not in keeping with best practice design patterns. We believe we can re-order the screen real estate in order to place the button in a more intuitive position. The current location works, but if we have our way, we will include this new placement as part of a bigger re-design of the entire navigation schema. We would like to engage Freecycle in a complete re-design of the existing navigation structures. We believe that we can re-order the Search for posts dialogue box to be a global element to be found on each of the pages. In general, this dialogue box is in keeping with best practice design patterns, but since this is one of the most primary functions, we believe that structuring the dialogue box elements into each page, would be of high value to our user community. Finally, when the user clicks on search for posts and selects a specific item from the results list, it takes the user to a page for the post. There is no clear exit from this page, e.g. a link that says back to search results, and the user has to use the back button to return to the results.

Research Questions


1. Is the search function easily identifiable so that users are able to locate the function, identify what it is used for, and use it successfully? Goal: Determine whether or not the search function is positioned adequately so that users are able to identify it for what it is intended for, and complete a successful search. 2. Are search results presented in a way that allows users to understand how to view more details of a post and figure out how to return back to the search results from within a post? Goal: Establish the appropriate visual design and amount of content displayed in a search results page that allows users to scan search results quickly and easily navigate from a post back to the search results page. 3. When a new user goes to the Freecycle™ home page for the first time, how long does it take them to find the login link? Goal: To definitely establish whether the Login/Signup link is in a good position within the screen real estate. 4. When the user is in one area of the top-tier navigation, (i.e. Mission Statement) how long does it take to navigate back to the Group page? Goal: To challenge the current state of the navigation structure to gauge whether or not it causes user confusion. 5. Does the terminology associated with the website’s navigation make sense to the user? Goal: Determine if terminology located on the links and tabs is understandable to the user or if there are other terms that users find more appropriate to associate with the actions of the website navigation. 6. Is the amount of information provided sufficient for the user to understand what they need to know about becoming a member on the website? Goal: Establish an appropriate amount of information and industry heuristics to allow the users to understand how to use the website with brief intervention 7. What obstacles did the user come across when signing up for the Freecycle™ site? Goal: User will be able to sign up to become a member with little to no difficulty 8. How easily can the user return to the Chicago Freecycle™ page (the starting page) after becoming a member? Goal: User should be able to navigate back to the Chicago Freecycle™ or the page they started on with little to no difficulty

Recommendations


1. The two global navigation schemas should be combined into one global navigation bar.

Problem: Currently, there are two global navigation bars. The bars are visibly inconsistent. There are multiple states where both or only one navigation bar is visible. These states are inconsistent with the login states or page locations. The navigation menu bar at the very top of the page is out of sight for many users. It is not in keeping with design patterns, and the result is competing navigation schemas. The current site does not have a global navigation that is visible on every page. There is a navigation, but it only appears on some pages and those where it is not visible rely on the browser’s back button. This is inconsistent and confusing to the user. Solution: Navigation needs to be consolidated into one seamless global navigation schema and should be visible and available on every page no matter which tab is selected. We can add a global navigation schema that’s visible on every page and remove any redundant links that are in the current navigation. It would also be helpful to include links to all or most of the common tasks offered by the application. A global search field could also be implemented in the revised global navigation.

Severity Rating: HIGH 2. Redesign the sign in/sign up forms and process

Problem: The current site has one link for new users to sign up and for returning users to sign in. However when a user clicks this link the only option is to sign in by entering a username and password. In order for a user to access everything the site has to offer they need to sign up to create a new account and the current state of the application does not provide an easy way to do this. The user should be able to select their city from a drop down menu during the sign up process. This would eliminate erroneously discovering the necessity of joining a group pursuant to becoming a new user. Further, there is no communication between Freecycle and their users when they first sign-up, thus it is unclear that you have to wait for approval before you can post.

Solution: Instead of combining the sign in/sign up forms as one link, there should be a sign in form on the homepage so returning users can login quickly. There should be a separate link located next to the sign in form to sign up, which would direct the user to a new page with a simple sign up form. Also, they should have dialogue in the sign-up process that states you will have to wait for approval. And the system should contact users via e-mail upon completion of sign-up saying that they’ll have to wait to be approved as a user. And the sign up process should automate the selection of the user group a new user would like to be associated with.

Severity Rating: HIGH

3. Present or email new members How to Get Started Information

Problem: A new user might find it confusing when they encounter a few of the websites naming conventions such as “Home Group” or referring to cities as groups. Another issue a new user will come across is that it is not clear that they need to set a home group before they can click through any of the Orange Tabs and see a city's information. Further, there is no communication between Freecycle and their users when they first sign-up, thus it is unclear that you have to wait for approval before you can post. Also new users are not aware that some cities groups are using Yahoo Groups instead of the Freecycle page. Solution: Email or present new members with How to Get Started with using the Freecycle website. The information can go over basic rules, instructions and conventions of the website. Severity Rating: HIGH

Competitive/Comparative Assessment for Park and Seek mobile application prototype

Crew Beat’s Car Locator

Product Description CrewBeat is offering Car Locator over at the Windows Phone Marketplace that should prevent you from misplacing your car again. Car Locator is a Windows Phone 7 application that marks your car's location using the on-board GPS and uses that information to guide you back to where you left it. The Car Locator mobile application ‘comes in handy at large shopping malls, sporting events, airports and other venues where masses of cars congregate.’ Functional Properties

Record parking. Saves your car’s location

Mark location. Enter specific details of where you park

Photograph your car’s location

Find location. Locate your car

Notable Design Properties The application offers a radar view, and a map view. Car Locator has a simple entry screen to mark your car's location. You can enter a Title as to where your parking your car (e.g. airport terminal), a description of where your parking (e.g. south parking deck, level 7, section B) as well as a photograph of your car or its surroundings. Settings for Car Locator are simple and straightforward. You can toggle between satellite and road maps, as well as turn on/off display features (e.g. directional arrows, sounds, accuracy display, etc.). Customer Value Proposition Car Locator is a mobile software application for people who drive and park their car everywhere, from grocery shopping, to parking at airports, and everywhere in-between. These people are required to park in many different locations, whether on the street, or in parking lots or multi-level garages. The Car Locator mobile application offers these always on the go drive and parkers an easy way to always remember where they parked.

Usability Testing


Results

There were five usability tests conducted with one participant per test. The participants will be

referred to as U1, U2, U3, U4 and U5. The results have been categorized according to the goals

associated with the test objectives. All test objective questions and goals can be found in

appendix F of this document.

Each user test was conducted on a PC and recorded with BB FlashBack software. Both screen

and webcam activities were recorded. The users were asked to complete a provided scenario

and the three tasks associated with the scenario. The tasks were created in alignment with the

research questions and goals created for this test.

Test Objective Questions Results

How easily can a user locate

and recognize the search

function? How quickly can

the use it for searching?

In task 3 each user was asked to perform a search for cardboard

boxes. It appears that most users, except U5, were able to locate the

search function with no issues. U5 and U1 mentioned that they

would have liked to see an integrated search function similar to that

of Google’s search bar.

Each user was able to successfully perform their search quickly once

the search tab was located.

How easily can a user

decipher the results from a

posting search? How easily

can the user return back to

their search once they have

selected and scanned their

search results?

The results of the search were not confusing to the users. The only

issue associated with the search results was the fact that the “Search

Posts” button returned wanted and offers.

Returning back to the search results was not very easy. The website

does not offer the capability to return to search results. U2 tried to use

the prev and next navigation feature, which took the user out of their

search. Other uses such as U5 tried to use the browser back button.

Users would have like to have a way to return back to their search

results. This was found to be a significant error.

When a new user goes to the

Freecycle™ home page for

the first time, how long does

it take them to find the login

link?

The login link was easily located by the users when they attempted to

login as a new user.

When the user is in one area

of the top‐tier navigation, (i.e.

Mission Statement) how long

does it take to navigate back

to the Group page?

This was confusing for the users because the navigation was small

and unnoticeable. U5 commented that he, “hates this” but liked the

dropdowns under each tab. The users assumed that they were on the

Chicago site the entire time because they had initially found the

group on Task 1.

How easy is it for the user to

understand the terminology

used on the website?

Only 40% of the users did not find the website’s terminology to be

confusing. U2 had a difficult time understanding what in meant to

join a group because she did not understand what association a

group would make upon joining. U4 was also unclear on the

meaning of the initials MF in the admin documentation.

How easily can the user

understand what they need to

know about becoming a

member on the website?

In Task 2 the users were asked to become a member of the website.

40% of the users selected the “Chicago FAQ and How to Guide” link

in order to sign up. They were taken to an admin page with a

significant amount of documentation regarding help messages.

U1 used the Login/Sign up link on the global navigation and there

was no way for the user to sign up. They erroneously selected the

login link and was taken to the sign up form.

The remaining users selected the Sign up button on the Chicago

Freecycle page.

What obstacles did the user

come across when signing

up for the Freecycle™ site?

On average, Task 2 took the longest for each user to accomplish, with

an average of over 5 minutes. U3 and U2 both expressed frustration

over signing up with a valid username. The names they selected were

already taken, but the error was not thrown until the submit button

was selected. This forced the user to fill out the form once again.

Every user was unaware if they had successfully signed up because

there was no feedback indicating that their attempt was successful.

U5 signed up multiple times and U3 didn’t know they had become a

user until they visited My Groups tab.

How easily can the user

return to the Chicago

Freecycle™ page (the

starting page) after

becoming a member?

Each of the users found this step to be redundant because they all had

expected to have signed up as a Chicago user since they selected the

group in Task 1. This was frustrating for some users.

General Results – Post‐Test Survey

0

0.5

1

1.5

2

2.5

3

3.5

4

4.5

Found the Site to be

Frustrating

Felt it was easy to navigate site

Would recommend the site

Though website provided adequate feedback

Found the Site to be not Effectively Organized

Yes

No

Neutral

Time on Task

U1 U2 U3 U4 U5

Task 1 1:34:00 2:52:00 2:30:00 0:51:00 1:40:00

Task 2 8:45:00 3:45:00 5:54:00 6:02:00 5:00:00

Task 3 8:58:00 9:12:00 1:12:00 3:25:00 9:00:00

0:00:00

1:12:00

2:24:00

3:36:00

4:48:00

6:00:00

7:12:00

8:24:00

9:36:00

10:48:00

Task 1 Task 2 Task 3

U1

U2

U3

U4

U5

General Results from Tests

Task 1 U1 U2 U3 U4 U5

Yes No Yes No Yes No Yes No Yes No

Located the website x x x x x

Problem finding

Chicago Group

x x x x x

User require assistance x x x x x

Unsure if they found

group

x x

Task 2

Problem finding Sign

up

x x x x x

Terms of agreement

error

x x x x x

Valid username error x x x x x

Problem with Antibot x x x x x

Unaware of sign up

success

x x x x x

Task 3

Problem finding search x x x x x

Received wanteds in

post search

x x x x x

Could not get back to

search

x x x x x

Disliked search box x x x x x

Finding & Recommendations

The Findings and recommendations have been established in the table below as they pertain to

each task. All corresponding screen shots and process flow diagrams can be found in the

Appendix section of this document.

Task 1 Source of Error Recommendation

Visit the

Freecycle

Website. Once you

have done so,

locate the Chicago

Freecycle Group.

How to search for a group is not

clearly communicated to users

searching for a group.

The concept of “Group” was

unclear to the user. They didn’t

know what it meant to find or join

a group.

The search box in the middle of

the page has an e.g. Tucson, AZ.

The text is a very light gray, and

does not stand out. Is there a way

to make the city and state example

more evident to the user?

Make the search groups field more

prominent.

The terminology of group could be

more standardized and made more

familiar by using location, “find

your location” would be more

intuitive than group. The selection of

group should be incorporated into

the sign up form.

Make the e.g. Tucson, AZ font

bolder and darker to “call out” to the

user. Move it to the left. Incorporate

the use of drop downs for city and

state, and allow the user to search by

zip code.


Become a

member of the

Freecycle

website. Once

you have

become a

member join the

Chicago

Freecycle Group.

Login/Sign up button and link

in the right top corner is not

easily visible to user, and it

only allows the user to log‐in. It

does not clearly indicate that

new users have to click Log In

button to be taken to the

registration page. Or the user

actually has to find their home

group page, and then click on

the sign up link in the middle of

the page.

After signing up the user

receives no confirmation that

they have successfully become

a member.

There was difficulty finding the

terms of service box and the

user had to fill out the form all

over again because they did not

select the terms of service box.

How to join groups, view

groups, and general use of the

Login/Sign up button and link

should visually stand out to

attract the user.

Include a “New Users” or

“Become A Member” link on the

Login/Sign up form

The signup link at the top right of

the page should actually allow the

user to sign up as a new user. It

should be placed in a more

intuitive location within the

screen real estate.

After completing the form for

registration include a message

that lets the user know the

process was a success and

automatically log in users.

Place the terms of service

checkbox to the immediate left of

the dialogue. The CAPTCHA box

should appear after/below the

terms of service.

The form should be redesigned

with the terms of the service more

clearly stated. Perhaps the form

could also include the location or

group of the user in order to

eliminate this step later.

Create a “My Account” page that

prominently displays groups

users belong to as well as a

leaderboard outlining next action

items such as Add Groups or

application are not clearly

communicated to users who log

in for the first time.

Create Post.


Search for

moving boxes

being offered in

Chicago, review

any post and

return to search

results page..

Search Post Button is not easily

visible to the user.

There is no easy way within the

navigation to go back to the list

of search results.

Options in the search filter

interface are not clearly

communicated to users

conducting a search query.

Search Post Button should

visually stand out.

Add a return to search results

link.

Redesign the search form.

Consider redirecting the user to a

separate search form page with a

simple interface that presents each

filter option in a vertical list with

the form fields and labels

perfectly aligned to prevent users

from skimming over valuable

search filter options.

Usability Goals (Digital Strategy Roadmap)

Park and Seek mobile application prototype

1. Efficiency--The application will save users time in finding a place to park or locating their parked vehicle compared to other methods. It will be more efficient than using a map, writing a location down, locating a digital or printed resource, remembering a location, searching without guidance, or a combination of these.

Requirements: With three commands or less, the application will pull from resources to either find a place to park or locate a parked vehicle and provide users with the information requested.

2– Safety—The application will ensure the safety of the user who wishes to use the application while driving or walking.

Requirements: The user can choose to navigate and receive information from the application aurally/vocally or visually/manually.

3 – Effectiveness--The application will provide users with accurate information and a short response time.

Requirements: monthly updated parking information to ensure accuracy of data, no more than 1 meter location error, show building levels for multi-level parking garages, and an easily identifiable icon. Memory/speed, access to external database of parking locations, access to internal GPS, access to external mapping system, voice recognition, and speakers are the main requirements.

4 – Learnability—The application will be intuitive to use for a novice or expert, but it will also have help documentation and error feedback readily available.

Requirements: as few buttons to press as possible, clear language, Google maps interface at map stage, a help button with step-by-step instructions for two main functions, error messages and back function

Effectiveness – Are users able to clearly understand the feedback of the Park and Seek mobile application and quickly find a parking spot?

To be the most effective user interface, the Park and Seek mobile application must not only deliver timely, accurate results, but also provide map displays and prompts that are easy to understand for people who live in the city, but also for tourists.

Efficiency – How long does it take for a user to complete the task of finding a place to park their car?

Users should be able to navigate through the application quickly in order to find a parking spot, thus it should be completed in as few steps or screens or commands as possible.

Safety –What are the assurances that a driver using the application while driving will remain safe behind the wheel?

We are currently reflecting on a voice command system that will guide the user through the steps of the application. The voice command system should provide feedback to the user as they navigate through the application.

Also, we are designing the touch interface simply to be operated with one-hand, to ensure that the users are able to leave one hand on the wheel at all times.

Utility – Does our system functionality address the needs of both users who know a given area, a city, and such, as well as tourists?

In order to address the needs of both end-users, the system must provide display and audio feedback that is understandable by the user.

The system uses a map display with options to get turn by turn directions to a desired locale, and when the user arrives to that location they can hit a button called Park My Car to locate a parking spot in that area.

Use Case 1) The driver is nearing their destination, and they open the Park and Seek mobile application system which displays two options:

Park my car Find my car

2) The user chooses the Park My Car option/function. 3) The system displays a map where the driver is currently located and displays a map with “targets” as red flags across it to inform the user of available parking in that area. 4) The user then taps one of the red flags on the graphic display. 5) The system then displays the location in text and an audio response, e.g. meter parking, parking garage/lot, or non-metered parking available in that area. * Do we want to constrict the results to a specific radius, e.g. three square blocks? 6) The user then selects a target with one hand. 7) The system returns the directions to that target location. A weekend outing in the city Mary and Joseph are driving to their favorite city, Chicago, for a weekend getaway. They know the city fairly well, and they don’t want to waste a lot of money parking their car. As they enter the city, they head for their hotel, their end destination. Mary opens the Park and Seek application and the system displays a screen with two options, Park My Car and Find My Car. Mary chooses Park My Car, and a map display opens with an icon of a car to show exactly where they are at in the city, and the buttons for Park My Car and Get Directions are displayed across the top, or down the side. Mary chooses get directions, so they can be guided to their hotel. The system prompts Mary for an address or intersection or tourist site, e.g. Columbus and Illinois. The system returns parking locations represented with red flags across the city map. Mary selects one of the flags by touching the interface. The system displays directions in text and also audio prompts.

Data Analysis and User Task Flows (diagrams)