Milestone 3:
Design Alternatives
User Experience Requirements
User Stories
We have organized our user stories in a heirarchy based on related activities and the importance of the features.
Maps & Locations
- As a freshman/returning student, I want an easy-to-use map of the campus so that I can find what buildings my classrooms are located in.
- As a Student or Faculty Member of the university, I want a digital indoor building map that has all the room numbers, restrooms, stairs, entrances, etc. so that I can locate rooms within academic buildings on campus without having to frantically find the room inside the building.
- As a new student or faculty member of the university, I want to be able to view the indoor building map for each of the floors in a particular building so that it is easier to navigate within a building and find a particular room.
Directions & Navigation
- As a student, I want an easy-to-understand list of bus routes and their route directions as well as their stops so that I know which bus I should take to arrive at my desired destination.
- As a student, I want to know the specific bus information in the app like how many people are on the bus, bus ID, arrival times, and bus status (out-of-service) so that I can make an informed decision as to whether to take the bus or walk to my next class.
- As a student or faculty member of the university, I want an in-app navigation system which provides me with fusion routes to my destination with time estimates so that I can combine multiple modes of transport to reach my destination as quickly as possible.
- As a student or faculty member of the university, I want step-by-step directions so that I can easily navigate to a given destination using whichever route I select.
Athena & UGA MyID Integration
- As a student at the university, I want to connect my Athena & UGA MyID accounts so that I can better keep track of my daily route based on my specific classes.
- As a student at the university, I want directions to get to my specific classes based on my class schedule so that I can get to my next class as efficiently as possible.
Most Relevant Proposed Solution
All of our user stories are highly relevant to our proposed solution because they all address navigation issues that new and returning students and new faculty may have when trying to initially learn the layout of the UGA campus and arrive to their classes in an time-efficient manner.
According to the Cornell Sun and Badger Herald, freshman and sophomore students who have never been to campus before have worries and concerns about living on campus and are struggling with adapting to being in an unfamiliar environment.1,2 Due to this, our user stories concerning students, navigation, and maps are highly applicable to both our problem of study and our proposed solutions.
Studies have also shown that the new facilty members struggle just as much as new students when it comes to navigating an unfamiliar campus. A 2021 study on the use of augmented reality in helping with indoor navigation on university campuses found that “Like first-year students, new employees and new faculty members need to be directed and guided through the university’s route…”4 Coincidentally, UGA had fairly recently hired many new faculity members fairly recent back in 2020. A UGA Today article from 2020 announced that UGA had a cluster hiring initiative and mentioned how UGA “recruited 14 new faculty members for fall 2020 in addition to the more than 100 faculty members who joined UGA through the regular hiring process at the unit level.”3 This information provides significant context to our reasoning behind incorporating new faculty in our proposed solutions, as many of these new UGA faculty members were hired during the height of the pandemic when online learning was in full force. As such, they did not have nearly as many opportunities to explore buildings on campus and experience the campus layout. UGA will almost certainly continue to hire more faculty members, so the solutions that we aim to implement will likely continue to further assist new faculty into the foreseeable future.
Ideation & Preliminary Designs
User Stories
User Story 1
As a freshman/returning student, I want an easy-to-use map of the campus so that I can find what buildings my classrooms are located in.
Ideas:
Wireframes:
Wireframe 1
For wireframe 1, from the homepage/map page leads to a map with 3D buildings on the map. We believed that adding 3D models of the buildings in the map will help the user navigate around the campus since 3D maps provides a realistic view of the users' surroundings.3 This 3D design is also used by one of UGA’s mapping systems.Wireframe 2
For wireframe 2, from the homepage/map leads to a map with just the wireframe of the buildings on the map. We believe that wireframe will provide more details even when the map is zoomed out so the contrast on the map can be improved, similar to both Apple and Google Maps.User Story 2
As a Student or Faculty Member of the university, I want a digital indoor building map that has all the room numbers, restrooms, stairs, entrances, etc. so that I can locate rooms within academic buildings on campus without having to frantically find the room inside the building.
Ideas:
Wireframe:
Wireframe 1
The user should be able to access a list of their registered classes after signing into the UGA App using MyID (the classes drawn in this wireframe are placeholders). Clicking on one of their classes will automatically take them to a map of the building's floor that their classroom is located in with the classroom pinned so that it is easy to find. This idea was proposed because we felt that having a list of classes that users could click on to find their classroom location would be familiar to many UGA students since it mirrors how Athena's course selection page has a list of courses that users could select (Figure 1).Wireframe 2
Clicking on a building's pin on the map will take the user to that building's information page. We hope that the pins serve as a strong enough signifier to communicate that more information can be found about the buildings. Google Maps is a highly popular app, and they use pins/markers to signify building information, so it is familiar to many users. In the building information page, there should be a button labeled Floor Plan that will take the user to a screen showing a map of the floor(s) for that building.
User Story 3
As a new student or faculty member of the university, I want to be able to view the indoor building map for each of the floors in a particular building so that it is easier to navigate within a building and find a particular room.
Ideas:
Wireframe:
Wireframe 1
For this wireframe, we chose to use the same map system described in User Story 1. The buttons at the side, a simple side attached bar listing the floors so the user could click the floor they intended to view. Placing the selection box in this corner makes it easy to reach for most users according to Mobile Reachability - Rules of Thumb.1 Having a simple vertical box with floor selections was chosen since most buildings on UGA campus are not skyscrapers and thus have a manageable amount of floors that can easily be shown all at once even on a small screen.Wireframe 2
For this wireframe, we chose to lay out the inside of the building like a floor plan. This allows the user to see all the floors at once, which gives them a bird’s eye view of the entire structure. The navigation to this page was chosen since the UGA app, which our work is inspired by, also has a page describing each building in detail. This is a page we did not want to change and thus it seemed the logical avenue to arrive at this full floorplan style view of the building. According to the Process and Principles of Human-Computer Interface Design, consistency helps users when they are trying to learn the system and reduces their burden of learning and memorizing.2 Due to this, we want to keep things consistent when implementing a new feature in order to ensure that people can easily adapt to it.User Story 4
As a new student or faculty member of the university, I want to be able to view the indoor building map for each of the floors in a particular building so that it is easier to navigate within a building and find a particular room.
Ideas:
Wireframe:
Wireframe 1
This wireframe allows the user to see both the list of stops and the map with the stops at the same time. While this may increase cognitive load, this allows the user to both scroll around on the map and find the stop they are looking for and use the list as a shortcut to get to the stop they want faster.2 We believe the increased efficiency via the shortcut will more than make up for the decreased reaction time born of the larger number of items on the screen.5Wireframe 2
This wireframe shows that bus stops on the map can be interacted with to display what buses arrive at that particular stop. According to Apple’s Design Principles, having direct manipulation on the map engages the user and facilitates understanding, and, according to the Process and Principles of Human-Computer Interface Design, having shortcuts helps improve user efficiency.2,7 By having the bus stops be interactable and serve as a shortcut to a list of bus routes that go to that stop, it makes things more efficient and understandable for the user to find what buses will be arriving soon at a certain location.Wireframe 3
This wireframe combines the previous two wireframes and allows the user to identify nearby bus stops and the ability to click on those stops to find what buses will be arriving to those stops. This basically gives the user a shortcut to view all of the buses that will be arriving near them and improves the user’s efficiency at finding relevant buses that they could take. According to research (“Designing Comprehensible Agents”), it is important to have transitions between related signifiers so that the user could properly understand how the app is interpreting their actions.4 By combining our previous two ideas, we hope that we can better communicate to the user that they can obtain information about a particular bus stop after selecting the stop on the map.User Story 5
As a student, I want to know the specific bus information in the app like how many people are on the bus, bus ID, and bus status (out-of-service) so that I can make an informed decision as to whether to take the bus or walk to my next class.
Ideas:
Wireframe:
Wireframe 1
For this user story, we’ve decided to keep most of the design from the current UGA app as we believe the design works well to display live bus locations and similar designs are also used by other public transportation applications, like Athens Transit. We’ve decided to only add an information box that displays when the user touches a particular bus on the map that shows additional information, similar to the design already in use by UGA’s bus tracking website.Wireframe 2
For frame 2, we’ve also kept most of the designs unchanged from the current UGA app, but modifying the bus tracking icon to flash between the arrow icon and the exclamation mark to notify the user that there is special information about that particular bus on the map and the user can click the icon to view additional information. This provides a signifier to the user that the bus tracking icon has additional information that can be displayed and is inspired by the New York’s MTA’s live train tracking digital map.User Story 6
As a student or faculty member of the university, I want an in-app navigation system which provides me with fusion routes to my destination with time estimates so that I can combine multiple modes of transport to reach my destination as quickly as possible.
Ideas:
Wireframe:
Wireframe 1
For this user story, we wanted to bring native navigation within the UGA app, so that optimal routes specific to the UGA campus can be given to users depending on the navigation options that they have selected without the need to switch apps. According to the Process and Principles of Human-Computer Interface Design, a system should be consistent and have a similar interface appearance, layout, similar mode of interaction and similar format of information display.2 This can “reduce the user’s burden of learning and memorizing” and also “reduce the possibility of incorrect manipulation.”2 By making the user go to a different navigation app to get directions, they will be met with a slightly different set of affordances. By keeping the navigation information within the UGA app and keeping affordances consistent, we hope that this would help users better learn to use the system and encourage them to use the app more often when trying to navigate the campus.Wireframe 2
Our goal in wireframe 2 was to consider accessibility. By providing an option for people who rely on paratransit to navigate around campus we can dramatically increase the usability of the navigation functions for those who are disabled and unable to use many of the typical navigation features of the app. According to Shneiderman’s 8 Golden Rules of Interface Design, UI design should seek universal usability and recognize the needs of diverse users.8 Because of this, we hope that adding an option for paratransit service in the UGA app will make it more useful to a wider range of users.Wireframe 3
For this idea, we decided to combine our previous two ideas of having a native navigation interface in addition to an option to enable paratransit services. If we only implement wireframe 1, we would be unable to serve the core of the user base which requires an easy to access and easy to use navigation system with clear signifiers for each of its functions. The clarity of these signifiers, as research has shown, will directly translate into the potential affordances accessible by end users.4 Additionally, because the typical navigation system outlined in wireframe 1 does not provide usable affordances to the entire potential user base for the app, we must also incorporate the functionality outlined in wireframe 2 to ensure that as many potential users are accounted for as possible.2User Story 7
As a student or faculty member of the university, I want step-by-step directions so that I can easily navigate to a given destination using whichever route I select.
Ideas:
Wireframe:
Wireframe 1
For wireframe 1, after entering the destination, it will display a map with the fastest route displayed as well as a brief summary of the route to help the user decide whether to take the route and reduce the user’s short term memory load. After clicking the go button, we believe a step by step guide being shown to the user will help them reach their selected destination, similar to how Google Maps works, improving consistency for users that also uses other navigation apps making it seamless for users.6Wireframe 2
For wireframe 2, a big countdown of the number of stops left is shown at the top of the screen and the bus route displayed on the bottom of the screen. As the destination stop is approaching, the countdown area will then display a message to tell the user to get off the bus. We believe this will prevent the user from missing their stop and help the user know exactly when they need to prepare to get off the bus, similar to Google Maps’ step by step directions in the public transit section, but with a heavy emphasis on the number of stops left.Wireframe 3
For wireframe 3, we decided to combine the main ideas of wireframe 1 and 2 since we believe we could incorporate both ideas. By combining them, when the user gets on a bus, the bus screen will display more detailed bus directions instead of just the simple directions shown on wireframe 1. This display has a similar idea to driving directions on Google Maps with it telling you which specific lane to get into, but here it is telling you exactly which stop to get off and how many stops left. We believe this will further improve the user experience regardless of the mode of transport that is involved in the route to the destination as this brings convenience to the user as critical navigation information can be referenced by the user specific to the mode of transport.10User Story 8
As a student at the university, I want to connect my Athena & UGA MyID accounts so that I can better keep track of my daily route based on my specific classes.
Ideas:
Wireframe:
Wireframe 1
For User Story 8, it was important to include a method for logging in to the UGA MyID system. We felt that the best place to incorporate this was under an easy to access settings page accessible with one click from any screen within the app. The inclusion of a shortcut to the settings page replicates a well-understood design practice by making it easy to access if and when the user needs to make changes.2 Additionally, by including the MyID login on this page, it gives the user the impression that by logging in, their account information will be retained as changes to settings are expected to be retained once the user navigates away or closes the app. This principle is exemplified in Apple’s Design Principles which suggest that changes made by the user should always take precedence and that the app should never undo explicit actions made by the user.7 The incorporation of the classes as a tab under the map and directions page maintains consistency as all other navigation functions of the app are also present in that location.Consistency has been shown in research to be an important concept in developing good designs.2 Similarly, by incorporating the classes on the map and directions screen, it better signifies to the user that this particular feature set will also allow them to navigate to a location based on the class schedule being shown to them. The importance of easily understandable signifiers in good design is something that has been strongly supported in research.4 Finally, the incorporation of both class schedule and location information on a single page would allow the user to obtain all of this important and potentially time-sensitive information as quickly as possible.Wireframe 2
When users are not signed in to the MyID system, we felt that it would be important for users to have a clear and concise message that would instruct them on what to do and provide them with a clear and easily accessed shortcut to the login location on the settings page. Research supports both of these crucial concepts when conveying messages to the end user.2 By providing users with a list of classes and the best methods of transportation on a dedicated page, it reduces clutter for the user. Reduced on-screen clutter not only helps the user get to their end goal faster, but also reduces the mental strain they take on to get there.5User Story 9
As a student at the university, I want directions to get to my specific classes based on my class schedule so that I can get to my next class as efficiently as possible.
Ideas:
Wireframe:
Wireframe 1
The class pane was chosen to appear below the map as it allows the user to see both the location of the building on the map and the name of the building. We intended this as a way to lean into the fact that “Readers of 2D maps could better recall place names.3 Hopefully, by showing the user the building's location and the name at the same time, we will help the user remember its location on their own and thus become better adjusted to the campus as a whole.Wireframe 2
The list of classes was placed on its own page since it reduces the user’s choices by reducing the number of items on screen at a given time. This allows the user to get to the directions they want to access faster.5Detailed Designs
User Stories
User Story 1
As a freshman/returning student, I want an easy-to-use map of the campus so that I can find what buildings my classrooms are located in.
The embed may be zoomed way in or out. If you are
experiencing issues viewing the embed,
click here.
While not part of this user story, we’ve decided to redesign the UGA App home screen as it is the foundation to everything that we will use to build our user stories on. We’ve decided to improve reachability by removing the favorites section that is found at the very top of the screen and move more icons downward so that the user can still easily reach for the icons when they are using the device one-handed.1 For user story 1, we’ve decided to go with the wireframe design as we believe it is the best design since having 3D models may block the view on certain streets and hinders the readability of street outlines and street names. Moreover, 3D models on the map do not work well for when the map is zoomed out. To make the map with a better zooming experience, we’ve decided to go with the second idea with the wireframe buildings design with a 2D mapping experience, just like Google Maps and the current UGA app. Furthermore, we reduced the number of menu options on pullable tap design to improve findability of core features. Moreover, a search bar is added to allow users to search for their desired destination without having to navigate to a different screen or scroll through a long list of options like the current UGA app design.
User Story 2
As a Student or Faculty Member of the university, I want a digital indoor building map that has all the room numbers, restrooms, stairs, entrances, etc. so that I can locate rooms within academic buildings on campus without having to frantically find the room inside the building.
The embed may be zoomed way in or out. If you are
experiencing issues viewing the embed,
click here.
User Story 3
As a new student or faculty member of the university, I want to be able to view the indoor building map for each of the floors in a particular building so that it is easier to navigate within a building and find a particular room.
The embed may be zoomed way in or out. If you are
experiencing issues viewing the embed,
click here.
User Story 4
As a new student or faculty member of the university, I want to be able to view the indoor building map for each of the floors in a particular building so that it is easier to navigate within a building and find a particular room.
The embed may be zoomed way in or out. If you are
experiencing issues viewing the embed,
click here.
For user story 4, we decided to implement the idea that combined the first and second idea from our wireframe because we believe that this is the best approach after seeing the combined lower fidelity designs. In the higher fidelity design, we made a few drastic changes. First, we have simplified the pull tap to include just several icons instead of having a recently viewed place that was in the lower fidelity design. Now, when pulled up, text labels appear next to each of the icons in a list view so that if a user does not know what an icon means, the text label can explain what each of the icons mean. After selecting the buses option, a list of nearby bus stops appears. In the wireframe design, only the name of the bus stop and their proximity and direction is shown. However, in the higher fidelity mockup, bus arrival times are added with color coded bus icons after we realized that this critical feature was missing in our lower fidelity design. This allows users to glance at the arrival times instantly without having to go to a different page. Furthermore, an arrow icon is added to add signifiers that clicking in that area will go to the next page with more information about that bus stop. On the screen with additional information about the stop, in the wireframe, only the routes of buses that serve the bus stop along with the specific route’s next few stops along their distance was displayed in a vertical format. In our higher fidelity design, the most prominent of these changes was displaying bus stops information as a cohesive horizontal line with labeled stops rather than a simple bus stop list. By showing this information on a line, the user can better understand their location in relation to the other locations on the bus route they are viewing. Similar designs are implemented in Hong Kong’s Mass Transit Rail Network (Figure 1) as well as London’s Underground Tube Network (Figure 2) and other transportation systems in the world. Moreover, each of these changes from our low-fidelity designs provide the user with a consistent and easy-to-understand framework for interpreting the information being displayed, something that is crucial to promoting proper comprehension by the end user.4
"New display on West Rail Line 8-car trains" by Exploringlife, used under CC BY-SA 4.0 / Cropped from original |
"London Underground Signs" by James Petts, used under CC BY-SA 2.0 |
_-_Flickr_-_James_E._Petts_(4).jpg#filelinks){kind=link}
User Story 5
As a student, I want to know the specific bus information in the app like how many people are on the bus, bus ID, and bus status (out-of-service) so that I can make an informed decision as to whether to take the bus or walk to my next class.
The embed may be zoomed way in or out. If you are
experiencing issues viewing the embed,
click here.
For user story 5, we believe the second idea is the best design. This is because alerting passengers to service changes is critical in a public transportation network so that people can plan alternative ways to their destination.6 While we kept most of the user interface the same as the current UGA app, a flashing bus icon (Figure 1) is added as this signifies there is special information to be shown instead of just a normal icon for every bus on the map, similiar to how the New York MTA alerts riders to service changes (Figure 2). Other changes we made in the higher fidelity design included the bus route name displayed at the top of the pop-up box, instead the name of the bus ID as we believe this will be more useful and helpful for users. Furthermore, a red icon is added next to the out of service message with the message highlighted in yellow to get the user’s attention, similar to MARTA’s service change alerts (Figure 3) followed by additional useful information, similiar to UGA's bus tracking website (Figure 4).
"Flashing Bus Icon" by George Fang |
"MTA Live Subway Map" by Metropolitan Transportation Authority |
"MARTA Service Alerts" by Jenni Girtman for The Atlanta Journal-Constitution |
"UGA Bus Tracking" by UGA Transportation and Parking Services |
User Story 6
As a student or faculty member of the university, I want an in-app navigation system which provides me with fusion routes to my destination with time estimates so that I can combine multiple modes of transport to reach my destination as quickly as possible.
The embed may be zoomed way in or out. If you are
experiencing issues viewing the embed,
click here.
User Story 7
As a student or faculty member of the university, I want step-by-step directions so that I can easily navigate to a given destination using whichever route I select.
The embed may be zoomed way in or out. If you are
experiencing issues viewing the embed,
click here.
User Story 8
As a student at the university, I want to connect my Athena & UGA MyID accounts so that I can better keep track of my daily route based on my specific classes.
The embed may be zoomed way in or out. If you are
experiencing issues viewing the embed,
click here.
User Story 9
As a student at the university, I want directions to get to my specific classes based on my class schedule so that I can get to my next class as efficiently as possible.
The embed may be zoomed way in or out. If you are
experiencing issues viewing the embed,
click here.
Summary Video
Milestone 3 Presentation
Sources MLA
Works Cited
Alsabbagh, K. J., et al. “University Campus Indoor Navigation for Android Devices Using Augmented Reality and A* Search Algorithm (UCIN).” 3rd Smart Cities Symposium (SCS 2020), Jan. 2021, pp. 257–263., https://doi.org/10.1049/icp.2021.0890.
Badjate, Mihika. “'Our Real Freshman Year': Class of 2024 Looks Forward to an in-Person Fall.” The Cornell Daily Sun, The Cornell Daily Sun, 29 July 2021, https://cornellsun.com/2021/07/29/our-real-freshman-year-class-of-2024-looks-forward-to-an-in-person-fall/.
Bragg, Lucy. “Implementing a Successful Campus Navigation App.” Mappedin, Mappedin, 22 Sept. 2021, https://www.mappedin.com/blog/use-cases/campuses/implementing-a-successful-campus-navigation-app.
Chao, Gong. “Human-Computer Interaction: Process and Principles of Human-Computer Interface Design.” 2009 International Conference on Computer and Automation Engineering, 2009, pp. 230–233., https://doi.org/10.1109/iccae.2009.23.
Conway, Emma. “Freshman Year 2.0: The Class of 2024 Reflects on COVID Filled First Year, Looks to New Beginning Ahead.” The Badger Herald, UW-Madison's Premier Independent Student Newspaper, 2 Aug. 2021, https://badgerherald.com/features/2021/08/02/freshman-year-2-0-the-class-of-2024-reflects-on-covid-filled-first-year-looks-to-new-beginning-ahead/.
Fahmy, Sam, and Mike Wooten. “UGA Invests in Faculty Development, Strategic Hires.” UGA Today, University of Georgia, 3 Nov. 2020, https://news.uga.edu/uga-invests-faculty-development-strategic-hires/.
“Human Interface Guidelines.” Apple Developer, Apple Inc., https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/.
“The Importance of UI & UX in a Public Transit Mobile App.” Modeshift, Modeshift, 31 Aug. 2020, https://modeshift.com/mobile-ui-ux-public-transit-systems/.
Kirhenstein, Alex. “Mobile Reachability. Rules of Thumb.” Medium, Medium, 13 Oct. 2015, https://medium.com/@Draward/mobile-reachability-rules-of-thumb-ce37dd0cd3ad.
Proctor, Robert W, and Darryl W Schneider. “Hick’s Law for Choice Reaction Time: A Review.” Quarterly Journal of Experimental Psychology, vol. 71, no. 6, 2018, pp. 1281–1299., https://doi.org/10.1080/17470218.2017.1322622.
Schobesberger, David, and Tom Patterson. “Evaluating the Effectiveness of 2D VS. 3D Trailhead Maps: A Map User Study Conducted at Zion National Park, United States.” Mountain Mapping and Visualization, 2008, pp. 201–205., http://www.mountaincartography.org/publications/papers/papers_lenk_08/schobesberger.pdf. Accessed 7 Apr. 2022.
Sengers, Phoebe. “Designing Comprehensible Agents.” IJCAI'99: Proceedings of the 16th International Joint Conference on Artificial Intelligence, vol. 2, 31 July 1999, pp. 1227–1232., https://www.ijcai.org/Proceedings/99-2/Papers/079.pdf. Accessed 7 Apr. 2022.
Smith, Sidney L., and Jane N. Mosier. “USER GUIDANCE.” GUIDELINES FOR DESIGNING USER INTERFACE SOFTWARE, Aug. 1986, https://hcibib.org/sam/4.html. Accessed 7 Apr. 2022.
Thorisson, Kristinn R. “Simulated Perceptual Grouping: An Application to Human-Computer Interaction.” Proceedings of the Sixteenth Annual Conference of the Cognitive Science Society, 2019, pp. 876–881., https://doi.org/10.4324/9781315789354-152.
Wong, Euphemia. “Shneiderman's Eight Golden Rules Will Help You Design Better Interfaces.” The Interaction Design Foundation, 2021, https://www.interaction-design.org/literature/article/shneiderman-s-eight-golden-rules-will-help-you-design-better-interfaces.