4. View UI UX
Figma Prototype, limited access: here
All vector images for icons and buttons are from the material 3 design kit This is except the Camera Icon which is from Flaticon's free UI Icons
The generic profile picture is from Figma's material 3 design kit
These resources were licensed under the Creative Commons Attribution 4.0 International License
The navigation bar displays a home icon which takes the user to the home page, a camera icon which takes the user to the camera screen, a magnifying glass icon which takes the user to the friends screen, and a person icon which takes the user to the profile screen. The icon corresponding to the selected screen is highlighted. During usability testing, all of the tested users used the navigation bar to get to and from different screens, there were no changes made.
We decided to rework the trip creation button to be included at top of trip list as a ghost button because 0% of test users were able to successfully create a trip. Each of the users trips are displayed below the create trip button so that users can easily see the trips that they have already created. Test users were able to use this page to find the trip they had created. Beneath the list of the users' trips the user can scroll down and see a list of their friend's trips and their own archived trips.
The create trip workflow starts with a form that allows users to input text. Their input is sent to the LLM which uses it to create an itinerary for them. Once the LLM responds, the user is presented with a list of trip options. After selecting a preferred trip, a confirmation popup appears, indicating that the trip has been successfully created. During our usability testing, 88% were confused about whether or not they had successfully created a trip, so we added a confirmation pop up that appears when the user successfully creates a trip. Furthermore, we changed the button text to read "create trip" for the same reason. Originally, we had a dropdown feature that allowed users to preview the stops for a given proposed trips. However this confused 48% of test users so we removed this feature and only included the description.
The screen above shows how when a user selects a specific trip, the top bar has a navigation, Edit, and chat button. Beneath this, there is a list of stops on the selected trip. There is an archive trip button at the bottom. We decided to rename this button to "archived trip" from "mark trip as completed" as it confused 25% users who thought it was a save button.
The screen above demonstrates what happens when the user hits the Edit button. When the Edit button is clicked, users can remove stops by clicking icon (indicated with minus enclosed in circle) reorder stops by dragging (indicated by symbol with two lines). The screen on the right demonstrates the edit screens with a stop deleted. This screen also has an Add Stop button and a Invites button, which will lead them to the appropriate screens. Once users are satisfied with the stops and friends on their trip, they can hit the Save button. We added microcopy bars to imply drag and drop functionality as only 62% of our test users were able to find it.
The screen is what the user sees when the Add Stop button is clicked. Users can input the name, latitude, and longitude of the desired stop and click the save changes button at the bottom of the screen to confirm changes.
This screen shows what the user sees after selecting Invites. The trip owner can add or remove participants from the trip. The top section displays users who are already part of the trip, and tapping the ‘X’ icon removes them. In the bottom section, the trip owner can search for additional users by username and add them to the trip by selecting the checkmark icon. Invites Screen
When a user selects a specific stop, they are taken to a screen that shows more information about that stop such as ratings, price range, hours, and address. There are two buttons: "See in Google Maps", which takes the user to the Google Maps entry for that stop and "Get Directions", which sends the user to the Google Maps direction page with the stop location preset. Many of our test users successfully found and understood the "Get Directions" button, so we did not make changes to it.
The edit trip screen shows a map with each of the stops for the given trip marked as waypoints on the amp. At the bottom of the screen are two buttons, one that shows the direct route and one that shows the driving route. 62% of users did not know they could click on the stops on the map so we added text to make it clearer. Secondly, 62% of test users also were unable to find the direct route between stops so we re-worded the button to say "Show Direct Route."
The chat feature allows users to learn more about their trip by chatting with an LLM. It features a back button on the top, a stream of messages in the middle of the screen, and a text box on the bottom. During usability testing, there were no issues with the chat workflow so no changes were made.
The header says "Camera" and has instructions to take a picture of a landmark to get more context on it. Below that is a preview of an image from the android camera. Beneath that is a custom capture button using an icon from Flaticon. When the user takes a picture, they are presented with a screen that shows the picture they just took and prompts them to either take a new picture (which takes them back to the original camera screen) or get context from the LLM. When the user gets context from the LLM it brings the user to another screen that has the "take new image" button at the top, displays the iamage they just took (but scaled down) and the text output from the LLM below it. There was an 100% success rate with the camera workflow so there were no changes made.
The friends screen shows a list of friends at the top of the screen and a list of invite requests below. At the top of the screen is a search friends button that allows users to search for new friends by name. All of the test users were able to find the friends screen and search for new friends with no issue, so we didn't make any changes.
At the top, there is a profile picture (generic, from the Figma material 3 design library) next to the logged in user's first name, last name, and username. Below this information is an edit profile button. Below the profile information, there is a list of the user's trips. During testing, every user was able to edit their profile and use the trip list to get to a specific list. Thus, we didn't make any changes.
The edit user profile page has text inputs for changing the first name, last name, username, likes and dislikes. If the user scrolls down and a save changes at the bottom. Our test users were able to find this page and change their information. However, we added the likes and dislikes section so that the user could specify their likes/dislikes themselves instead of the LLM inferring for them. From user feedback, in which most users indicated that they wanted the LLM to take their preferences into account, we decided to add text input so the users trust the LLM's suggestions.