Milestone 4:
Prototyping & Testing
Prototype
Interactive Prototype
Artboard of the Prototype
One limitation regarding Figma that we had to face was thinking of potential solutions to connect different states of our app together into one cohesive prototype. Our app had three states: Not Logged in, Logged in without Paratransit, and Logged in with Paransit enabled. The solution that we employed was to link the three different versions/states of our prototype using the settings page. Depending on the setting option selected, the user will be taken to the settings page frame which contains the correct pathing for that given state change. The various settings page frames, seen in the center of the artboard, therefore act as an intermediary between the different prototype states and will take the user to the section of the prototype that reflects their setting changes.
User Stories & Demo Videos
User Story 1
User Story Connection
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. Our mockup implements this user story by providing a navigable campus map with all the buildings clearly labeled. It is accessible from the app’s homepage via a labeled button to reduce the number of actions the user needs to take to begin working with it. The map is implemented in the same style as the UGA app, which is the president being compared against for our entire app. This feature’s inclusion helps the target users overcome our problem of study by allowing them to easily find both their current location on campus and the location of the building in which the class they are attempting to arrive at on time is located. Seeing these locations and importantly, the exact size and shape of the space between these two locations is useful to those impacted by our problem of study because they are yet to build a good mental model of the campus as a whole, thus they cannot rely on simply knowing where they need to go and how to get there. The map implemented here can supplement this lack of knowledge and allow the user to get to their in person instruction more efficiently and thus on time.
Demonstration Video
User Story 2
User Story Connection
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. Our mockup allows for this user story by giving the user a digical map of the building. The design includes important information like that detailed in the user story. It also, importantly, displays the room numbers for each room on the floor which aids in the user’s navigation on the floor. This map would be implemented in the final version of the app with the same dragging to move around and pinching to zoom in as the campus map. This adds cohesion for the app and allows the user to determine how to use the map faster. The inclusion of this map in the design aids the user to prevail over our problem of study by allowing the user to easily use the indoor map to find entrances to access the building, stairs to move faster between floors, and room numbers to both compare to the rooms around them to locate themselves within the building and to locate the room they are to have class in. This can reduce user’s confusion, get them to class faster, and thus ensure they miss no in person instruction because of delays caused by failing to find their class within the building fast enough.
Demonstration Video
User Story 3
User Story Connection
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 mockup allows for this user story by both providing the user an easy-to-use map of each individual floor, but also a simple way to view each floor of a building. By tapping on the number of the floor in the bottom right corner of the screen, the user is able to view that floor, and that floor alone, in its totality. This was chosen over laying out all the floors in an orderly fashion all at once so a user can more quickly find and view the floor they are looking for. This implementation of a view of a building’s floors allows the target user to surmount our problem of study by allowing them to navigate the many multi-story buildings on campus quickly and simply. Laying the floors out this way reduces confusion. And with confusion comes the possibility of arriving to a class late and thus missing vital in person instruction time. Since this is the stated problem, allowing the user to more easily find the floor they are looking for actively helps the user defeat said problem.
Demonstration Video
User Story 4
User Story Connection
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. Our prototype addresses our problem of study as users can easily see the bus stops closest to them as well as the map since we decided to list the bus stops based on the user’s proximity to a bus stop. Moreover, tapping a stop will provide the user with additional information like the next stops information organized as a horizontal line. The line organization style is also used by other major public transportation systems around the world, which means that our redesign of the interface can be understood by users from different backgrounds. The line organization style also tells the user the travel direction for the bus route. This redesign should help users learn the bus system and help them navigate around the campus so they can arrive to classes on time.
Demonstration Video
User Story 5
User Story Connection
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. Our prototype addresses our problem of study as it provides additional critical information regarding a bus so that the user can make a decision on whether to take the bus or use an alternative mode of transport. Our redesign retains many of the design elements of the current UGA app for live tracking the bus, like color coded bus route lines on the map. However, our redesign included an important addition to the map. A flashing bus icon that provides users a signifier that a particular bus has an alert and an affordance for the user to tap on the icon. Tapping the icon will provide additional information for that particular bus. Information can include important service alerts like out of service and the last stop, driver status, and the number of people on board. With this information, a user can make an informed choice as to whether to take the bus, wait for the next bus that is not out of service, walk, or simply choose an alternative mode of transport. The addition of the flashing icon and bus information should help users arrive at their classes or destination on time.
Demonstration Video
User Story 6
User Story Connection
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. Our prototype design addresses the issue of new students and faculty members having trouble navigating the UGA campus because, by having an in-app navigation system, users can obtain more accurate navigation information tailored to suit the UGA campus and the services that UGA provides. This helps prevent users from getting lost within the UGA campus and ensures that users make it to their classes on time. We have also decided to incorporate UGA’s existing paratransit services, so that the app can serve a larger user base and affords paratransit users the convenience of scheduling or requesting a ride directly within the app. This feature of the app can only be accessed by logging into the UGA app and enabling the service in order to prevent the feature from being used by users who do not need paratransit and ensures that the service stays exclusive to the users who rely on paratransit to navigate around campus.
Demonstration Video
User Story 7
User Story Connection
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. In the prototype, we believed that we have improved signifiers to both better communicate to users that they can obtain navigation directions from the UGA app and improve the ease of use when referring to the directions as the student is traveling to their destination. This design addresses the issue of new students and faculty members having trouble navigating the UGA campus because it provides crucial information to optimally get to their destination in a clear and concise manner. Our design draws much inspiration from Google Maps like having the step-by-step directions include a map and icons aside a brief description so that it is easier for the user to remember the directions and clearly tell at a glance what the next step is. Additionally, we have incorporated the UGA app’s live bus tracking into the step-by-step directions in order to signify to users that they can obtain more information on the bus selected by the route. This additional bus information familiarizes the user to relevant bus routes that they can take to get to certain parts of the campus and ensures that the user recognizes what stop they need to get off at for their chosen route.
Demonstration Video
User Story 8
User Story Connection
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. One of the major design choices we incorporated with this user story was to show the user the classes shortcut on the app’s homepage regardless of whether they were signed into a UGA MyID account or not. By showing the user a classes shortcut listed under the navigation features, it signifies to the user that this new feature set exists and helps better guide them through how to set up the UGA MyID integration if they haven’t already. Another crucial design decision was the incorporation of different colored text for each type of information in order to help the user differentiate between them. In this case, we chose to show names of classes in white, class times in blue, and class locations in red. These three colors were easily differentiable between each other, adding an additional layer of clarity. Finally, we decided to incorporate multicolored pins on the map which would match to those shown next to each class name. This feature would help the user more easily correlate a class's information with its actual physical location on campus.
Demonstration Video
User Story 9
User Story Connection
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. To address this user story, we wanted to make the process of obtaining directions to the location of a class as simple as possible. The easiest method we found to accomplish this was to use the navigation system we had already designed as a part of user story 6 as the basis for the class navigation system. The reason we decided to take this route was because it would prevent the end user from having to learn two separate navigation interfaces, instead using one universal navigation interface across the entire app. Another choice we made to provide the end user with ease of access to navigation assistance was to allow the user to select a class from the classes list within the app and have it immediately autofill all of the relevant location information to provide them with a route to their destination. By autofilling the class location for the user with one click of a button, we reduce the amount of time spent by the user searching for the correct building. Additionally, we prevent the user from accidentally navigating to the wrong place due to similar building names, flip-flopping the locations of two of their classes, etc.
Demonstration Video
Testing Protocol
Testing Protocol & Testing Procedure
Informed Consent Form
Final Summary Video
Milestone 4 Presentation