California Polytechnic State University Art and Design Department ART 388: Interaction Design II Autumn 2017 Professor Bruno Ribeiro
Campus Compass Campus Compass is an interactive GPS that helps users navigate college campuses.
John Duch Paul Guzman Emily Joachim
30 November 2017
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
Table of contents Introduction
3
Abstract 3 Schedule 4 Audience 4 Technical requirements 4 Possible constraints 4
Research
5
Preliminary research design Findings from the research Persona 8 Goals 8
5 5
Competitive analysis Existing alternatives 10 Similar form factors 15 Visual language references
17
User interaction design Scenario 20 Sketches 21 Wireframes 25
Usability analysis
10
17
31
Usability analysis tests 31 Usability analysis results 31 Changes from the results of usability analysis
User interface design Annotated layouts
Final product
37
Future enhancements
37
34
2
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
3
Introduction Abstract Campus Compass is an interactive GPS system for mobile devices that is built for helping users navigate around college campuses. Campus Compass is available to anyone, ranging from students, to staff, or even friends and parents who are visiting campus. Users are able to log into their accounts from their respective institutions. This allows students to be able to locate where their classes are by simply clicking on a class on their schedule. Users that are not students can still use the app by selecting the a guest option upon starting up the application. Campus Compass also gives users the ability to locate facilities such as administration, parking lots, bus stops, dining halls, class rooms, study spaces, and activities on campus to participate in. The built in GPS system help navigate users to selected locations on campus by showing them the fastest routes. Campus Compass also takes into account people with physical disabilities and labels all access locations when there are buildings with multiple floors. Campus Compass is focused on saving time for students and visitors so they can arrive at their destinations as efficiently as possible while also seeing ongoing events around campus.
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
4
Schedule Week 1: 9/17-9/23 Product Brainstorming Establish product features Week 2 : 9/24-9/30 Research Strategies Each conduct two interviews with members of the target audience, six total Week 3: 10/1-10/7 Personas and Goals Use the research findings from previous week to begin developing application Week 4: 10/8-10/14 Wireframes Use functional groups and sketches to begin building the visual structure of the app Week 5: 10/15-10/21 Usability Analysis Create usability test regarding the interface and take note of results Week 6: 10/22-10/28 Usability Analysis Results Study results of usability analysis, discuss and make necessary changes Week 7: 10/29-11/4 Visual Design Create multiple mock-ups using wireframe layouts of the user interface Week 8: 11/5-11/11 Interactive Mock-Ups Begin edits on interactive mock-up and make necessary changes Week 9: 11/12-11/18 Interactive Mock-Ups (cont.) Finish interactive mock-ups and finalize project components Week 10: 11/26-12/2 Finalize Project and Prepare for Presentation
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
5
Audience The Campus Compass application was created to help college students and campus visitors get to their desired destination quickly and efficiently. Its primary functions are catered to helping college students and visitors easily navigate their way to various locations across campus. A scenario in which this app can be helpful is giving students the ability to find areas on campus during big events such as orientation, sporting events, or concerts on campus. Another problem that this app aims to resolve is alerting users of traffic, construction, road closures, application and offer alternate routes they can take to detour and save travel time.
Technical requirements »» Specifically the Google VR map that has size »» Internet connection (Cellular data / wifi down / no reception) »» Bluetooth for location accuracy »» Location Services »» Live updates for traffic, road closures, sidewalk closures, building space availability
Possible constraints »» Confidential areas with limited access (privacy) may constraint certain shortcuts »» Real time updates may sometimes be inaccurate/slow considering recent traffic or construction »» Possible lagginess due to Internet connection or IOS »» University log on is required for application usage »» Languages, primarily English and Spanish until future updates »» Rerouting may lag sometimes due to sudden change in route
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
6
Research Preliminary research design To find out what features would be helpful in the Campus Compass application, multiple interviews were conducted with students at a variety of college campuses across America. We also interviewed older audiences who fit the criteria of our secondary audience. The goal of these interviews were to get more information about these four topics: 1. What frustrates you about navigating around a college campus? 2. How often do you use navigation applications? 3. What are some functions that are missing from your favorite navigation applications? 4. (If applicable) As a parent or a visitor, how useful would it be to have an app that helps you navigate across campus?
Findings from the research Max, 19, student at UC Berkeley »» Doesn’t get too frustrated with campus navigation because all of the buildings come up on Google maps »» Gets frustrated with buildings on campus when you are not sure if the basement is the first floor or visa versa »» Gets frustrated when room numbers don’t correspond equally because the rooms are weirdly shaped »» Says all his favorite navigations applications are missing the possible shortcuts one could take when walking »» His biggest frustration on campus is when people ask for directions and wishes there was a universal application so this would no longer be an issue Meghan, 21, student at Cal Poly SLO »» The building numbers are hard to find and are in no particular order which can be frustrating when looking for a class
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
7
»» Uses Google Maps almost everyday, used on campus mostly as a Freshman to find buildings, still use when looking for a new building »» Having directions on the Cal Poly campus map would be extremely helpful, it is often hard to differentiate the buildings on that application »» Would be very helpful, visited University of Michigan and struggled meeting up with friends and finding places to park Haniel, 22, visitor at UC Santa Barbara »» Frustrated while navigating around college campus because it is hard to locate certain parts of campus with the limited signs and maps »» When using navigation applications, he is looking for accuracy on arrival time and traffic/closures being taken into account »» Says it would be helpful to have an universal application to help navigate across campuses because he goes to visit friends at school a lot and having to meet up with them is difficult because he is not familiar with the facilities on campus Kim, 50 »» Wayfinding on campus very difficult for him since signs are often to far for his eyes, they are hard to read and he does not know English extremely well »» Favorite navigation applications are missing information about visitor parking lots »» States that an application that helps him navigate across campus would help him meet up with his son easier David, 22, student at UC Los Angeles »» Most frustrated by the lack of maps and crowded locations while navigating around campus »» Mostly uses Waze as mapping application, says it does not give enough alternative routes or take note of traffic/construction »» Says it would be extremely helpful to have an app that helps navigate across campus
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
8
Angelica, 23, student at UC San Diego »» Has a hard time finding rooms that are in obscure locations »» Uses navigation applications as much as possible to efficiently save time »» States that sometimes while using navigation applications, all the colors blend together and it is hard to tell where you are and where you are going, this takes up time and makes it difficult to get to your destination
Persona Emma, 19, student at Cal Poly
“I want to navigate through campus to specific locations as quickly as I can.” Emma is a Cal Poly student who enjoys hiking, her dog, and playing the piano. Nava gating through campus was already difficult as a freshman. Emma does not want to spend another three years running late to obscure class locations. Thanks to Campus Compass, Emma will be able to locate her classrooms quickly and efficiently. Emma is a Chemistry major who was initially intimidated by Baker building because of its ambiguous wayfinding and various hallways. After a year of struggling to locate specific classes and navigate through campus, Emma slowly began to develop confidence. If Emma had this application earlier, Emma wouldn’t of had any problems and would have saved a ton of time.
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
9
Goals »» To be able to efficiently navigate buildings, facilities, restaurants, and routes on campus. »» To view traffic for specific routes on campus. »» To locate parking lots and meters. »» To find pet friendly places on campus on the application. »» Locate friends she connected with on campus through the app. »» Know when and where certain bus routes arrive. »» Utilize her ‘favorites’ list to navigate to her favorite locations quicker and with more efficiency. »» Receive notifications when live events such as concerts, sport games, performances, etc. so she doesn’t miss out.
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
Competitive analysis Existing alternatives »» Apple Maps
»» Waze
10
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
»» Google Maps
»» Campus Maps
11
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
»» Strengths of other products
»» Google Maps estimates travel time based on real-time/live traffic information »» Apple Maps, Google Maps, and Waze accounts for traffic, accidents, and closures when calculating travel time
»» Google Maps and Apple Maps can tell users what lane to be on when driving with the mobile application »» Google Maps and Apple Maps allows users to search for locations without having the user type in words (examples include Gas Stations, Food, Bars, Hotels, Grocery Stores, Shopping, ect.)
12
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
»» Google Maps and Campus Maps have indoor navigation for certain buildings
»» Waze has users alert each other in real time when there is a police, traffic, hazard, closure, or an accident »» Waze allows users to see their friends traveling when connected to Facebook
13
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
»» Google Maps has mobile and desktop version with very similar functions »» Weaknesses »» Apple Maps timing is not very accurate, especially on the desktop version »» Apple Maps does not say where traffic is on the desktop version »» Re-routing can sometimes be slow (especially on Apple Maps application) »» Apple Maps limits what a user can do on Desktop version as opposed to mobile
»» Most navigation applications are not user specific (no profile customization) »» Complicated color palettes and confusing information sometimes (especially with icons on Waze)
14
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
Similar form factors »» Desktop
»» iPhone
15
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
»» Android
»» Tablet
16
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
Visual language references 1. Domain »» Bathroom Icons »» Police Icons »» Eatery Icons »» Construction Icons »» Walking/Driving Icons »» Gas Icons
17
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
2. Vocabulary »» Route »» Food »» Gas »» Landmarks »» Buildings »» Lane closure »» Live Traffic »» Wayfinding »» Shortcut »» Efficient
18
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
19
User interaction design Scenario Emma is meeting with her group to work on a project. Rather than walking to the library to scout for seating, Emma checks how busy the library is and how many seats are available through the application. She realizes that the library is busy and full half an hour before the meet-up time with her partners. She makes an impromptu location change to the UU because she was able to find an alternate location with enough seats to accommodate for her group. Being able to make a last minute change this quickly allowed her to notify her group mates in a timely manner and still gave them an adequate amount of time for travel. After a long group project, Emma is hungry and decides to find the nearest food trucks with her friend. Her application locates the nearest options and is filtered with her preferences. When she gets to her and her friend’s favorite food truck, she and her friend finds that the line is too long. They choose their second favorite option and finds that the order is taking more time than they anticipated. Emma now needs to use the application, again, to find the quickest route that is devoid of campus events so she can get to her class quickly and efficiently. The application shows her three route options. two are filled with campus / student events. She avoids the 2 and chooses the least crowded option. She navigates, calmly, to class. Her trust in the applications rids her of her anxiety and stress. When she gets to class, she can save her preferences for specific days in case she forgets. After finishing class Emma is running late after leaving class. She is headed to meet with a professor about office hours. Emma is already in the building she has office hours in, but cannot find the classroom. She uses Campus Compass indoor GPS program to find the room quickly and efficiently. By using Campus Compass, Emma was able to make it to all of her activities for the day efficiently and on time.
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
Sketches »» Group Project Scenario
20
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
»» Late to Class Scenario
21
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
»» Overall Application Design
22
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
»» Overall Application Design
23
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
»» Overall Application Design
24
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
Wireframes  Campus Compass Planned Trip and Detour Designs
25
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
»» Campus Compass (Previous title, Campus Nav) Log In
26
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
»» Campus Compass (Previous title, Campus Nav) Connections and Directions
27
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
28
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
29
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
30
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
Usability analysis Usability analysis tests »» “Take me to Taco’s Express” »» “Message Steve off your friends on your friends list” »» “Use ‘quicknav’ to go to Subway »» “Map me to Building 10” »» “Select the route you would like to take to Building 10” »» “Take me to get food from Jamba Juice” »» “Show me your planned trips” »» “Look at the detauls for your English Study Group” »» “Change the trip’s location”
Usability analysis results 1. “Take me to Taco Express” »» Clicks food »» Curiosity to if the modular system can be changed or altered »» Explained that the boxes are interchangeable and customizable »» Next screen has “Taco Express” tab »» Clicked this tab and lead user straight to map »» User wonders why there are not zoom icons but enjoys simplicity of interface
31
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
32
2. “Message Steve off your friends list” »» User seemed unaware where to start at first but eventually found the friends icon on the bottom left »» User enjoyed the simple messaging layout from Apple messages more, where your most recent messages are at the top »» Still achieved task fairly easily and quickly after figuring out navigation 3. “Use ‘quicknav’ to go to Subway” »» User seemed to be unsure in the beginning because the modular system did not feature any verbal indicators of ‘quick navigation’ »» Realized it was on the arrow to the bottom right and quickly saw and selected Subway 4. Map me to Building 10 »» User clicked search bar to begin typing in ‘Building 10’ 5. Select the route you would like to take to ‘Building10’ »» User appears confused about where to see route options »» Suggest having them be in a different color and minutes of how long they will all take next to them 6. Take me to get food at Jamba Juice »» User easily clicks ‘food’ icon and chooses directions to Jamba Juice »» User is not sure at first if she should select ‘food’ icon or go to search bar »» Suggest having actually food icon instead of the word ‘food’ 7. “Show me your planned trips” »» User taps on the center icon at the bottom of the navigation bar which brings them to planned trips interface
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
8. “Look at the details for your English Study Group” »» User instantly tapped group name »» User was impressed with this feature because it reminded them of a planner inside the application 9. “Change the trip’s location” »» User easily changed the location of this trip »» User could guess what tall the icons on the search menu did »» User realized the search menu is not only to change a trip’s location but also to see how busy each location is
Changes from the results of usability analysis »» Biggest concern was the interface was going to be to different from pre-existing navigation or way finding applications »» Made sure to keep icons and words that were easy to use and understand »» User suggested making the application even simpler »» Organized messaging section of the application »» Applied easier to understand route options »» Went back and made sure pages appeared user friendly and did not have to information (we will need to work on this in future drafts of our wire frames as well)
33
34
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
»» Updated Wireframes have a more simplified design and are easy for the user to understand
PAUL GUZMAN
388 // WIREFRAMES
»» Directions are more straightforward Emma Cal Poly, SLO Likes Dogs
PAUL GUZMAN
388 //- WIREFRAMES oct - 31st 2017
Emma Cal Poly, SLO Likes Dogs
Uninav
oct - 31st - 2017
Uninav PAUL GUZMAN Uninav
**********
BUILDING
EVENTS
WEATHER
TRAFFIC
oct - 31st - 2017
NOT SIGNED UP? CLICK TO BEGIN.
NOT SIGNED UP? CLICK HERE TO BEGIN. HERE
2
11
Uninav
3
2 Uninav
3
EmmaLovesDogs95
SUBWAY CHICK-FIL-A Emma
4
CLASS ROOM
FOOD
BUILDING
1B
2
A
NOT SIGNED UP? CLICK HERE TO BEGIN. B
B A
1
2
!
B
2
1
1
A
2
1
A
B54R334
B1R2
A
2
1
JAMBA JUICE STARBUCKS
TRAFFIC
1
5
5
nov12TH
1
John Design Guy Wanna go to Jamba Juice?
Steve Buscemi Hey man, whats-
EINSTEIN BROS.
B1R2
4 1
Route Invite
B Invite friends from your
Add to friends
Alert
Cal Poly, SLO
(null)
Emily Design Girl I left my phone in B34R151
nov12TH
oct31TH
10
10 Paul Design Guy oct27TH
Parking lot C is-
university for a more interactive experience! Steve Buscemi Here
B
Steve Buscemi Hey man, whatsGerard
Gerard Butler Meet me @Dex34
Butler Cal Poly, SLO
8
6
B A
1
2
Arrived: 2 At Tacos Express.
Route “2”: Steve Continue straight ahead and take a left at the turn. You will then arrive at your destination.
8
9
Arrived: At Tacos Express.
9
Gerard Butler Paul Meet me @Dex34
Buzman DeVry University
11
Paul Buzman DeVry University
C
oct12TH
Emily Design Girl I left my phone in B34R151
10 10
C
oct15TH
John Design Guy friends Wanna go Invite to Jamba Juice?from oct12TH
(null)
Gerard Butler Cal Poly, SLO
Paul Design Guy Parking lot C is-
John Design Guy Wanna go to Jamba Juice?
your university for a more interactive experience!
Emily Design Girl Here I left my phone in B34R151
Steve Steve Cal Poly SLO Likes Bagels
Invite friends from your university for a more interactive experience!
Message
Steve Cal Poly SLO Likes Bagels
12Route Invite
Add to friends
Alert
(null)
(null)
11
Message
Route Invite
Add to friends
Alert
(null)
(null)
Well obviously.
Hey Steve, this line is mildly unreasonable. We should relocate.
Steve
Steve
Steve
13 Hey Steve, this line is mildly unreasonable. Hey Steve, this line is We should relocate. mildly unreasonable. We should relocate.
Here
10
Hey Steve, this line is mildly unreasonable. We should relocate.
Steve Buscemi Cal Poly, SLO
oct27TH
oct15TH
10
9
B 1
Route “2”: Continue straight ahead and take a left at the turn. You will then arrive at your destination.
Warning: Steve Route ONE has an ongoing event in your path. Proceed? Yes / No
Steve Cal Poly SLO Likes Bagels
2
Message
oct12TH
oct31TH
6
A
11
12
Hey Steve, this line is mildly unreasonable.Hey Steve, this line is mildly unreasonable. We should relocate. We should relocate.
12
13 13
B18R130 B200R1
B A
B10R340
B54R334
C
oct15TH
nov12TH
1
5
Paul Buzman DeVry University
oct27TH
Paul Design Guy Parking lot C is-
2
Warning: Route ONE has an ongoing event in your path. Proceed? Yes / No
7
Gerard Butler Cal Poly, SLO
!
A
8
2
Available routes:
Steve Buscemi Cal Poly, SLO
oct31TH
1
2
B
Gerard Butler Meet me @Dex34
A
6
Available routes:
7 Steve Buscemi Hey man, whats-
2
4
CHICK-FIL-A
4
2
Arrived: At Tacos Express.
Route “2”: Continue straight ahead and take B a left at the turn. You will then arrive at your destination. 1
B34R151
SUBWAY
2
7
Likes Dogs
RECENTS
TACOS EXPRESS
4
2
Warning: Route ONE has an ongoing event in your path. Proceed? B Yes / No
Available routes:
Emma
B1R2Cal Poly, SLO
Likes Dogs
EVENTS
B
2
!
4
B
3
1
A
B200R1
CHICK-FIL-A B200R1
FAVORITES
**********
B 1
B18R130
SUBWAY
B54R334 EINSTEIN BROS.Emma Cal Poly, SLO
Cal Poly, SLO
EINSTEIN BROS. Likes Dogs
WEATHER
A
B10R340
B18R130
STARBUCKS
TRAFFIC
JAMBA JUICE RECENTS B10R340
EVENTS
WEATHER
B34R151
STARBUCKS
JAMBA JUICE
BUILDING
********** EmmaLovesDogs95
TACOS EXPRESS Likes Dogs
B34R151
TACOS EXPRESS
CLASS ROOM
FOOD
RECENTS
Cal Poly, SLO
FAVORITES
Uninav EmmaLovesDogs95
388 // WIREFRAMES
FAVORITES Emma
Emma Cal Poly, SLO Likes Dogs
CLASS ROOM
FOOD
Emma Cal Poly, SLO Likes Dogs
Emma Cal Poly, SLO Likes Dogs
Well obviously. Well obviously.
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
»» Easier for user to direct from the route options »» Simple shortcuts for user to get to places quickly and efficiently
35
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
36
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
User interface design Annotated layouts
Profile
Meet up maps
Menu and search
37
38
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
Log in and sign up
Menu
Search and map
Planned trips
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
Log in and sign up
Planned trips and group meeting
Map and search
Main menu
39
40
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
Final product
Loading
Log in
General map
Sidebar menu
Route options to destination
Map view navigation
41
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
Street view navigation
Street view arrival
Indoor view arrival
Shared trips
Change locations
Favorite friend list
42
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
Quick navigation
Edit planned trip
View planned trips
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
43
Ethical considerations Campus Compass provides a service for good. Short-comings involve one of the more innovative aspects of the application; user uploaded paths. Hackers/stalkers may use data from user interactions to continuously extract intel from other users. Academic information may be used and gathered by 2nd hand organizations or corporations to selectively track and/or utilize user information for their own personal gain. Some corporations use user cell phones numbers, emails, and sell it to other corporations for demographic research. User profiles, however, have an erase option for saved routes, favorites or any other user data. Profiles also have sets of privacy options that allow for user data to only be released to selected users. Academic institutions also have little involvement in user data. They primarily provide moderators for updating the status on crowded routes.
Future enhancements »» Allow application to be used on Android phones »» Create to have international usage at college and universities in other countries besides United States »» Allow any language to be accessed on application »» Rerouting adaptability to quickly reroute when user goes off path of selected destination
ART 388: Interaction Design II Autumn 2017 Campus Compass Duch Guzman Joachim
Profile Pic
?
44