Repository navigation
MS6
Unlike the current approach students take piecing together information from Instagram, Tiktok, Google Maps, word of mouth, and WhatsApp groups, our app centralizes the entire nearby gastronomic offer in one place and personalizes it automatically based on budget, dietary restrictions, and free time between classes. Where existing tools only show what exists (a location pin, a photo, a generic review), our app tells students what fits them right now: it combines a real-time occupancy indicator with a personalized recommendation engine, something no single existing platform offers together. This saves students time and reduces the uncertainty of showing up to a full restaurant or a place that doesn't match their diet or budget—all at no cost to them.
The beige and brown tones evoke coffee and food associations, instantly signaling what the app is about before a user even reads any text. Orange, as the accent color, is a common choice in food branding because it's associated with appetite, and it also stands out from the typical blue and green palette of map or university apps, reinforcing how this app differentiates itself from generic tools like Google Maps or Instagram. The contrast between the dark brown and cream background gives the interface a curated, almost premium feel, which aligns with the app's goal of guiding students toward the right decision rather than just listing options like a generic directory. Green for the "Open" badge works as a universal, instantly recognizable cue, directly addressing one of the core pain points identified in the interviews: arriving at a place without knowing its status beforehand. Finally, the limited color palette (two dominant tones, one accent, and one functional color) keeps the interface easy to scan quickly, which matters given the real context of use, which is making a fast decision about where to eat between classes.
The app uses a single rounded, geometric sans-serif typeface (Poppins) across the entire interface. Its soft, friendly curves and consistent stroke weight echo the rounded shapes used throughout the icon set and card components, reinforcing a warm, approachable personality rather than the sharper, more corporate feel typically found in productivity or mapping apps. Rather than combining several font families to differentiate types of content, the interface builds its entire visual hierarchy through variations in weight and size within this single typeface, which keeps the reading experience predictable and reduces visual noise, an important consideration given that students are typically scanning the app quickly between classes rather than reading it at length. This consistency also reinforces the same curated, premium feel established by the color palette and custom iconography, ensuring that typography, color, and imagery all communicate a single, cohesive identity instead of feeling like separate design decisions stitched together.
| Text Element | Weight | Size | Usage |
|---|---|---|---|
| Primary Headlines | Bold / ExtraBold | 24–28pt | Anchors key screens and captures immediate attention |
| Card Titles | Bold | 18–20pt | Highlights prominent content without competing with headlines |
| Buttons / CTAs | Bold | 16pt | Reinforces tappable, actionable elements |
| Navigation Labels & Badges | Bold / SemiBold | 11–12pt | Compact, legible labels with slight letter-spacing |
| Secondary / Supporting Text | Regular / Medium | 13–14pt | Descriptions and helper copy, lower visual priority |
This single-family, weight-and-size-based hierarchy keeps the interface calm and fast to scan, matching the real context of use: a student making a quick decision about where to eat between classes.
Icons are custom, minimal line-based SVGs rather than a generic icon library, so every icon can match the app's warm, rounded visual identity and use the exact palette colors instead of a mismatched default set. Most utility and navigation icons (search, filter, wait time, location) are thin outlined strokes with rounded caps, which keeps the interface calm and quick to scan, matching the real context of use: a student making a fast decision between classes. Filled, solid-color icons are reserved for high-priority signals only, such as the star rating (gold) and the "Open" status, so these are the elements that immediately catch the eye rather than competing with every other icon on screen.
Images are real photography of the food and restaurant interiors, not illustrations or placeholder icons, because authentic photos build trust and answer a question a map pin or star rating can't: "what does this place actually look like right now." All photos are cropped and displayed with the same aspect ratio and cover-fit treatment across cards, lists, and detail views, so restaurants stay visually uniform and easy to compare at a glance, reinforcing the curated, premium feel established by the color palette instead of looking like a generic, cluttered directory.
The prototype can be found here.
We use a Sequential Navigation pattern for the initial preference survey. The Continue button guides the user through the survey step by step, keeping the process simple and focused. During this flow, the main navigation bar is intentionally hidden because completing the survey is required before accessing the rest of the application. This also prevents users from leaving the process accidentally and ensures that the app has the information needed to provide personalized recommendations.
We use a Bottom Navigation Bar pattern to provide direct access to the main sections of the application: Discover, Search, Map, Saved, and Profile. These are the most important and frequently used views, so keeping them permanently accessible reduces the number of steps required to move between them. The selected section is also visually highlighted, helping users understand where they are within the application.
We use a Modal Navigation pattern for the crowd-reporting interaction. The report appears as a focused layer over the current screen, allowing users to provide information without losing the context of the restaurant they were viewing. Since this is a short and optional task, the user can either submit the report or skip it and immediately return to the normal navigation flow.
We use Contextual Navigation through action buttons for secondary actions such as viewing or writing restaurant reviews. Buttons such as See Reviews and Write a Review are placed inside the restaurant details view because these actions are directly related to the restaurant currently being explored. This keeps secondary functionality close to its relevant content without adding unnecessary options to the main navigation bar.