MS6 - Moviles-SEC-2-G25/Wiki GitHub Wiki
Sidequests helps university students break out of repetitive routines by transforming their available free time into small, personalized and easy-to-start activities. The application reduces the effort normally required to discover, compare and organize something new by recommending a small set of Side-Quests according to factors such as the user's available time, interests, location, budget, preferred difficulty, social interaction preferences and previous interactions.
For university students who want more variety in their free time but are held back by planning effort, choice overload, limited time, or social friction, Sidequests transforms available moments into small personalized challenges adapted to the user's interests and current context, making trying something new easier than planning it independently.
Unlike alternatives such as social media, Google, maps, event platforms or asking friends, Sidequests is not primarily designed for users to search through many possible activities. Instead, it reduces planning and decision-making effort by proactively presenting a small number of relevant and actionable Side-Quests. Its main differentiators are:
- Context-aware recommendations based on the user's current situation.
- A reduced number of recommendations to avoid choice overload.
- Low planning effort and easy-to-start activities.
- Personalization based on previous accepted, skipped and completed quests.
- Recommendations designed around short and unpredictable periods of free time.
The Sidequests color palette combines indigo, amber and teal to communicate exploration, spontaneity and discovery. Indigo acts as the primary brand color because it balances the imaginative and adventurous identity associated with the concept of a “side quest” with the trust required from a frequently used mobile application. Amber is used selectively to highlight spontaneous actions, recommendations and rewarding interactions, while teal supports activity categories and discovery-related functionality. Neutral backgrounds and dark typography maintain visual clarity and prevent the interface from becoming overly game-like, allowing the experience to remain modern, accessible and easy to navigate.
| Color | Preview | HEX | Suggested Role |
|---|---|---|---|
| Explorer Indigo |  |
#5B4BDB |
Primary actions, navigation, and brand identity |
| Quest Amber |  |
#FFB347 |
Highlights, rewards, and recommendations |
| Discovery Teal |  |
#2AB7A9 |
Categories, filters, and secondary actions |
For a 'sidequests'mobile app targeting young people and focused on minimizing cognitive load, the typography must balance a modern, engaging personality with extreme legibility. A dual-font strategy works best: a character-rich font for headings to sell the "quest" vibe, and a highly legible workhorse font for the UI body components.
| Style | Heading Font (Personality) | Body Font (Usability) | Vibe & UI Impact |
|---|---|---|---|
| Friendly & Approachable | Outfit | DM Sans | Outfit is geometric and round, making the app feel like a friendly companion rather than a demanding task manager. DM Sans is warm yet highly scannable. |
-
Mitigating Choice Overload (Cognitive Load): The app's core value is reducing the effort of planning. Complex or decorative fonts require more cognitive processing to read. Workhorse sans-serifs DM Sans have tall x-heights and open counters, making them instantly scannable when users are quickly glancing at their phone between classes.
-
Appealing to Gen Z: Traditional serifs can feel academic, formal, or like a textbook, which exactly what young people are trying to escape during their free time. Modern geometric sans-serifs feel fresh, dynamic, and align with the design language of different tools.
-
Designing for Short Bursts: Because users are interacting with Sidequests during "short and unpredictable periods," the typographic hierarchy must be aggressive. Using a bolder, slightly wider font for headings (like a quest title: "Explore the Botanical Garden") instantly separates the actionable core from the metadata (time, distance, budget) set in a neutral body font.
-
Accessibility in Changing Contexts: Students will use the app outdoors in bright sunlight or at night in a dorm room. High-legibility UI fonts ensure the text remains readable across different screen brightness levels, contrast states (Dark Mode vs. Light Mode), and physical environments.
Sidequests uses Lucide as its single icon library, applied in outline style with a uniform 2px stroke. Using one library across the entire product guarantees consistent weight, corner radius and optical size. Emoji were deliberately avoided: they are rendered by the operating system and therefore change appearance between Android, iOS and web, which would break visual consistency across a fragmented mobile ecosystem and remove any control over colour.
| Property | Specification |
|---|---|
| Library | Lucide (ISC License) |
| Style | Outline, 2px stroke, rounded caps and joins |
| Sizes | 24px (bottom navigation, primary actions) · 20px (category tags) · 16px (quest metadata) · 40px (badges) |
| Default colour | Neutral grey #8A8AA3
|
| Active / selected | Explorer Indigo #5B4BDB
|
| Categories | Discovery Teal #2AB7A9
|
| Rewards and highlights | Quest Amber #FFB347
|
| Minimum touch target | 48 × 48 dp |
| Icon | Destination | Meaning |
|---|---|---|
compass |
Explore | Discovery and orientation — finding something new |
zap |
Quest | Immediate, energetic action in progress |
user-round |
Profile | Personal space, preferences and progress |
Navigation icons are always paired with an uppercase text label and a coloured dot marking the active tab. Icons are never used alone in navigation: the label supports recognition rather than recall and removes any ambiguity about what each section contains.
| Icon | Where it is used | Meaning |
|---|---|---|
arrow-left |
Quest detail, active quest | Return to the previous screen |
arrow-right |
Continue, Accept Quest, Complete This Step | Move forward in a linear flow |
x |
Exit button on the active quest | Abandon the quest (escape route) |
check |
Completed steps and completed quests | Task successfully finished |
square-pen |
My Preferences | Edit saved preferences |
sliders-horizontal |
Explore | Refine recommendations by time, place or interest |
sparkles |
Quest cards | Marks a newly recommended quest |
These 16px icons accompany the information the user needs before accepting a quest. They replace repeated text labels, which keeps each card scannable during the short and unpredictable moments in which the app is used.
| Icon | Represents |
|---|---|
clock |
Estimated duration |
map-pin |
Location and distance |
wallet |
Estimated cost |
gauge |
Difficulty level |
users |
Level of social interaction |
The seven interest categories each have a dedicated icon in Discovery Teal. The same symbol is reused in the onboarding preference selector, in the filter chips and in the quest cards, so the user learns each icon once and recognises it everywhere.
| Category | Icon |
|---|---|
| Outdoors | trees |
| Food | utensils |
| Art | palette |
| Learning | book-open |
| Social | users |
| Movement | footprints |
| Mindfulness | leaf |
Badges use Quest Amber to signal achievement and reuse the category icons so that each reward is visually connected to the type of quest that unlocks it. Unlocked badges are shown in full colour with a check mark; locked badges appear at reduced opacity with a lock icon, keeping progress visible without being confused with an available reward.
| Badge | Icon |
|---|---|
| First Quest | zap |
| Explorer | compass |
| Foodie | utensils |
| Art Lover | palette |
| 7-Day Streak | flame |
| Bookworm | book-open |
| Locked state | lock |
| Image type | Format | Usage |
|---|---|---|
| Quest cover | 16:9, 16px rounded corners | Header of the quest detail screen |
| Category thumbnail | 1:1, 48px | Quest cards in Explore |
| User avatar | 1:1, circular, 56px | Profile header |
| Badge illustration | 1:1, 40px inside a card | Achievements grid |
| Empty state illustration | Flat vector, single accent colour | No quests available, no connection |
When a quest has no associated photograph, the card falls back to a solid placeholder built from the category colour and its icon. This keeps the layout stable and avoids broken or inconsistent visuals, which matters for content loaded over a slow mobile connection.
- Consistency and standards. A single icon library with fixed sizes and stroke weight prevents the visual noise produced by mixing symbols from different sources, and follows the conventions users already know from other mobile applications.
- Match with the real world. Every symbol reuses an established convention — a clock for time, a pin for place, a wallet for cost — so its meaning is understood without explanation.
- Recognition rather than recall. Categories and badges always use the same icon across every screen, so users identify them at a glance instead of reading labels again.
- Aesthetic and minimalist design. Icons replace repeated text in dense areas such as quest metadata, keeping cards readable and reducing the cognitive load the product is meant to eliminate.
- Accessibility. All icons meet a minimum 4.5:1 contrast ratio against their background, use a 48 × 48 dp touch target, and expose a text description to screen readers. Critical actions always combine icon and label.
https://beaver-undo-90237796.figma.site/
We chose a persistent bottom tab bar as the primary navigational pattern, consisting of three core destinations: Explore, Quest, and Profile.
This decision reflects the app’s central user journey. Explore helps users discover activities that match their available time, location, and interests; Quest provides immediate access to the activity currently in progress; and Profile brings together personal preferences, achievements, completed quests, and settings. Since these are the three main reasons for opening the app, keeping them permanently visible avoids hiding essential functions inside a hamburger menu or navigation drawer.
The bottom tab bar also follows familiar mobile conventions on both iOS and Android, making the interface immediately understandable without additional onboarding. Each destination combines a recognizable icon with a short uppercase label, while a coloured indicator identifies the active section. This constant feedback helps users understand where they are and move between the app’s main areas in one tap.
The overall navigation is intentionally flat and shallow, while still supporting contextual drill-down where necessary. From Explore, users can filter recommendations by time, location, or interest; these controls refine the current content rather than acting as separate navigation destinations. Selecting a quest card opens its detail view, where users can review its duration, estimated cost, location, difficulty, and required steps before accepting it. A back arrow returns them to discovery, while the bottom tab bar remains available throughout the flow.
After a quest is accepted, navigation becomes task-focused and progressive. The Quest screen presents the activity as a sequence of numbered steps, highlights the current step, and displays progress at the top. A prominent “Complete This Step” button guides users forward, while Back and Exit provide clear escape routes. This reduces cognitive load by showing only the information needed at each stage.
The prototype also uses a short, linear onboarding flow before the main navigation appears. Users move through four preference-setting steps using Continue, with the option to skip setup and explore freely. This pattern gathers information for personalised recommendations without preventing users from reaching the main experience.
Overall, the navigational structure maps directly to the user’s journey: discover an activity (Explore), complete it step by step (Quest), and review or manage personal progress (Profile). This one-to-one relationship between user intent and navigation destination keeps the app predictable, efficient, and easy to learn.