MS6 - Moviles-GN44/ISIS3510-GN44-wiki GitHub Wiki

MS6 – UI/UX Design

1. Value Proposition

1.1 Problem Context

During the previous micro-sprints, the team identified that university students have difficulty quickly identifying which food option best fits their available time, budget, location, dietary preferences and current needs because the relevant information is fragmented or difficult to access.

Research from previous sprints also showed that students often rely on familiar places, recommendations from friends and social media, and may avoid exploring other options because of distance, price uncertainty, waiting times or lack of information.

1.2 Selected Solution

The selected solution is a mobile application focused on food options available on and around the university campus.

The application centralizes these alternatives in an interactive map and allows students to explore them using information such as:

Price
Location
Distance
Dietary preferences
Availability
Waiting time
Reviews and ratings

Students can also interact with restaurants through QR codes located at the establishments in order to access the review functionality.

1.3 Value Proposition

Uniandes Food is a context-aware campus dining platform designed for university students with limited break times and tight budgets.

Unlike generic maps and delivery services, our application provides a centralized, student-verified food directory that organizes dining options by walking time from specific campus buildings, real dish prices, verified student ratings, and dietary restrictions.

By eliminating distance uncertainty, price opacity, and fear of unsafe routes, Uniandes Food empowers students to make fast, reliable, and healthy food decisions within their daily academic schedule, while democratizing digital visibility for local campus food businesses without charging predatory commissions.

1.4 Differentiation from Existing Solutions

Dimension	Google Maps / Apple Maps	Delivery Apps (Rappi, Didi Food)	Social Media / Word-of-Mouth (Instagram, WhatsApp)	Uniandes Food (Our Solution)
Campus-Specific Context	Generic city-wide search; does not understand university building boundaries.	Focuses on city delivery; not designed for quick walking breaks between classes.	Highly fragmented across individual accounts and group chats.	Tailored specifically to the campus perimeter and reference buildings (e.g., RGD, ML, Mario Laserna).
Pricing & Menu Transparency	Menus are often outdated, crowd-sourced from years ago, or completely missing.	Inflated dish prices with high delivery fees and service charges.	Photos often lack explicit price tags and portion sizes.	Real-time, student-reported menus and verified dish pricing with no added fees.
Time & Proximity Optimization	Calculates driving/walking to street addresses, not indoor class transitions.	Takes 35–60 minutes for delivery; impossible for 15-minute class breaks.	Requires manual chatting and waiting for friends to reply.	Filters options by walking duration (<5 min, <10 min) and estimated queue waiting times.
Social Validation & Safety	Generic global reviews; vulnerable to fake reviews.	Reviews focused strictly on delivery speed, not student dining experience.	High trust, but very slow and limited to close friends.	Verified student peer reviews unlocked via physical in-store QR scans and route safety ratings.
Dietary & Allergen Filtering	Very limited dietary filters; no cross-contamination or ingredient warnings.	Focuses on commercial combos rather than specific student allergen safety.	Relies on asking restaurant staff directly upon arrival.	Granular filters for vegetarian, vegan, lactose-free, and specific allergen warnings.

2. UI/UX Design

2.1 Colour Palette

Our colour system was designed using a high-contrast, accessible palette (WCAG AA/AAA compliant) tailored for outdoor mobile visibility across campus:

Role	Colour Name	HEX Code	Usage in the Interface
Primary Brand (Hero)	Uniandes Amber	`#FFAA00`	Main CTA buttons, featured restaurant map pins, active navigation states, and promotion badges.
Primary Dark	Shadow Grey	`#1E232A`	Top app bar, screen headings, secondary action buttons, and primary high-contrast typography.
Accent / Fresh	Light Sea Green	`#2EC4B6`	Healthy and vegan filters, QR scan success confirmations, "Open Now" badges, and route lines.
Surface / Light Tint	Lavender Blush	`#FCEFEF`	Soft card backgrounds, highlight badges, and modal container tints.
Background	Pure Off-White	`#F8F9FA`	Main screen background to minimize glare under bright outdoor sunlight.
Card Surface	Pure White	`#FFFFFF`	Restaurant cards, pop-ups, bottom sheets, and form inputs.

Rationale

Gastronomic & University Identity: Warm amber (#FFAA00) stimulates appetite and energy while paying subtle homage to the university's institutional colors, creating immediate familiarity.
Balanced Contrast: Pairing #1E232A with #FFFFFF and #F8F9FA guarantees a contrast ratio well above the 4.5:1 WCAG AA threshold for outdoor campus navigation.
Instant Cognitive Scanning: The green accent (#2EC4B6) and traffic-light time indicators allow students walking between buildings to assess wait times and opening status in under 2 seconds.

2.2 Fonts

Primary Font (Headings & Titles): Plus Jakarta Sans
Secondary Font (Body Text, Menus & Prices): Inter
Android Fallback Font: Roboto, sans-serif

Typography Hierarchy

Level	Font	Size (sp)	Weight	Line Height	Usage in UI
Display / Screen Title (H1)	Plus Jakarta Sans	`26 sp`	ExtraBold (800)	`32 sp`	Main screen titles ("What to eat today?").
Section Header (H2)	Plus Jakarta Sans	`18 sp`	Bold (700)	`24 sp`	List titles ("3 min away from ML").
Card / Restaurant Title (H3)	Plus Jakarta Sans	`15 sp`	SemiBold (600)	`20 sp`	Restaurant names on cards, dish titles.
Body Text	Inter	`14 sp`	Regular (400)	`21 sp`	Restaurant descriptions, student reviews.
Price Badges	Inter	`16–18 sp`	Bold (700)	`20 sp`	Dish prices (`$14,500 COP`) for quick reading.
Caption / Metadata	Inter	`12 sp`	Regular (400)	`16 sp`	Opening hours, distance in meters, payment tags.
Status Tags	Inter	`11 sp`	Bold (700)	`14 sp`	Badges: `< 5 MIN`, `VEGAN`, `PROMO`.
Buttons / CTAs	Plus Jakarta Sans	`14 sp`	SemiBold (600)	`16 sp`	"Apply Filters", "Scan QR Review", "View Menu".

Rationale

Exclusion of Serif Fonts: Serif fonts have small decorative lines at the ends of letters. On mobile screens and under outdoor campus sunlight, these lines blur together, making letters look cramped and causing students to misread characters (such as confusing a u with an a, or rn with m). Using pure Sans-Serif guarantees clear and error-free reading.
Why Plus Jakarta Sans for Headings?: It is modern and clean, giving the application a fresh and friendly identity for university students.
Why Inter for Body & Prices: Inter was created specifically for mobile user interfaces. Its open shapes and aligned numbers ensure that prices and distances can be read in a few seconds while walking between classes.

2.3 Icons and Images

We use outline icons with rounded edges throughout the app. Filled versions help indicate the selected navigation tab and make small status icons easier to recognize. Photos show restaurants, dishes, and student reviews.

Icon Style

Attribute	Specification
Grid	24 × 24 dp, with a 2 dp margin on each side.
Stroke	Uniform 2 dp stroke.
Line endings	Rounded caps and joins.
Corner radius	2 dp for rectangular shapes and 1 dp for shapes smaller than 16 dp.
Visual size	Circular icons can be slightly larger than square ones to look balanced beside each other.
Touch target	At least 48 × 48 dp for interactive icons.

Icon Size Scale

Icon sizes depend on where they appear and the text next to them.

Size	Paired Text	Usage
12 dp	Inter 11 sp Bold	Status tags such as < 5 MIN, VEGAN, and PROMO.
16 dp	Inter 12 sp Regular	Opening hours, distance, and other details.
20 dp	Plus Jakarta Sans 14 sp SemiBold	Buttons.
24 dp	Inter 12 sp or Plus Jakarta Sans 15 sp	Bottom navigation and filters.
32 dp	No visible label	Floating QR scanner button.

Colour Rules

Icon contrast is measured against WCAG 1.4.11, which requires a minimum of 3:1 for non-text interface components.

Icon Colour	Background	Usage
Shadow Grey #1E232A	White or Off-White	Default icons.
Shadow Grey #1E232A	Amber #FFAA00	Main actions and active map pins.
White	Darkened Teal #12897E	Vegan and “Open Now” badges.

Amber and Teal are used as backgrounds for these combinations. Wait-time tags also include a distinct icon and a text label, so students can understand them without relying only on colour.

for accesibility interactive icons have accessible labels describing their actions. Decorative icons are hidden from screen readers to avoid repeating nearby text.

Main Icons

Primary Navigation

The selected tab uses a filled icon with an Amber highlight. Other tabs use outline icons.

Icon	Name	Purpose
Folded map	Map	Find food options on and around campus.
Compass	Explore	Browse restaurants and apply filters.
Heart	Favorites	View saved restaurants.
Person	Profile	Manage preferences and account details.

Contextual Action — QR

Students can scan a QR code to open a restaurant profile or write a review. Both actions use a QR frame, with a different symbol and label to distinguish them.

Icon	Name	Purpose	Scenario
QR frame with scan line	Scan to view	Open the restaurant profile.	FS 9
QR frame with star	Scan to review	Open the verified review form.	FS 2, FS 9
QR frame with cross	Unreadable code	Show that the code could not be read.	QS 7
Rosette with check	Verified review	Identify a review submitted through the restaurant’s QR flow.	FS 9

Filters and Decision Criteria

Filter icons appear together on the same screen and use the same stroke width and size.

Icon	Name	Purpose	Scenario
Clock	Time available	Filter by time before the next class.	FS 1, FS 3
Walking figure	Walking distance	Show walking time to a restaurant.	FS 1, FS 3
Building	Campus building	Choose a reference building, such as RGD or ML.	FS 3, QS 3
Price tag	Price range	Filter by budget.	FS 1, FS 3
Bowl	Food type	Choose a food category.	FS 1
Leaf	Dietary option	Find vegetarian, vegan, gluten-free, or lactose-free options.	FS 5
Shield with alert	Allergen warning	Indicate allergens or missing allergen information.	FS 5
Storefront	Open now	Identify restaurants that are currently open.	FS 6
Card	Payment method	Filter by accepted payment methods.	FS 10

Wait-Time Status

Each wait-time tag has its own icon, colour, and label.

Icon	State	Colour	Scenario
Bolt	Under 5 min	Green #22C55E	FS 1, FS 7
Hourglass	5–15 min	Amber #F59E0B	FS 1, FS 7
Two people in a queue	Over 15 min	Red #EF4444	FS 7

Restaurant Detail

Icon	Name	Purpose	Scenario
List	Menu	View dishes and prices.	FS 4
Camera	Dish photos	View photos from students and the restaurant.	FS 4
Speech bubble	Reviews	Read student reviews.	FS 4
Star	Rating	Show the restaurant’s overall rating.	FS 4
Share nodes	Share	Open the device’s sharing options.	FS 8
Bookmark	Save	Add the restaurant to Favorites.	—
Flag	Report outdated information	Report incorrect prices or opening hours.	FS 10, QS 9

System States

Icon	Name	Purpose	Scenario
Cloud with slash	Offline	Indicate that saved information is being shown and may be outdated.	QS 1
Crosshair with slash	GPS unavailable	Indicate that the student needs to select a building manually.	QS 3

Image Style

The app includes restaurant photos and pictures uploaded by students with their reviews. We aim for clear, natural photos that help students see the food and compare their options.

Image Formats

Images use the following proportions and match the rounded corners of their cards.

Ratio	Usage	Minimum Resolution	Corner Radius
16:9	Main photo on the restaurant profile.	1600 × 900	16 dp
4:3	Restaurant thumbnails on Map and Explore.	800 × 600	12 dp
1:1	Menu dishes and student review photos.	1080 × 1080	12 dp

Student Photography Through the QR Flow

Step	Behaviour
Scan	The student scans the restaurant’s QR code to access the review flow.
Capture	The camera shows a square guide to help frame the photo.
Compress	The photo is resized to 1080 × 1080 px, compressed on the device, and queued for background upload (QS 4).
Publish	Approved photos appear in the review gallery with a verified mark. The restaurant’s main profile image is managed separately.

When There Is No Image

Restaurant cards should still show useful information or a visual representation when a photo is unavailable.

State	Treatment
No photo yet	Show a food-type icon on a Lavender Blush (#FCEFEF) background. Keep the price, distance, and wait-time tag visible.
Offline with no saved photo	Show a neutral grey placeholder. Display the offline indicator and the last update time alongside the saved restaurant information (QS 1).

Examples / Visual Evidence

Sheet A — Icon construction, variants, scale and colour rules

Sheet B — The complete icon set, grouped by task

Sheet C — Icons in context and the image system

Rationale

Icons Follow the Typography, Not a Generic Library: Plus Jakarta Sans is a geometric typeface with open counters and softened terminals. Sharp-cornered, hairline icons would visibly disagree with it. Matching a 2 dp uniform stroke and round terminals to the weight and geometry of the headings keeps the interface reading as one designed object rather than a UI with a stock icon pack dropped into it.
Why Two Variants?: This corrects a measurable failure, not a stylistic preference. §2.2 sets status tags in Inter 11 sp Bold, which places the accompanying icon at 12–14 dp; at that scale a 2 dp outline stroke closes the interior of the glyph and it degrades into an indistinct mark. The set was tested at 13, 20 and 32 dp, and the filled variant was adopted for every badge-sized use.
Why Shape Carries the Wait-Time States: The three states are the fastest-read element of the product. Distinguishing them only by green, amber and red would fail WCAG 1.4.1 and exclude students with colour-vision deficiency. Giving each state its own silhouette means the tag still works in greyscale, under bright sunlight, and when read aloud by the screen reader committed to in QS 6.

2.4 UI Prototype

Home screen

Exploration screen

Restaurant detail screen

Filters screen

Review / QR flow

Additional core screens

Prototype link

https://www.figma.com/design/u74H4fcAS1I4EeT1suFhDO/Uniandes-food?node-id=0-1&t=Ifx4RyigyPcT9J2n-1

2.5 Navigational Patterns

The navigation of the application follows a hybrid structure that combines flat and hierarchical navigation.

Flat navigation is used for the main sections of the application, allowing users to move directly between the most important destinations. Hierarchical navigation is used when users select a restaurant or access more detailed information.

Main Navigation

The main sections of the application are accessible through a bottom navigation bar:

Map: Shows the food options available on and around campus.
Explore: Allows users to discover restaurants and compare alternatives using filters.
Favorites: Gives users quick access to restaurants they have previously saved.
Profile: Contains the user's preferences and account-related information.

The QR Scanner is treated as a contextual action rather than a permanent section of the bottom navigation. It allows users to scan a QR code at a restaurant and directly access its information or review flow.

Navigation Structure

The general navigation structure is:

Map → Filters / Restaurant Detail → Menu & Information / Reviews → Write Review

Explore → Filters / Restaurant Detail → Menu & Information / Reviews → Write Review

Favorites → Restaurant Detail

Profile → Preferences

QR Scanner → Restaurant Detail → Write Review

Navigation Directions

The application uses three main navigation directions:

Lateral navigation:
Users move between the main sections of the application through the bottom navigation bar:

Map ↔ Explore ↔ Favorites ↔ Profile

Forward navigation:
Users move deeper into the application when they select content or perform an action. For example:

Map → Restaurant Detail → Reviews → Write Review

Explore → Restaurant Detail → Menu / Information

Reverse navigation:
Users can return to the previous screen using the standard back navigation of the platform.

For example:

Write Review → Restaurant Detail → Map

Rationale

This navigation structure was selected to keep the most important parts of the application easily accessible while maintaining a clear hierarchy for more detailed information.

The flat navigation allows users to quickly move between the main sections without having to return to a home screen. The hierarchical navigation helps organize restaurant-specific information in progressively deeper screens.

The QR scanner is kept as a contextual action because it supports a specific task rather than representing a main section of the application.

Overall, the structure is intended to keep common tasks short and simple, which is especially important for university students who may have limited time between classes.