Sprint 2 ‐ MS6 - GapFinder-Group21/GapFinderBackend GitHub Wiki
Solution Value Proposition
For college students who feel disconnected and waste their free hours on campus, our app is the most spontaneous way to connect and socialize in real time. Unlike manually coordinating by chaotic WhatsApp chats or sharing schedule captures, our app automatically synchronizes schedules and suggests micro-encounters in seconds based on mutual interests and location.
UI/UX Design System & Foundations
Gap Finder is used in short, interstitial moments: a student checks it between two classes, often walking, often with less than a minute of attention to spare. Every visual decision below is made under that constraint, and under one governing rule:
In Gap Finder, no colour is decorative. Every colour carries exactly one meaning, and that meaning never changes across screens.
This rule is what allows a user to interpret a screen before reading it.
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 |
Accent 1 (#FF3366): the only urgent colour in the app
Red is the highest-salience colour in the human visual field: it is detected faster than any other hue, it raises physiological arousal, and every interface convention already reserves it for "act now". Gap Finder exists because free time between classes is perishable. A 90-minute gap is only valuable while it lasts. Red is therefore assigned to exactly one idea expressed in two forms: the gap itself (the GAP blocks in Schedule) and the action that spends it (Match, and the primary button on every screen). Because red appears nowhere else, a user scrolling their day sees only the openings, not the schedule.
Two deliberate qualifications:
- We use a desaturated coral-red, not a pure red. Pure red (
#FF0000) is read as error or danger; the softer coral keeps the urgency while removing the alarm, so an empty gap reads as an invitation rather than a warning. - We deliberately did not pair red with a heart icon (see the Icons section). Red plus a heart reads as a dating app; red plus a reciprocity loop reads as "connect now". The colour supplies the urgency, the icon supplies the disambiguation.
Accent 2 (#2EC4B6): lowering the social barrier
Our research identified that the barrier to meeting someone during a gap is not a lack of opportunity but a self-evaluative one: "would they even want to talk to me?". The colour that carries people therefore has to do the opposite work to red. This aquamarine sits between blue and green: it inherits trust and calm from blue and safety and approachability from green, and it is one of the lowest-arousal hues available at a usable contrast level. It is also the least gendered and least socially loaded accent in the palette, which matters for an app whose whole purpose is approaching strangers. On Campus Map this is why buildings with people in them are Accent 2 while empty buildings stay neutral: the map is telling the user where the low-stakes social opportunities are before they read a single label.
Accent 3 (#20A4F3): borrowing an existing mental model
Open Tables is a quantitative, informational layer: which building, how many tables, how long they last. Blue is the de facto convention for location and wayfinding across every mapping product our users already use daily, so assigning blue to the Open Tables layer means we are not teaching a new mapping language; we are reusing one the user already has. Blue is also emotionally quiet: it communicates reliability without competing for attention, which is correct for a layer that is information, not action. This gives a clean three-way emotional split: Accent 1 means do something now, Accent 2 means someone is here, and Accent 3 means how many and where.
Contrast (#011627): frame and fixed commitments
The app bar and bottom navigation use the contrast colour rather than white so the chrome visually recedes and the content plane floats above it. We chose a near-black with a strong blue cast instead of pure black for two reasons: pure black against an off-white background produces harsh edge contrast that is fatiguing outdoors in daylight, and a blue-shifted dark makes the three accent colours read as brighter by simultaneous contrast. The contrast colour also marks classes in the Schedule, which is time that is already committed and therefore not actionable. This pairing is the core of the Schedule screen: the contrast colour is what you cannot change, Accent 1 is what you can.
Base and neutrals: the meaningful absence of colour
The base #F6F7F8, together with pure white and pure black, is intentionally neutral; its job is to be ignorable. White and black are kept in the system precisely because they carry no meaning, which makes them safe for card surfaces and for reversed text on top of a dark or accent fill. Classes are rendered in the contrast colour on white with a thin contrast-colour rule so that the coloured GAP blocks are the only thing the eye lands on. This is the mechanism that makes the whole palette work: colour is scarce, so colour is information.
Accessibility
We measured every text pairing in the palette against the WCAG 2.1 contrast formula. The results below determine how each colour may be used, not the other way round.
| Pairing | Ratio | Verdict |
|---|---|---|
Contrast #011627 on base #F6F7F8 |
17.09:1 | Passes AAA. This is the default pairing for all body text. |
White on contrast #011627 |
18.33:1 | Passes AAA. Used for the app bar and bottom navigation. |
Accent 1 #FF3366 on base |
3.31:1 | Large text only. Safe for the GAP label, not for the small time beneath it. |
White on Accent 1 #FF3366 |
3.55:1 | Large text only. Primary button labels must stay at 18pt, or 14pt bold, or larger. |
Accent 2 #2EC4B6 on base |
2.02:1 | Fails. Must not be used for text on a light surface. |
Accent 3 #20A4F3 on base |
2.55:1 | Fails. Must not be used for text on a light surface. |
White on Accent 3 #20A4F3 |
2.74:1 | Fails. Numeric badges need the contrast colour instead of white. |
Accent 1, 2 and 3 on contrast #011627 |
5.17:1, 8.46:1, 6.69:1 | All pass AA. The accents are safe on the dark chrome. |
Three conclusions follow from these numbers, and they are binding on the implementation:
- The accents are fill colours and large-display colours, not text colours. On a light surface they may be used for shapes, icons, borders, badges and headline-sized labels, but never for body-sized text.
- Where a small coloured label is genuinely needed on a light surface, the implementation uses a darkened text variant of the same hue:
#E30039for Accent 1,#1E7F75for Accent 2 and#0A77B8for Accent 3. Each of these reaches at least 4.5:1 against the base while remaining recognisably the same colour, so the semantic mapping is preserved. - Colour is never the sole carrier of meaning. Every coloured element is redundantly encoded: GAP blocks carry the literal word GAP plus a dashed border, Open Tables markers carry a numeric count, and every bottom-navigation icon carries a text label. A user with deuteranopia or protanopia loses the Accent 1 and Accent 2 distinction but loses no information.
- Accent 1 and Accent 2 are separated in lightness as well as hue, so they remain distinguishable in greyscale and for users with reduced colour discrimination.
Fonts
We use a three-tier type system, where each tier has a distinct voice and a distinct job.
| 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 |
Why three and not one
A single font at different weights produces a flat hierarchy: everything looks like the same voice speaking at different volumes. Gap Finder mixes three kinds of content that must never be confused: brand and state (GAP, MATCH), structure (what section am I in, what can I tap), and data (9:30 - 11:00, 3 Open Tables active now). Separating these by typeface rather than by weight alone means the user can tell them apart peripherally, without focusing.
The three faces were chosen so that their strongest difference is width rather than weight: Montserrat is wide, Magra is condensed and Cambay is normally proportioned. Width is the typographic axis the eye resolves fastest at a glance, which is the only kind of reading Gap Finder gets.
Montserrat for the display tier
Montserrat was drawn by Julieta Ulanovsky from the painted signage and shopfront lettering of the Montserrat neighbourhood in Buenos Aires. Its origin is public wayfinding: letterforms made to be read from a distance, outdoors, by someone walking past. That is exactly the reading condition of a student crossing campus between classes, which makes it the right face for the two words the product is about, GAP and MATCH.
Technically it gives us what a display tier needs: a very large x-height, wide apertures, and a geometric skeleton that stays stable when set in uppercase with wide letter-spacing. It also ships nine weights, so the wordmark can be set considerably heavier than any other text in the app without introducing a fourth typeface.
Magra for the label tier
Magra is a condensed humanist sans by Eduardo Tunni, and it was chosen for a concrete layout constraint rather than for style. Gap Finder has a five-item bottom navigation bar, and one of those labels is Open Tables. At the widths Montserrat produces, a five-item bar with a two-word label either truncates or drops to an unreadable size on a narrow handset. Magra solves this by being narrow by construction, so every label fits at full size on every screen width we target.
The same property serves the rest of the label tier. Tabs, section headers and button labels are short strings that must sit inside fixed containers, and a condensed face gives the layout room to breathe. Because Magra is visibly narrower than both other faces, the label tier also reads as a distinct texture: the user can tell interface from content without reading either.
Cambay for the body tier
The body tier carries the highest-frequency content in the app: times and durations, read glancingly and often in motion. Cambay, by Pooja Saxena for Ek Type, was designed as a multi-script family covering Devanagari alongside Latin, and a Latin drawn to sit beside another writing system has to be built on neutrality and open counters rather than on personality. That is precisely what a body face for numeric data needs.
Its numerals are unambiguous at small sizes, which matters because the app is dense with figures and a misread digit is a missed gap. Cambay also provides a true italic, which Magra does not, so any emphasis inside running text stays within the body tier instead of borrowing a face from another level.
Why the combination works
All three are sans-serif, so they share a common skeleton and do not clash, but each belongs to a different sub-classification: Montserrat is geometric, Magra is condensed humanist and Cambay is humanist text. This follows the standard pairing principle of contrast in width and weight with consistency in classification. The tiers are also separated on a second axis, since Montserrat is used almost entirely in uppercase and the other two in sentence case.
All three are published on Google Fonts under the SIL Open Font License, which means they can be bundled in the APK or pulled through the Downloadable Fonts provider without any licensing cost, and they render offline. That matters because Gap Finder has to work inside classroom buildings with weak connectivity.
Implementation constraint
Montserrat ships nine weights, Cambay ships four, and Magra ships only Regular and Bold. The design must therefore not depend on a medium or semibold weight in the label tier, because Android will synthesise it and the result is visibly distorted. Where the label tier needs an intermediate step in emphasis, the implementation changes size or colour instead of weight.
Icons, Imagery & Visual Assets
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.
UI Prototype
link: https://story-sync-90878899.figma.site/
Navigational Patterns
Gap Finder combines Flat Navigation and Hierarchical Navigation as its main navigation types. Within these structures, the user moves through the app using Lateral, Forward and Reverse navigational directions, depending on the task they are performing.
Navigation Types
Flat Navigation
Gap Finder uses Flat Navigation for its five top-level destinations: Schedule, Friends, Match, Open Tables and Profile. All five are permanently available through the bottom navigation bar, so the user can move directly between any two of them without passing through an intermediate screen. We chose this structure because the five sections sit at the same conceptual level, since none is a sub-part of another, and because the user's goal changes minute to minute: the same free gap may lead to checking a schedule, finding a friend or looking for an open table.
Match is given a raised, colour-filled position at the centre of the bar. It remains a flat destination, but its elevation marks it as the app's single primary action, so the bar communicates both where you can go and what the app is for.
Figure 2. Flat navigation between the top-level sections of Gap Finder.
Hierarchical Navigation
Gap Finder uses Hierarchical Navigation whenever the user moves from a general overview to a more specific screen. Selecting a free gap in Schedule opens Gap Detail, where the user sees the duration of the gap and the actions available for it. The same structure is used from Campus Map to Open Tables, where the user first sees an overview of the campus and then drills into a specific building. In both cases the parent screen answers what is available and the child screen answers what can be done about it.
Figure 3. Hierarchical navigation from a general view to more specific information.
Navigational Directions
Lateral Navigation
Lateral Navigation is used in Schedule through the Today and Week tabs. Both views sit at the same level and present the same underlying data over different time ranges, which lets the user switch between related information without leaving the Schedule section or losing their place in the hierarchy.
Figure 4. Lateral navigation between the Today and Week views.
Forward Navigation
Forward Navigation occurs when the user selects an element or action that takes them deeper into a flow. In Gap Finder it is implemented through cards and buttons: tapping a gap card in Schedule opens Gap Detail, and selecting Match continues into the matching process.
Onboarding is the app's other forward flow, and it is deliberately linear rather than flat: the user moves from the launch screen to Create Account and then to Set up your schedule, with no bottom navigation bar present. The bar only appears once the user has a schedule, because until then none of the five sections has anything to show.
Figure 5. Linear forward navigation through the onboarding flow.
Figure 6. Forward navigation through the gap matching flow.
Reverse Navigation: Upward Navigation
For Reverse Navigation, Gap Finder uses Upward Navigation on child screens. A back chevron in the header returns the user one level in the application's hierarchy, for example from Gap Detail back to Schedule, or from Open Tables back to Campus Map, so the user returns to their previous context without restarting the flow. The chevron appears only on hierarchical child screens and never on the five top-level sections, so its presence alone tells the user where they are in the hierarchy.
![Upward navigation]
Figure 7. Upward navigation from a child screen to the previous level.