Group 6: Melissa Henry, Damian Morris, Jarod Spencer, Paris Somerville

Assignment 3G - Final Report

Title: Safe Crowd

Team Member’s Name and Roles

❖ Melissa Henry: Coordinator, Sketch-Artist, Facilitator, and Co-Presenter
❖ Damian Morris: Sketch-Artist, “Computer,” and Editor
❖ Jarod Spencer: Cosmetic Sketcher, Notetaker, and Digital Designer
❖ Paris Somerville: Noteaker, Co-Presenter

Problem and Solution Overview

The problem we aim to address is how to effectively and efficiently monitor crowds in public places.
From a public wellbeing perspective, crowds can be a huge source of anxiety, inconvenience, and overall
uncertainty. What makes this acknowledgement worse is that sometimes crowds can be unexpected, such as when
going to grocery stores, clothing stores, restaurants, and/or cafes. Typically, people do not want to encounter a
crowd in these specific cases. However, aside from Google Maps “Popular Times” feature, there is no great way
to tell when you will be walking into a crowded location. Our proposed solution is to provide live crowd data to
the general public. The data we provide will consist of a crowd meter, crowd density floor plan, and typical crowd
capacity chart (i.e., similar to Google Maps “Popular Times” feature). From a business perspective, employees
and security need a better way to monitor crowds on the fly. Most companies and organizations rely on security
cameras that can only be accessed in a security room. Our proposed solution is to provide live crowd data that can
be accessed by employees and security mobily. This crowd data would match the public’s data, but security would
also be able to pull up the security cameras to view live footage and incident reports. For our design to work, we
would need cameras with sensors to be placed strategically around the location.

1
Initial Paper Prototype
Overview
Users must first select either the personal or business plan. If the personal plan is selected, then users may
create an account and/or log in. After logging in, users are presented with their “home page,” which is a map of
their current location. On this page, they can choose to search for a specific location or they can choose to search
within the domains of grocery stores, clothing stores, restaurants, or cafes. After selecting a location domain (or
manually searching for a location), a list of locations that match the user’s search is presented. On this screen,
users are given the location’s name and a capacity bar that represents how crowded the place currently is. If the
user clicks on a desired location, then they can see a more detailed view of the crowd meter and live floor plan.
They can then use this screen to decide if they would like to go here or view the typical capacity. If the business
plan is selected, then businesses and employees must log in. After logging in, users are presented with their “home
page,” which is a screen with the crowd meter and live floor plan for their place of business. On this screen, there
is also a security log in option at the bottom that will allow security to log in and see more sensitive data. Once
logged in as security, they can view live camera footage and additional crowds statistics (e.g., incident reports,
typical capacity, etc.)

Task 1: Seeking to Avoid the Inconvenience of Crowds (i.e., the Personal Plan)
Step 1: Search for Location or Select Step 2: Choose Location to Investigate Step 3: Decision Time! Is this
Location Domain. Further. environment worth going to?

Task 2: Monitoring the Store from the Perspective of an Employee or Security (i.e., the Business Plan)
Step 1: Crowd meter and crowd Step 2: Security can log in to see more Step 3: Security can expand any
density for location is displayed. sensitive data. camera for better viewing.

2
Testing Process
Testing Process Instructions & Changes
The overall goal of our test protocol was to encourage participants to explore our prototype and provide as
much feedback as possible. Therefore, we intentionally kept our instructions vague for both the personal plan (i.e.,
task 1) and the business plan (i.e., task 2). For the personal plan, we considered giving participants the instruction:
“you are trying to avoid crowds.'' However, we felt that the instruction: “you are trying to decide if you should go
to a selected location today or later in the week” was more fitting and less assuming. This was mainly due to the
fact that we did not want to prime our participants with the goal of avoiding crowds. Instead, we wanted to see
which factors were most important for them in their decision-making process. In later tests, we also chose to not
give a specific domain name so we could gain better insight into what our participants thought the symbols for
each domain represented.
For the business plan, we did have a specific goal at first, which was to “pull up the security cameras”
because that was the end objective of our prototype. However, since we struggled to recruit participants, who
might be invested in the goals of our business plan, we transitioned to a more relevant goal of “seeing what kind
of information businesses are collecting from their consumers.” This transition also allowed us to make sure
public users were comfortable with the type of data that was being collected by businesses. What type of
information and who would have access to it was a concern for some of our research participants, so we felt this
was a perfect opportunity to address it. For a more detailed look into these instructional changes, see Appendix A.

Participant 1
Our first participant was a 21 year old student who lives on campus. We chose this participant out of
convenience and since most college students are fairly busy, we felt that they would benefit from our app. We
conducted this test in the lobby of Evergreen because this environment mimics both dorm life and the need for
security. This location was also the most convenient for both the participant and our group members.

Participant 2
Our second participant was a 19-year old student-athlete, who also lives on campus. We choose this
participant for the same reason as participant 1. However, we conducted this test in the library because this
environment is quiet and most convenient for the participant. Also, it’s not a far stretch to think that maybe after
spending a few hours studying, a student might want to pull up our app to go somewhere else (e.g., a store, a
restaurant, a cafe, etc.). Therefore, it makes sense to conduct our test in a practical environment.

Participant 3
Our third participant was the front desk manager of the library. We chose this participant because they
actually had some experience in designing SIUE’s website and had done usability testing for other websites as
well. Due to this, he was able to provide insightful comments about the structure of our design. Namely, that our
design is exactly what they were expecting to see and that they wanted to see SIUE incorporate something like
this. Since the participant worked at the library, we chose to conduct the test there.

3
Testing Results
Heuristic Evaluation
The first evaluation was done in class by fellow groups and was where we received the most critical
feedback during the designing process, resulting in a total of five changes overall. The first heuristic offense was a
“Flexibility and Efficiency of Use” at a severity of three. This was at the page in the personal plan where the user
would select a location based on either what they had typed into the search bar or the category they had chosen.
This issue was that where the location was listed, there was no way for the user to evaluate the distance of the
location from their current location. In response to this concern, we created a new page that had the distance in the
form of minutes away from the user’s current location placed alongside the capacity bar, which was next to each
location option.
The second heuristic offense was another “Flexibility and Efficiency of Use” on the same page, however,
at a severity of two. This offense was that there was a lack of ability to filter locations on this selection page. This
means the user would have to scroll through a long list of locations before finding what they’re looking for
without an ability to search by distance, capacity, location name, or favorites. In response to this concern, we
added both an option to select “favorite” next to each location in the form of a heart icon and a filter option above
each of the four categories listed above.
The third heuristic offense was a “Recognition Rather than Recall” offense at a severity of four. This was
another issue with the personal plan on the page after a location has been selected where the user is looking at the
specific location information. The problem with this page was that there was no indication as to which location
the user was looking at, meaning they would have to remember which one they selected or go back to the
selection page to make sure they were in the correct place. In order to address this concern, we added a label at the
top of the page with the name of the location to alleviate any confusion in this regard.
The fourth heuristic offense was an “Aesthetic and Minimalist Design” offense at a severity of two. This
was another issue on the personal plan where there was some minor confusion on the page displaying specific
location information. The issue here was with a button option at the bottom of the page labeled “Sales,” which
would list any sales that that location was having. However, some interpreted it stating “None” as the location
itself not having sold anything. Given this was a very minor feature and not vital to the primary purpose of the
app, we opted to just remove the option completely to avoid any future confusion.
The fifth heuristic offense was a “Consistency and Standards” offense at a severity of four. This was an
issue under the business plan under the login pages. The issue here was that there were too many login pages,
which resulted in confusion as to which input took the user to which page and frustration at having to login
multiple times. Given this was implemented purposefully for security purposes, we didn’t want to change the
concept entirely, so we opted to simplify it. We condensed the initial login to a single page with optional buttons
to explain each login input, which took the user to the general employee page once entered correctly. On this
page, we kept the separate login option on this page for security given not every employee would be given access
to the security features.
Although these were the concerns that resulted in changes, it wasn’t the only feedback we received.
However, these were the only concerns we felt prompted change to the prototype. The first of these other
suggestions was a notification letting the user know when a location of choice is less busy. While this would be
useful, it was not feasible to place into a paper copy and would be an optional feature under the user’s account
settings. The second was that the business plan did not have access to the location search feature that was present
in the personal plan. While some businesses may have used this for competitive purposes, we did not feel it was a
necessary addition given its purpose is to increase security and track in-store information, with a target for at
location use. The final suggestion that didn’t spark a change was that the symbols (i.e. grocery, clothing, dining,
coffee) weren’t quite clear enough. However, given they are similar to the symbols used in other similar apps, we
are limited on space due to it being a phone app, and it gives a more specific label after clicking on it, we didn’t
feel this was a critical error nor something that required a change to the design.

4
Usability Test & Design Critique
The usability tests sparked few changes and resulted in very little negative feedback overall, most of
which came from our observations rather than actual complaints from the tester.
The first usability test resulted in two points of positive feedback and two points of negative feedback,
one of each being in both the personal and business plans. The point of negative feedback was the same for both
the personal and business plans in that the user was unaware if some of the buttons were interactive or not, which
we noticed through our observations and was never stated by the tester. While this issue was due to it being a
paper prototype, we felt it needed to be addressed in order to alleviate the concern for purposes of future tests. So,
we highlighted every button that was clickable on both the personal and business sides of the app, which made it
much clearer given it was a mostly black and white prototype. As far as positive feedback goes, the user
mentioned he liked the sort feature on the location selection page in the personal plan that was added following
the in-class heuristic evaluations, specifically the ability to sort by distance. He also mentioned he was pleased
with the store layout and store capacity information used on the location specific page in both the personal and
business plan.
The second usability test resulted in one point of positive feedback and one one point of negative
feedback. The point of positive feedback was that the tester noted they were pleased with the homepage in the
personal plan and how they felt all the information they would want is already there. The point of negative
feedback also came in the personal plan, but was on the page with location specific information. The point of
confusion came from not being sure whether or not there was a GPS feature embedded into the app or if it was for
observation purposes only. In order to make this more clear, we added a “Go Here!” button at the bottom of the
page in place of what used to be the “Sales” feature that was removed after the in-class heuristic evaluations.
The third and final usability test resulted in one point of positive feedback and one point of negative
feedback. The point of positive feedback was on the security page in the business plan where there was a scroll
wheel in the security log portion of the page. He noticed this and made a point of mentioning it, which was
significant for us because we were unsure if the users would notice this feature or not. The point of negative
feedback came from us failing to highlight three of the buttons on the business login page. This was a problem
because we had every other button highlighted, meaning the user was conditioned to believe that those buttons
were not clickable given every other clickable feature was.
Overall, we noticed these usability tests served primarily to pick out minor errors or evaluate minor
concerns we had prior to testing. Given we were very thorough in addressing the issues with our initial design
after the first round of evaluations, we noticed this second iteration was more than capable of addressing our tasks
and tended to be easily usable by the testers. This was a very positive thing in that we were able to focus on fixing
minor errors rather than having to continue addressing various critical errors. For more information on the specific
changes that were made, go to Appendix B.

5
Final Paper Prototype
Overview
Users begin by selecting either a personal or business plan. If they choose the personal plan, they are led
to login or sign up pages depending on whether or not they have an account. After logging in, they are led to the
home page where they have the option to select a category of locations, search for a location themselves, or select
one on the map. If they search or select a category, they are led to a page where they can scroll through location
options, observe distance and capacity of each, and filter their options through various sort features. Once a
location is selected, the user is led to a page with location specific information. On this page they will have the
option to view the information, select “Go Here!” to be given directions to the location, or select “Typical
Capacity” for a page with more general location information.
If they choose the business plan, they are led to a login page that’s more detailed than the personal plan,
but has an option to click buttons for explanation to alleviate any potential confusion. They are then taken to a
location page similar to that of the “specific location information” in the personal plan, except automatically
taking them to their business location and having a security login option. On the security page the user is able to
observe security information as well as expand any of the cameras and select an option taking them to more
general information on location capacity by day.

Task 1: Seeking to Avoid the Inconvenience of Crowds (i.e., the Personal Plan)
Step 1: Search for Location or Select Step 2: Choose Location to Investigate Step 3: Decision Time! Is this
Location Domain. Further. environment worth going to?

Task 2: Monitoring the Store from the Perspective of an Employee or Security (i.e., the Business Plan)
Step 1: Crowd meter and crowd Step 2: Security can log in to see more Step 3: Security can expand any
density for location is displayed. sensitive data. camera for better viewing.

6
Digital Mockup
Because we finalized our design to a satisfactory amount during the testing phase of our paper prototype,
we wanted to create a 1 to 1 translation from paper to digital when creating our digital mockup. The only things
we wanted different was a more appealing to the eye design with a much more colorful layout that helps to
highlight the information to the user and what on screen the user can interact with. We created two different
backgrounds for the login screens and the program itself to help convey when you're using the actual program and
to add a little bit of visual variety. The issues we ran into the most during our paper prototype testing was users
not being able to understand what is and is not interactable. This is a difficult issue to overcome on just a paper
prototype, so we fixed it by just highlighting buttons and interactable items. However, this is not a problem at all
on the digital mockup due to buttons being very different from the average text boxes.
For task one, we wanted to make it clearer for the user that the buttons on the
main menu were, in fact, buttons. Even in the digital mockup, this was found to
be a little difficult since these buttons are a little different from the others,
presented with little silhouette logos of the type of places a user wants to go
instead of a button that has a word like “Submit” or “Back”. For these, we went
into a photo editor and created a button-like box with a gray fill and thick black
borders. Then, we took png images of the basic logos like a shopping cart, t-shirt,
etc. and added them to be next to each other, but also
giving them a curve on the corners to signify that
they are not the same and have small bumps to show
where they split into different buttons. We also got to
get a bit more accurate aesthetically with adding a genuine map, which helps give the
screen a very good visual upgrade. Since this was a digital mockup, we couldn’t find
any practical method to make the list of stores screen based on category without
making a new screen for every single store type. So, we instead just made one, for
example, showing that the rest of the category screens would display a similar format.
If we could go back and change something, we would want to make one or two of the
store's favorites to signify that there is a favorites feature, and overall a screen that
shows the users favorites, despite the category. However, we didn’t want to worry too much about this due to how
universal the colored heart is in signifying the user’s favorites.
For task two, we just reused a lot of what we had for the task one screens with minor differences added.
The login screens had no Sign up options due to this being provided to the store by our provider. There was also
three bits of information to enter. Your business code, employee ID, and password. This is to help differentiate
which employee is using the device. There were also blue hyperlinks to
explain what the business code and employee ID were and the steps to
take if you forgot your password. The store screen (we used Hop &
Save as our example), is fairly similar to what you see on the personal
plan but with a security log in for security officers to be able to access
specific cameras and view live feed for more detailed security. On the
security screen, we were able to get a lot more detail in showing what
the guard would have access to and see through his security layout. Our
biggest detail improvement was with the camera footage, as well as
access to expand the feed and see it in more detail. There was a little bit
of difficulty in trying to present the security log to the user. There's a lot
of text to fit into a very small space, and giving it a smooth format while keeping it readable was a challenge, but
we believe we accomplished it fairly well. There was also difficulty in showing the user they have the ability to
scroll through the security log, which limited our spacing more than before with the addition of a bar to represent
scrolling, but we managed to fit it in well enough to still be aesthetically pleasing and precise.
7
Discussion
During the process of iterative design, we realized the wide extent of intricate and in-depth thinking
involved in creating an app interface. Our product is an app that monitors crowds, and the creation of the app
interface involved a lot of steps. The visual aspects of the app were based on the user tasks and the features of the
app itself. The goal of our iterative design was to make sure the paper prototype was cohesive in its elements and
understood by the users as they went through the heuristic evaluations and usability tests.
Through the process of creating the paper prototype(s), we realized how difficult it was for users to
determine which buttons were interactable or not. Initially, most of the participants who went through the heuristic
evaluations and usability tests for our paper prototype had trouble walking through the app. To make our paper
prototype easier for participants to understand and navigate, we highlighted the buttons that were interactable on
the app. Highlighting the buttons made it easier for users to understand and walk through the features of the app
on our final paper prototype. Also, for our initial prototype, participants in our heuristic evaluations did complain
about there being too many login pages on the app. To make our app more cohesive, we used less login pages.
Having less login pages made our app more simple and understandable for our participants. Another issue with
our initial prototype were the placements of our “back” button. Participants had a hard time navigating the paper
prototype due to the back buttons not being in the same area throughout the app. To make our app more
consistent, we decided to put the “back” button in the same spot on every page of our paper prototype. The more
consistent our app is, the more users are able to navigate and understand the app.
As a result of our usability tests, our tasks did not change as much. We still had the personal plan and
business plan side of our app. We just made minor improvements to make sure our app was understood by users.
We wanted to make sure users knew which buttons were interactable on the app. The visual aspects of our app
needed to be consistent so users would not be confused about features of the app. Our goal was to make sure that
our app flowed consistently, while the tasks were being accomplished.
We believe that there are always revisions to be made to a product, no matter how big or how small the
revisions are. During this process, we learned about the importance of revisions in order to understand which
aspects of our product to improve to make it better for users.

8
 Appendix A: User Instructions for our Usability Tests

Unused Instructions for Usability Test

Personal Plan: “For the purpose of this situation, we want you to imagine that you are trying to decide if
you should go grocery shopping today or sometime later in the week. Your primary goal is to avoid crowds so that
you are not late to a very important meeting happening in a couple of hours.”

Instructions for Usability Test #1

Personal Plan: “For the purpose of this situation, we want you to imagine that you are trying to decide if
you should go grocery shopping today or sometime later in the week. Your goal is to use whatever means and
factors are most important for you to make your final decision. As you do so, please feel free to explore as much
or as little of the app’s features as you like.”
Business Plan: “For the purpose of this situation, you are the security guard of a building, and it’s your
very first day. You have just started your shift, which means that you have a little bit of time to explore the app
and become more comfortable with its features. Your end objective is to pull up the security cameras so that you
can start remotely monitoring the building as you make your rounds.”

Instructions for Usability Test #2 and #3

Personal Plan: “For the purpose of this situation, we want you to imagine that you are trying to decide if
you should go to a selected location today or sometime later in the week. Your goal is to use whatever means and
factors are most important for you to make your final decision. As you do so, please feel free to explore as much
or as little of the app’s features as you like.”
Business Plan: “For the purpose of this situation, we want you to look through the business plan to see
what kind of information businesses would collect from their consumers. Feel free to provide any type of
feedback as you explore this part of the app’s features.”

9
 Appendix B: Critical Incidents from our Usability Tests

In-Class Heuristic Evaluations

Task 1: Seeking to Avoid the Inconvenience of Crowds

Original Image Critical Issue & Revision Revised Image

Severity

Users cannot tell how far An indication of how far

away a location is from each location is from the
their current location, user is now displayed.
which is important for
avoiding inconvenience.

Heuristic:
Flexibility and Efficiency
of Use; Severity Rating =
3

Users should be allowed Favorite (Heart Icon) and

to favorite and sort Sort features (Up Arrows)
through locations (by were added.
distance, crowd density,
Note: These features may
favorites, etc.). cause a little confusion in
the paper prototype
Heuristic: because these features
Flexibility and Efficiency don’t actually function in
of Use; Severity Rating = our demonstration…
2

Users must remember Name of the selected

which location they location will be displayed
selected on the previous at the top of the page with
the crowd meter and
page when viewing the
building layout.
crowd meter and building
layout. This advice was also
applied to the business
Heuristic: plan, so users can now
Recognition Rather than see the name of their
recall; Severity Rating = location at the top of the
4 page with the crowd
meter and building
layout.

10
 “Sales” indicator is a little
confusing; When
visualized as “Sale:
None,” some users
thought that no one was
buying anything when in
reality we just wanted to
indicate that no discounts
were available.
Heuristic:
Aesthetic and minimalist
design; Severity Rating =
2
Task 2: Monitoring a Store from the Perspective of an Employee or Security Guard
Original Image Critical Issue &
Severity
Three different login
pages for the business
plan was too confusing
and unnecessary. The
“Cancel” buttons were
also inconsistent with the
“←Back” button
illustrated throughout the
rest of the design. Lastly,
no one wanted to read the
block of text at the
bottom.
Heuristic:
Consistency and
Standards;
Severity Rating = 4
Removed this
unnecessary feature as it
does not help accomplish
our primary task. Users
can already visualize how
crowded a space is to
decide if they want to
travel to that place or not.
Revision Revised Image
Main login for Business
plan was narrowed down
to one login page instead
of two. However, we still
kept the added security
measure of the security
login. Therefore, we now
have one login for
employees (i.e., less
clearance) and one for
security (i.e., more
clearance).
We changed the “Cancel”
Buttons to “ ←Back”
Buttons.
We hid the block of texts
behind “What is this?”
links.
Lastly, we noticed that
the “Home page” should
have a “Logout Button”
not a “ ← Back” Button
11
 In-Class Heuristic Evaluations (continued)
These are minor items that can be or need to be fixed outside of paper prototyping:
● It’s hard to tell what is and isn’t a button on some of the pages.
● Page w/ interactive map is a little confusing for first-time users (i.e., they aren’t sure what to do).
○ This page is meant to mimic Google Maps, which should be fairly easy to navigate...
● The following features are expected to be in our final design but are unnecessary for our paper
prototype.
○ Users should be provided with a way to personalize and edit their account/settings.
■ Users might want to change their email or password while in the app.
■ Users might want to access different customization options (e.g., dark mode).
○ The sign-up page for the personal plan did not require email verification.
● Back button should be in the same spot across pages
○ Not a critical error but should definitely be fixed in our final design!

These are items that either do not address our primary tasks or that we didn’t feel were critical errors.
● Users should have the option to be notified when their selected location becomes less crowded.
● The business plan does not have the same features as the personal plan. Business users need to log out
of the business plan to look at the crowd capacity of different stores. Business users might want to do
this for competitive purposes…
● Symbols (i.e., for grocery shopping, clothing, restaurants, and cafes) above our interactive map were
hard to interpret without written descriptions.

12
 Usability Test 1 Evaluations
Task 1: Seeking to Avoid the Inconvenience of Crowds (Personal Plan)

Original Image Incident (+ or -) & Revision Revised Image

Severity (if needed) (if needed)

-: The user did not know if
some buttons were
interactive or not
*Severity: 2
Need to let the user know
which buttons are
interactive or not.
Highlighting or circling
those options would make it
more noticeable to users.

*Highlighting was done for

all buttons throughout the
app, but one page was
uploaded for convenience.

+: liked that locations could No revisions needed. N/A

be sorted by distance

13
 Usability Test 1 Evaluations (continued)
Task 2: Monitoring a Store from the Perspective of an Employee or Security Guard (Business Plan)

Original Image Incident (+ or -) & Revision Revised Image

Severity (if needed) (if needed)

-: The user did not know if
some buttons were
interactive or not
*Severity: 2
Need to let the user know
which buttons are
interactive or not.
Highlighting or circling
those options would make it
more noticeable to users.

*Highlighting was done for

all buttons throughout the
app, but one page was
uploaded for convenience.

+: The user liked the floor No revisions needed. N/A

layout/capacity data

14
 Usability Test 2 Evaluations
Task 1: Seeking to Avoid the Inconvenience of Crowds (Personal Plan)

Original Image Incident (+ or -) & Revision Revised Image

Severity (if needed) (if needed)

(+): expressed how there No revisions needed. N/A

didn’t seem to be any
information missing for our
personal plan.

(-): Could not tell if our app We added a “Go Here!”

acted similar to Google
Maps (e.g, tells you how to
get to a location).
*Severity Rating: 3
button so that users could
be taken back to the screen
with the map. When
redirected back to map,
their chosen location would
automatically be routed.

15
 Usability Test 3 Evaluations
Task 2: Monitoring a Store from the Perspective of an Employee or Security Guard (Business Plan)

Original Image Incident (+ or -) & Revision Revised Image

Severity (if needed) (if needed)

(-) failed to indicate that Buttons were highlighted to

some links on the business better show that they are
plan login page were clickable.
clickable.
*Severity Rating = 2

(+) noticed that there was a No revisions needed. N/A

scroll wheel on the report
for security incidents, so
that more information could
be viewed. (This was a
feature that we did not
know if participants would
be able to pick up on.)

16
Contributions:
❖ Melissa Henry: 30%, outlined document, completed the “Problem and Solution Overview,” completed the
“Initial Paper Prototype” section, completed the “Testing Process” section, and completed Appendix A.
❖ Damian Morris: 30%, completed the “Testing Results” section, completed the “Final Paper Prototype”
section, completed Appendix B, and edited for minor grammatical errors and report layout.
❖ Jarod Spencer: 25%, completed the “Digital Mockup” section.
❖ Paris Somerville: 15%, wrote the “Discussion” section.

17