UI/UX design aspects

1. Colour palette and its rationale

In the following image, you can see the color palette we intend to use for our application. We used coolors to generate us some ideas, keeping in mind we wanted at least something related to Uniandes.

Approved version by professor.

In particular, the colors we intend using are:

• A50104
• F0E2E7
• FFBA08
• 171A21
• 1D3557

Now, regarding why we chose these colors, they are intended to be used for:

Role	Hex	Token	Applied to
Base	171A21	--background	App canvas, bottom nav bar
Contrast	F0E2E7	--foreground	Primary text and icons
Accent 1 - brand	A50104	--primary	Active category chip, active nav state, destructive actions
Accent 2 - action	FFBA08	--accent	Primary CTAs ("New RSO"), "Official" badge, active filter pill
Accent 3 - surface	1D3557	--secondary	Inactive chips, input backgrounds

2. Fonts

We decided to use sans-serif fonts (as suggested in class by Prof. Camilo Escobar), since they work better on mobile screens being generally easier to read. Specifically we chose:

• Bricolage Grotesque (headings): its a variable width grotesque with an irregular optical rhythm. It has personality without being decorative, which matches SENECApp's bold mascot brand. Also, the wide optical range means it commands attention at display sizes without needing a decorative serif.

• Nunito (body/UI): its a rounded humanist sans. The rounded terminals echo the friendly, cartoonish quality of the goat mascot and stay crisp at 10–14px on a dark canvas (as the one from our palette), where serif hairlines would thin out and flicker.

3. Icons and images

For the logo of the application we had several ideas. Given that the name we decided for the app was SENECApp we thought that it would make sense to have the goat mascot of the university present in the logo. Then we discussed several ideas and decided that an attractive logo would have our mascot participating in potential groups of our application such as chess, ping pong, board games.
Here are some examples we made with the help of AI models.

SENECApp new logo

SENECApp 67 image

4. UI prototype

Here you can access our prototype made with Figma. It has our proposed color palette, fonts, and icons and images. Feel free to check it out!

https://www.figma.com/make/0HCz8qUyU71wrOXEXVdboM/Student-Organization-Discovery-App?t=k4QvsRTctXzGeN4E-20&fullscreen=1

5. Navigational patterns

SENECApp combines a flat top level with hierarchical navigation inside each section, the two iOS navigation types that fit a discovery app with a small number of equally important entry points.

Flat (top level). Four peer destinations in a bottom navigation bar: Discover, Events, My RSOs, Profile. A navigation drawer was rejected, drawers are appropriate for five or more top-level destinations, and hiding four behind a hamburger would bury Discover, which is part of the value proposition. Bottom nav keeps every destination one tap away and in thumb reach. The active item is marked by three redundant signals: color, a heavier icon stroke (2.5 vs 1.8), and a dot indicator.

Hierarchical (within a section). Discover -> organization detail -> related event. Depth is capped at two levels, so joining an organization is never more than three taps from launch.

Lateral. Filter chips, not tabs. Discover carries a horizontally scrolling chip row of nine categories; Events carries an All / Joined segmented filter. Tabs were rejected because nine destinations will not fit a fixed tab bar at 390px, and because these filter a single list rather than switching between peer screens, the Material distinction between filtering and lateral destination change.

Forward. Organization cards in the Discover list, a featured carousel at the top, the "New RSO" button advancing to the creation form, and in-app search filtering on both name and category.

Reverse. Upward navigation via a back arrow in the top bar of every child screen (detail and create). Back is contextual: the app records the originating tab, so opening an organization from Events returns to Events, not to Discover. Chronological reverse is delegated to the Android system back gesture, per platform guidance.

Contributors: Daniel Vergara, Camilo Castilla, Nicolas Salazar, Jose Manuel Fonseca, Daniel Vargas, Luciana Bacci.