UI/UX Flow Map

Figma prototype: here

UI/UX Design:

Log-in Screen + Room Selection

Github links: (Sign-in Screen) (Room Home Screen) (Join Room Screen)

Log-in Screen

• App name: RoomieMatter
• App Name clearly Visible
• User can sign-in through Google account
• User has option to press "Try demo" and have mock usability of the application

Room Selection

• Create a new room
• Join a room that has already been created using a join key

The RoomieMatter app’s login screen is designed for ease and flexibility. Users can quickly sign in using their Google account for convenience, or explore the app’s features by selecting “Try demo” for a simulated experience. This setup allows users to seamlessly join or create new rooms, ensuring a user-friendly introduction to the app’s collaborative environment.

Home View

Github links: (Home Screen)

• Includes navigation to chat
• Copy room information to clipboard for sharing
• Includes roommates and their current status’
• Select active chores displayed for the entire room
• Select active chores displayed the user
• Add chores for user and room
• Select upcoming events displayed for entire "room"
• Select upcoming events displayed for the user
• Add events for user and room
• Navigation to calendar and account

We’ve revamped the home screen of our application to make chore and event management more accessible and user-friendly. Our decision to simplify the “View All” and “View Mine” views was driven by user feedback. In our recent usability testing, we found that 57% of interviewees struggled to navigate to the chore management page within two clicks. Many expressed a desire to view all chores and their personal chores directly from the home page. In response to this, we’ve redesigned the home screen to include separate listings for the entire room’s chores and events, as well as individual-specific chores and events. This means users can now view all chores and their personal chores without leaving the home page. Additionally, we've added a feature to copy the room ID to the clipboard so members can easily share their room information with their roommates who want to join.

Chores Views

Github links: (My Chores Screen) (All Chores Screen)

• Ability to view all chores assigned within the room
• Unique view for user to view their assigned chores
• Access to adding new chores
• Ability to update chore name, date, and assignees

We’ve made the process of adding assignees to chores more intuitive in our application. We found that 57% of interviewees during out usability testing were unable to add an assignee to the chore they just created within five clicks. To address this, we’ve made the process of editing a chore easier. Users can now add assignees more conveniently by accessing the chore in the "View all" or "View mine" list views themselves. Additionally, this feature can also be accessed within the specific chore view by adding assignees and selecting the roommate they would like to assign it to.

Events Views

Github links: (Events View) (All Events Screen)

• Ability to view all events assigned within the room
• Unique view for user to view their personal events
• Access to adding new events
• Ability to update event name, date, and guests

Similarly, we’ve made the process of adding assignees to events more intuitive in our application. Users can now add assignees, date their events, and manage their calendars in one central location. This component will allow users to better manage their individual calendars as well as group events with their roommates. Integration with Google Calendar makes this feature convenient and accessible. Additionally, having the ChatGPT AI butler integrated with these events makes it easy to add, edit, delete, and complete events through natural language processing.

Chat Screen

Github links: (Chat Screen)

• Can chat with @housekeeper, a ChatGPT AI butler
• Can view and change your status and view roommates’ status’ from messaging
• Can view, edit, assign, and complete chores from messaging
• Can view, edit, invite to, and complete events from messaging
• Can interact with @housekeeper as you would with ChatGPT
• Can sync events and chores with Google Calendar
• Can chat with roommates

In our continuous effort to enhance user experience, we've introduced a feature in our application that allows users to view the status of their peers directly from the chat view. This update was driven by valuable feedback from our users. In our usability testing, we found that 42% of interviewees were unable to locate their roommates' status within five clicks. Furthermore, almost all interviewees assumed that clicking on a message would reveal the status. Recognizing this, we've streamlined the process. Now, users can easily access the status information they need without having to navigate away from their chat. This update not only simplifies the user interface but also aligns with our users' expectations, making the overall experience more intuitive and efficient. Additionally, users can see, edit, assign, and mark as completed, chores directly from the AI butler, simply by texting @housekeeper. This feature extends not only to chores, but also events, that can be synced to a users google calendar account, which was specified at login. These abstract the app's features to simple natural language processed requests that are easy for a user to understand if they do not wish to use the physical components.

Calendar Views

Github links: (Calendar Screen)

• Sync chores and events with user’s google calendar
• Display a condensed calendar with RoomieMatter events and chores
• View events and chores for any desired date

We’ve made syncing to Google Calendar more intuitive in our application. In a recent test, we found that 20% of users had difficulty finding the “Sync to Google Calendar” button within 10 clicks. To address this, we’ve automated the syncing of chores & calendars events with the signed in user's calendar. This change makes the feature more accessible and aligns with user expectations, providing a more seamless and intuitive experience.

Account Management Screen

Github links: (Account Management Screen)

• Ability to view and set user’s status from a dropdown selection
• Can leave current room
• Can signout of Google account session

This page encompasses all of the user's profile features, where they can change their status, leave their room, and log out of their account, in addition to all the other navigation features. The “Change Status” feature is located in the Account Management page to centralize personal settings, making it intuitive for users to manage their profiles. This placement ensures that all account-related options are grouped together, providing a streamlined and efficient way to update one’s status along with other personal details.