MS7

1. Value Proposition

1.1 Value Proposition Statement

Gap Finder helps university students make better use of the free time they have between classes by making it easier to find people, activities, and plans that actually fit their current gap. Instead of having to compare schedules, message different people, or spend too much time deciding what to do, the app uses information such as the student’s schedule, current availability, location, and the availability of other users to make the process faster and more spontaneous. The main value of Gap Finder is reducing the effort needed to turn an empty gap into something useful or social while still considering that students have limited time before their next class and are constantly moving around campus.

1.2 How Smart Features Generate Value

One of the main smart features we want to implement is a personalized recommendation system based on the location information that Gap Finder collects while the user is in a gap. When the app receives the user’s location, it identifies the campus building where the student is currently spending their gap and stores this information. As the user continues using the app, Gap Finder can analyze the buildings registered across previous gaps and calculate which building the student usually spends most of their free time in. Based on this pattern, the app can recommend activities or opportunities available in or near that building. For example, if Gap Finder detects that a student usually spends their gaps in ML, it can prioritize activities happening in ML when that user enters a new gap. This generates value because the recommendation is not based only on information that the user manually provides when creating their account. Instead, the app uses information generated from the student’s actual behavior and calculates patterns from previous gaps to make future recommendations more relevant and convenient. In this way, Gap Finder becomes more useful over time because the recommendations adapt to how the student actually uses their free time on campus.

1.3 How CAS Features Generate Value

The context aware features in Gap Finder are focused on detecting changes in the user’s current environment and adapting the app based on what is happening at that moment. One of the main features uses the user’s current location to detect when they enter a campus building. When Gap Finder identifies that the user has entered a new building, it can check whether any of their friends are currently in the same place and are also available during a gap. If there is a friend nearby who is free, the app can automatically notify the user and suggest meeting them. For example, if the user enters ML and one of their friends is also there with an active gap, Gap Finder could let them know that their friend is nearby and available. This generates value because the user does not need to constantly open the app or manually check who is free. The application reacts to a real change in the user’s context and uses that information to create a social opportunity at the moment when it is actually possible.

Another context aware feature adapts notifications according to the environment around the user. The phone can estimate the ambient sound level and, if it detects that the user is in a quiet environment, Gap Finder can avoid sending an audible notification and instead use a silent or vibration alert. This makes the app less disruptive and allows it to adapt the way it communicates depending on what is happening around the student. Together, these context aware features create value because Gap Finder does not always behave in the same way. It responds to changes in the user’s location and surroundings and provides information when it becomes relevant, making the experience more natural and useful during everyday life on campus.

2. UI/UX Design - Information from MS6

2.1 Color Palette & Rationale

Proposed palette

Figure 1. Gap Finder colour palette and assigned roles.

Role	Hex	Assigned meaning	Where it appears
Base / background	#F6F7F8	Canvas, deliberately meaningless	Screen background behind all content
Contrast	#011627	Structure, and committed time	Top app bar, bottom navigation, screen headings, body text, class markers
Accent 1	#FF3366	Opportunity that expires: free time and the act of matching	GAP blocks, Match FAB, primary buttons (Get Started, Create Account), active tab indicator, You are here
Accent 2	#2EC4B6	People: profile, friends, and buildings where people are	Profile and Friends surfaces, user status, buildings with active Open Tables
Accent 3	#20A4F3	Availability: the Open Tables layer	Open Tables pins, counters and badges, Create button
Neutrals	#FFFFFF / #000000	No meaning by design	Card surfaces, reversed text on dark or accent fills

2.2 Typography

Tier	Font	Used for
Display and titles	Montserrat	GAP FINDER wordmark, GAP, MATCH, screen headings such as Create Account and Campus Map
Subtitles and labels	Magra	Section headers such as Open Tables nearby, the Today and Week tabs, card titles, button labels, bottom-navigation labels
Body	Cambay	Times and durations, descriptions, status text, form fields, secondary information

2.3 Iconography

Icons in Gap Finder do the same job as colour: they let the user identify a screen or an action before reading it. We use outlined icons for passive or inactive elements and filled icons for active or committed states, which gives the navigation bar a state affordance independent of colour.

Icon	Name	Where it appears	Why this icon
	Calendar (outlined)	Schedule tab; schedule-source tiles in onboarding	The most conventional glyph for "my time". It requires no learning, and it correctly signals that this section is a view of the day, not an action.
	People pair (outlined)	Friends tab	Two overlapping figures read as an existing group, meaning people you already know. This is deliberately distinct from the single figure used for Profile and from the loop used for Match, giving the app a three-way social vocabulary: one figure is you, two figures are people you know, and the loop is someone new.
	Match Icon	Match FAB and the Match screen	A circular logo with a dark navy background and a multicolored outer ring in blue, pink, and turquoise. At the center, three stylized people form a circular connection around a clock, representing coordination, shared availability, and group matching. The word “MATCH” appears in bold white letters at the bottom.
	Map pin (outlined)	Open Tables tab, Campus Map markers, Open Tables list rows	The single most universally understood icon in mobile interfaces. Used consistently at three scales (tab, map marker and list row), so the user learns that a pin is a physical place on campus once and reuses it everywhere.
	Person silhouette (outlined)	Profile tab	The standard identity glyph. Kept abstract and outlined so it reads as your account, distinct from the photographic avatars used for other people.
	Plus	Create button on Campus Map	Marks the one place where the user contributes to the Open Tables layer rather than consuming it. Set in Accent 3 because what is being created is an Open Table.
	Circular photo avatars	Open Tables cards	The most important image decision in the app. Because the barrier to joining someone is self-evaluative, we show real faces rather than generic placeholders: seeing a specific person makes joining a concrete, low-ambiguity decision instead of an abstract social risk. Circular framing is deliberate: circles read as friendly and informal, whereas square avatars read as directory or ID-card entries.
	Clock (outlined)	1h 30m free, 42 min remaining	Reinforces the app's central concept: everything here is time-bounded. Pairing it with Accent 1 or Accent 2 text lets duration be read as a quantity and as an urgency level at once.
	Star (outlined)	Things to Do	Signals suggestion, not obligation. Deliberately the lowest-commitment icon in Gap Detail, placed below Match and Open Tables so the visual hierarchy matches the intent hierarchy: connect first, browse places second, solo ideas third.
	Chevron left	Header of every child screen	Supports the Upward Navigation pattern described in the Navigational Patterns section. It appears only on hierarchical child screens and never on the flat top-level sections, so its presence itself tells the user where they are in the hierarchy.
	Numeric badges	Building markers and list rows on Campus Map	Convert the map from a locator into a decision tool: the user compares availability across buildings without tapping into any of them. Redundantly labelled with a number rather than encoded by colour alone.
	Compass rose	Campus Map, bottom-right	Orientation aid for a map that is not north-locked, needed because users read this map while physically walking.
	App launcher icon	Home screen	A simplified version of the main visual concept. Three colorful human figures, pink, blue, and turquoise, are arranged in a circle around a clock. The circular arrows convey collaboration and synchronization, while the clock represents finding a suitable time for everyone.

Rationale

• Cognitive load. Gap Finder is consulted in the seconds between leaving one classroom and deciding where to go. Icons let the top-level sections be identified pre-attentively, which is what makes the flat bottom navigation described in the Navigational Patterns section usable at a glance.
• Learnability through consistency. Each icon means one thing app-wide, mirroring the colour rule. The pin means place in the tab bar, on the map and inside a list row; the clock means this expires everywhere it appears. One mental model, reused.
• Redundant labelling. Every bottom-navigation icon is paired with a text label, and every icon-bearing row has a title. Icons accelerate recognition for returning users but are never the only channel for a first-time user.
• Source and implementation. Icons are drawn from the Google Material Symbols set, available through Google Fonts, which guarantees a single optical grid, consistent stroke weight and direct import into Android Studio as vector drawables, so the set stays crisp at every density and is trivially recolourable to the palette roles.

2.4 Images & Illustrations

Images and illustrations in Gap Finder are purposeful UI elements, not decoration. They reduce the social uncertainty of joining an activity, make the matching process easier to understand, and preserve a friendly and consistent visual identity throughout the app.

Visual resource	Where it appears	Purpose and rationale
Circular profile avatars	Profile, Friends, Match results, Open Tables cards, and Open Table detail	Avatars make interactions feel personal and allow students to quickly identify the host and participants of an activity. Circular cropping reinforces an informal, approachable social environment and visually differentiates people from informational cards.
Match illustration / Match icon	Central Match button, Match screen, and onboarding or empty states related to matching	The illustration combines people, circular connection, and a clock to communicate the main value of Gap Finder: connecting students with compatible free time. Its blue, pink, and turquoise colours directly reflect the application palette.
App launcher icon	Device home screen and application identity	A simplified version of the Match visual concept, using three human figures around a clock. It preserves recognition at small sizes while representing synchronization, collaboration, and available time.
Campus map markers	Campus Map and Open Tables locations	Pin markers represent physical meeting places. Numeric badges indicate how many Open Tables are available in a building, helping users compare options before opening a location.
Activity icons	Open Tables cards and details, activity preferences, and recommendations	Small recognizable icons help users identify an activity category quickly, such as gaming, studying, food, sports, or conversation. They support scanning without replacing the written activity name.
Empty-state illustrations	Screens with no schedule, no friends, no matches, or no Open Tables	Simple illustrations guide first-time users and clarify the next action, for example adding a schedule, updating interests, creating an Open Table, or inviting friends. They use the palette accents sparingly to avoid visual overload.

Visual style guidelines

• Human-centered imagery: Profile photos are the main photographic resource because Gap Finder is built around meeting real people. Images should be friendly, clear, and displayed in circular frames.
• Consistent illustration style: Custom illustrations use simple geometric forms, rounded shapes, minimal detail, and the core palette: navy (#011627), pink (#FF3366), turquoise (#2EC4B6), and blue (#20A4F3).
• Functional over decorative: Every image must clarify identity, location, activity, status, or a recommended action. Decorative images that do not support a user task are avoided.
• Privacy by design: Users control their profile image and may use a default avatar instead of a personal photo. Profile images are shown only in the social contexts needed to identify a user, such as Friends, Match, and Open Tables.
• Accessibility: Images and icons never communicate essential information by themselves. Each meaningful visual element is accompanied by text, labels, or numeric information; image descriptions (contentDescription) will be included in the native Android implementation for screen-reader support.
• Performance: Images will be compressed and loaded at an appropriate size for mobile devices. Vector drawables will be preferred for icons and simple illustrations to maintain clarity across different screen densities.

2.5 UI Prototype — Mockups

---

Miguel — [screen/flow] (2 views)

This is the mobile app screen titled "Match" its used to show the user's current gap status and let them set matching priorities before searching for a match.

Key Elements:

Header: "MATCH" title, no back arrow (top-level tab). Status card: "You have no active GAP right now" message with a last-checked timestamp. Match button: circular icon with a tri-color ring, greyed out center to indicate it's currently inactive. Prioritize by: three selectable chips — Same Program, Same Semester (selected), Same Effort. Bottom navigation bar: Schedule, Friends, Match (active), Open Tables, Profile.

This is the screen called "My Open Tables" in thr mobile app used to let the user view and manage the Open Tables they've created.

Key Elements:

Header: "My Open Tables" title with a back arrow. Section label: "Created by me". Table card (active): owner avatar, "You (Owner)" label, "ACTIVE" badge, description field, "View" button. Table card (ended): owner avatar, "You (Owner)" label, "ENDED" badge, description field, no action button.

---

Joel — [screen/flow] (2 views)

This screen is the main Open Table feed, allowing users to discover and join nearby activities.

Key Elements:

Header: "Open Table" title with subtitle "Discovering tables near you," alongside "Mine" and "+ New" buttons.

Map: "Campus Map Placeholder" area with a key for "You are here" and "Open Tables."

Activity Card: Displays a "User" profile, "Unknown location," time remaining ("29m left"), description ("nueva"), and a "Join" button.

Bottom Navigation: Tab bar with Schedule, Friends, Match, Open Tables, and Profile options.

It is a mobile app form titled Create Open Table used to create and publish a community event or activity.

Key Elements:

Header: "Create Open Table" title with a back arrow.

Activity: Dropdown set to "Recipe Exchange" (30 min).

What do you propose?: Text input box with a 160-character limit.

Location: Dropdown menu set to "Select a building".

Action Button: Blue "Publish Open Table" button at the bottom.

---

Sofía Morato

Description:
This is the first screen users see when they open Gap Finder. Its purpose is to introduce the app and give users a simple way to either start creating an account or log in if they already have one. The screen keeps the focus on the main actions and also reinforces the visual identity of Gap Finder through the logo, the dark navy background, and the pink primary button.

Key elements:

• Gap Finder logo: Represents the main idea of the app by combining people and time.
• App name: "GAP FINDER" is shown prominently as the main title.
• Tagline: "Make your gaps count." briefly communicates the purpose of the app.
• Get Started button: Main action for new users who want to begin the registration process.
• Log In option: Secondary action for users who already have an account.
• Color hierarchy: Uses the dark navy background and pink accent color to keep the main action easy to identify.

Description:
This screen allows users who already have an account to access Gap Finder. The layout is simple so users can log in quickly without going through unnecessary steps and continue directly to the main features of the app.

Key elements:

• Header: Includes a back arrow, the Gap Finder name, and the "Log In" section label.
• Welcome message: "Welcome back" makes it clear that this screen is for returning users.
• Email field: Allows the user to enter the email linked to their account.
• Password field: Allows the user to enter their password securely.
• Log In button: Main action used to access the application.
• Register option: Gives users without an account a direct way to continue to the registration flow.
• Visual consistency: Uses the same navy, pink, white, and light background colors defined in the Gap Finder design system.

---

Sofía Arias — [screen/flow] (2 views)

Description: The profile view summarizes the user's indentity within Gap and serves as the hub for account settings. It shows how the users appears to others(name, program, semester, and interests) and gives access to the settings that power matching, such as interests, activity preferences, and location permissions, it also provides the logout option. Key elements:

•	Profile card: Avatar, username, academic program, semester, and interest tags (e.g., Gaming), highlighted with the profile accent color (#2EC4B6).
•	Account → Edit Interests: Lets users update the interests used to match them with other students.
•	Preferences → Activity Preferences: Lets users set the kinds of activities they want to be suggested.
•	Setup → Location Permissions: Manages location access, needed to find nearby students and Open Tables.
•	Log out button: Destructive action styled in a soft red.
•	Bottom navigation bar: Access to Schedule, Friends, Match (central button), Open Tables, and Profile (active tab).

---

Description:This view shows the full details of an Open Table, an activity that another student has posted and that anyone nearby can join during their free time. It gives users everything they need to decide whether to join: who created the table, what the activity is, where it happens, how much time is left, and who is already participating. The goal is to lower the barrier to approaching others by making the invitation explicit and public before the user commits.

•	Creator card: Avatar and username of the student who opened the table, so users know who is hosting.
•	Activity info: Activity name, icon, expected duration, and effort level (e.g., Recipe Exchange · 30 min · normal effort).
•	Logistics: Two side-by-side cards showing the location (campus building) and a countdown of how long the table stays open.
•	Proposal: Free-text description written by the creator explaining what the activity is about.
•	Participants list: Number and list of students who have already joined.
•	Join Table button: Primary call to action in the Open Tables accent color (#20A4F3), fixed at the bottom of the screen.
•	Back navigation: Header with a back arrow to return to the Open Tables list.

---

Nicolás — Create Account / Profile Setup

Create account

Description: This view provide the users upload their information to create their account to access the app

Key elements:

• Blank space for name, email, semester password
• Selector to academic program and preference
• Create account button

Profile setup

Description: Screen after de account creation to adapt preferences to the user

Key elements: Multiple selectors that allow find the preferences of interest for the user

Daniela Martinez - Schedule View/ Schedule Setup

Schedule view

Description: This view displays the user's daily academic schedule and visually highlights the available free time periods, or "gaps," between their classes[cite: 1].

Key elements:

• Cards displaying scheduled classes with their respective titles and time slots[cite: 1].
• A prominently highlighted "GAP" block indicating free time, featuring a "Tap" button for interaction[cite: 1].
• A bottom navigation bar with menu options for Schedule, Friends, Match (central button), Open Tables, and Profile[cite: 1].

Schedule setup

Description: This screen allows users to choose their preferred method for inputting their classes to build their schedule within the application[cite: 2].

Key elements:

• A top header with a back navigation arrow and the app name "GAP FINDER"[cite: 2].
• A "Connect Google Calendar" button to automatically import classes from a personal calendar[cite: 2].
• An "Add Schedule Manually" button allowing users to enter their classes one by one[cite: 2].

2.6 Navigational Patterns

Gap Finder combines flat and hierarchical navigation so students can act quickly during short breaks between classes.

The persistent bottom navigation bar provides direct access to the five main sections: Schedule, Friends, Match, Open Tables, and Profile. Match is highlighted in the centre because it represents the core purpose of the application: connecting students with compatible free time.

Hierarchical navigation is used when users need more detail. For example, selecting a GAP opens its detail view, selecting an Open Table opens its invitation details, and profile options open their respective configuration screens. Child screens use a back chevron to return to the previous view while preserving context.

Within Schedule, the Today and Week tabs provide lateral navigation between daily and weekly availability. Cards and primary buttons support forward navigation, such as starting a Match, joining an Open Table, or creating a new activity.

This structure keeps key functions one tap away while allowing users to explore information and complete actions without overcrowding the main screens.