Micro Sprint 7: Extended Value Proposition, UI/UX Design System & Native Mockups

1. Value Proposition of the Solution

To refine our value proposition, we reviewed several existing marketplaces and peer-to-peer exchange channels that address parts of the problem space, but fail to resolve the unique academic, logistical, and safety needs identified in our student research.

Relevant Existing Solutions

• MercadoLibre: Focuses on broad e-commerce cataloging, national shipping logistics, digital payment escrow, and broad third-party buyer/seller reviews.
• Facebook Marketplace: Focuses on hyper-local community listings, free-form photo uploads, direct Messenger chat integration, and informal peer agreements.
• WhatsApp / Telegram Student Groups: Focus on instant, real-time message broadcasting within peer networks, informal photo sharing, and zero-cost entry.
• Chegg / AbeBooks: Focus on dedicated textbook rentals, retail buyback programs, ISBN lookups, and global standard inventory.
• Wallapop / OfferUp: Focus on neighborhood-level second-hand trading, proximity-based item discovery, in-app messaging, and direct cash or digital handover.

What Makes Our Solution Different

Most existing channels solve only one or two dimensions of the problem. General platforms like MercadoLibre or Facebook Marketplace offer wide catalogs but lack student verification, causing severe trust issues, safety concerns during off-campus handovers, and completely irrelevant search results. Specialized platforms like Chegg focus almost exclusively on US retail textbooks and neglect everyday campus gear like lab coats, drawing kits, calculators, and uniform supplies. Meanwhile, informal WhatsApp groups have an information shelf-life of minutes before listings get permanently buried.

Our proposed solution, CampusSwap (Student Raccoon), combines these capabilities into a single mobile experience specifically engineered for verified university communities:

• Closed-Loop Institutional Trust: Access is strictly bounded by university single sign-on (SSO) and verified institutional email, eliminating anonymous bad actors and external scammers.
• Academic-Specific Taxonomy: Listings are indexed directly by faculty, study program, and exact university course codes, transforming search from broad keyword guessing into exact syllabus alignment.
• Built-In Condition Verification: Sellers are prompted with structured condition badges (Like New, Good, Fair) and photo checklists, preventing mismatches between online photos and physical items.
• Campus-Centric Transaction Safety: Logistics are coordinated through designated on-campus meeting zones, eliminating the risk of meeting strangers in isolated or unfamiliar areas.
• Smart Valuation & Discovery: Machine learning models assist students in calculating realistic second-hand prices while automated wishlist matching alerts buyers the second an item from their course becomes available.

Refined Value Proposition

Our value proposition is to provide university students with a verified, closed-loop academic marketplace that transforms chaotic peer-to-peer exchanges into a secure, course-structured, and zero-friction experience. Unlike generic e-commerce sites or disposable chat groups, CampusSwap unifies institutional identity verification, academic syllabus categorization, automated price guidance, and safe in-campus handover coordination into a single student-centered mobile platform.

This makes the solution especially valuable because it directly tackles the root causes of transaction abandonment: fear of fraud, wasted time scrolling through irrelevant listings, awkward price haggling, and personal safety risks. By combining smart algorithmic matching with context-aware meeting logistics, CampusSwap keeps valuable academic tools circulating affordably within the university ecosystem.

How do our Smart Features generate value?

Smart features add value by removing cognitive and manual effort from the user experience, so they do not just digitize and make and action easier, they make decisions for the user that would, otherwise, require effort, research and comparison.

• Smart Valuation - AI Price Estimation: For sellers pricing a used item is a guessing and researching game, it is hard because products with high prices never sells, the ones with low prices make them lose money. By analyzing a photo and comparing it against similar listings, the app removes the uncertainty of "Fow how much is this actually worth?", and directly address sellers frustration of failing to sell an item.
• Smart Matching - Wishlist and Course-Based Notifications: For buyers, the value is not just finding in a list, instead of manyally checking other places or whatsapp groups, the system proactively notifies her the moment a needed textbook for her course appears. This converts a reactive and anxiety driven search into a trust driven one, where the buyer can just wait until someone else is selling the item they are looking.
• Automatic Academic Categorization: By tagging listings with filters or individual information, such as faculty, degree, or course, the app automatically guarantees a reliable view, voiding unfiltered listings from unrelated majors and courses.

In fact, Smart features generate value by removing effort from the student to the app, so they have less searching and less price anxiety.

How do the CAS features generate value?

Context aware services features generate value by making the app respond to the physical and situacional reality of each student, in this case, of campus life.

• Dynamic Location-Aware Metting Points: Coordinating a handover between the 10 minute class breaks without exposing user's personal phone number is frustrating, so CampusSwap by using buyer's and seller0s real time locations, the app suggests a meeting point both can realistically reach in time, turning an awkward logistics negotiation into a one-tap confirmation.
• Offline Aware Draft Saving: Because much of places in campus have poor connectivity, listings and messages risk being lost are high. By detecting connectivity state and caching drafts locally until a stable connection returns, the app protects the seller's effort, avoiding the possibility to lose the listing of items.
• Environmental Adaptation: Since exchanges ofthen happen outdoors in high-glare conditions, the app can detect ambient light and adjust contrast/brightness for QR codes or confirmation screens, so a rushed, sunlit exchange between classes does not fail due to an unreadable screen.
• Battery or Resource Awareness: Since students use their phones all day without regular charging access, CAS features that minimize background location polling or reduce sensor use when battery is low ensure the app does not itself become a source of friction, because users need the to accept the confirmation of the exchange and a dead phone during the meetup is a big risk for both of the users.

In this case, CAS features generate value by making the app context intelligent therefore, CampusSwap adapts to where the students is, how much time they have, how good their connection is and how visible their screen is.

---

2. Important Aspects of the UI/UX Design

2.1 Colour Palette and Rationale

The visual identity uses a focused palette built around deep navy, multiple shades of blue, and soft blue-lavender tones. This combination creates a modern, polished, and approachable aesthetic while providing a clear visual hierarchy across the application's interface.

• Deep Navy — #0E122F: Used as the darkest foundational color for high-emphasis elements, primary text, headings, navigation components, and other areas requiring strong contrast. Its deep tone provides a sense of stability and gives the interface a strong visual foundation.
• Primary Blue — #202A6A: Used for primary interface elements such as buttons, important actions, active navigation states, and prominent UI components. It provides strong contrast while maintaining the application's blue visual identity.
• Accent Blue — #3B4DC4: Used as the primary accent color for interactive elements, links, highlights, selected states, and other components that need to attract the user's attention. Its brighter tone establishes a clear distinction from the darker primary colors.
• Secondary Blue — #8B94D0: Used for secondary interface elements, supporting text, borders, icons, inactive states, and other lower-emphasis components. This softer blue helps establish visual hierarchy without competing with primary actions.
• Light Blue — #C6C9E2: Used primarily for light surfaces, backgrounds, cards, subtle highlights, and decorative elements. Its pale tone provides visual separation while keeping the interface clean and lightweight.

The application maintains these five colors as its core visual identity. Additional colors are avoided unless required for functional states such as errors, warnings, or success indicators:

• Semantic Status Indicators:
  • Like New (#2E7D32): Verified premium condition.
  • Good (#E65100): Functional with light wear.
  • Fair (#C62828): Noticeable wear, fully operational.

2.2 Fonts

The typography system uses three dedicated typefaces, each assigned a specific role within the interface:

• Heading Font — Fraunces:
  • Usage: Screen titles, major headings, section headers, prominent metrics, and other high-emphasis display text.
  • Rationale: Fraunces is a distinctive serif typeface that gives the interface a refined and expressive character. Its strong contrast and organic forms create a visual identity that feels sophisticated while remaining approachable.
• Body Font — Outfit:
  • Usage: Paragraphs, item descriptions, form fields, buttons, navigation elements, labels, prices, and other general interface content.
  • Rationale: Outfit provides a clean, contemporary sans-serif appearance with excellent readability across digital interfaces. Its geometric construction complements the structured blue color palette while keeping the interface modern and accessible.
• Monospace Font — JetBrains Mono:
  • Usage: Course codes (e.g., ISIS-3510, MATE-1203), pricing numbers, technical identifiers, and transaction tokens.
  • Rationale: JetBrains Mono is specifically designed for technical content. Its distinct character shapes and consistent spacing improve readability when displaying codes and structured data.

2.3 Icons and Images

For interface components and iconography, the design incorporates standard mobile conventions based on Material Design resources in Figma:

• Buttons and structural UI components follow the Material 3 Design Kit.
• System icons are adapted from the Material Design Icons library with a consistent 2px stroke weight and rounded stroke terminals.
• Standardizing on Material-based assets guarantees immediate learnability, as university students already recognize these interaction cues from mobile ecosystems.
• Product Photography Standard: All item listings enforce a strict 1:1 square aspect ratio with smooth 12px rounded corners, creating an orderly catalog grid regardless of camera differences.
• The Student Raccoon Mascot: The application features an original raccoon mascot icon serving as the platform identifier. The mascot represents resourcefulness, circular reuse, and community solidarity, embodying the philosophy that "one student's junk is another student's survival."

2.4 UI Prototype

The high-fidelity UI prototype of the application was developed in Figma and is accessible through the following link:

CampusSwap High-Fidelity UI Prototype – Figma

The prototype reflects the mobile-first nature of the solution and includes the main interaction flows required by the proposed value proposition. Through the prototype, users can explore authentication, profile setup, smart course matching, search filters, AI-assisted listing publication, in-app messaging, and dynamic safe meeting point selection. Every screen enforces touch targets of at least 48x48 dp, high-contrast labels compliant with WCAG AA standards, and consistent visual feedback across all states.

2.5 Navigational Patterns

The navigational structure follows a mobile-first pattern that privileges simplicity, direct access, and low cognitive load across four layers:

Layer	Purpose	Pattern Used
Primary	Move between top-level areas	Persistent bottom navigation bar (5 destinations)
Secondary	Go deeper inside an area	Hierarchical stack push to detail screens
Lateral	Narrow the current content	Category chips and an expandable filter panel
Transient	Focused tasks that take over the screen	Full-screen modal flow

• Persistent Bottom Navigation Bar: Anchors the five primary destinations: Home, Search, elevated central + Sell FAB, Cart, and Seller/Profile.
• Direct Horizontal Category Chips: Single-select filter chips (All, Calculators, Textbooks, Lab Supplies) update content dynamically on the active view without triggering jarring page reloads.
• Hierarchical Stack Drill-Downs: Selecting an item pushes to a full-screen detailed product view while preserving the parent scroll position and back stack.
• Contextual Bottom Sheets (Modals): Advanced filtering, sorting options, and meeting point confirmations open as draggable bottom sheets, allowing users to modify parameters while keeping the underlying product list visible.

---

3. Value of CAS and Smart Features

How do the smart features help me to generate value?

Our smart features transform second-hand trading from a chaotic manual chore into an automated, zero-friction experience. The primary value generated is the drastic reduction of cognitive load and search fatigue:

• Automated Syllabus & Wishlist Matching: Instead of forcing students to repeatedly search for mandatory textbooks or calculators, background algorithms continuously correlate published listings with the user's registered courses and wishlist items. For the student, the value is immediate awareness: they receive an instant notification the second a needed item is posted at an affordable price, preventing items from being snapped up before they even see them.
• AI Visual Price Estimation: When a seller uploads a photo of an item, computer vision evaluates the item category and visible wear to suggest a realistic, competitive price range based on historical sales across that specific faculty. This removes the hesitation of "How much should I ask for this?" and prevents overpriced listings, speeding up item turnover and ensuring buyers get a fair student deal.

How do the CAS features help me to generate value?

Our Context-Aware System (CAS), "The Campus Guardian," generates value by closing the logistical gap between agreeing to a deal online and completing it safely in the physical world. While traditional platforms leave users to figure out logistics on their own, our CAS actively protects both parties in real time.

• The Campus Guardian (Spatial & Temporal Context Awareness): The core value is context-driven safety and zero-friction coordination. By combining campus micro-location awareness with academic class schedules, the system intervenes when a transaction is agreed upon in the chat. Instead of forcing students to reveal personal schedules or suggest random spots, the app identifies shared campus breaks (e.g., a mutual free hour between lectures) and proposes an equidistant, officially monitored on-campus exchange point (such as the Central Library lobby or the Student Center plaza). This eliminates the vulnerability of meeting strangers off-campus, protects student privacy by avoiding personal phone number exchanges, and turns a stressful logistical coordination into a safe 2-minute campus encounter.

---

4. Applications of UX/UI Aspects into the App

The following 12 native mockups illustrate the concrete implementation of our design system, smart capabilities, and contextual features across the user journey:

View 01: Institutional Authentication & Login

• Purpose & Value: Enforces the closed-loop safety boundary by restricting access to active university community members.
• Key Components: CampusSwap mascot emblem, institutional single sign-on (SSO) and email/password inputs, validation feedback container, and direct demo credential toggle.
• Prototype Mockup Asset:

View 02: Student Academic Onboarding Profile

• Purpose & Value: Captures contextual parameters (faculty, enrolled degree, and current academic semester) to power automated recommendations.
• Key Components: Searchable faculty drop-down, semester level chips (Semesters 1–10), and major specialization picker.
• Prototype Mockup Asset:

View 03: Home & Academic Discovery Feed

• Purpose & Value: Serves as the primary operational hub, highlighting timely semester opportunities and dynamic announcements.
• Key Components: Search header with utility triggers (notifications/wishlist), "Weekly Deal" hero banner, horizontal single-select category chips (All, Calculators, Textbooks, Lab Supplies), and a curated "Hot Deals" carousel.
• Prototype Mockup Asset:

View 04: Course-Specific Recommendations (Smart Feed)

• Purpose & Value: Leverages the user's enrolled semester data to surface exact textbook editions and equipment required for active classes.
• Key Components: Course code pill headers (e.g., MATE-1203 Differential Calculus), smart matching confidence badges, and price variance tags relative to the campus bookstore.
• Prototype Mockup Asset: (Insert mockup image: View04_CourseMatches.png)

View 05: Catalog Search Results Grid

• Purpose & Value: High-efficiency exploration view supporting quick visual scanning and product comparison once a student has searched or is browsing a category.
• Key Components: Back chevron, search input (shows a focused/active state with an accent-blue outline), filter trigger icon (outline when inactive, filled accent-blue when the filter panel is open — see View 06), live results counter ("6 items found"), two-column card grid with photo, title (two-line wrap), seller rating (star + review count in parentheses), condition badge, and price in accent lavender.
• States & Interactions: Tapping the filter icon toggles View 06's panel open/closed without leaving the grid (icon fill state reflects panel state). The results counter updates live as filters are applied. Empty state (0 results) and loading state for the grid should be defined — not yet visible in the current build.
• Prototype Mockup Asset:

View 06: Category & Sort Filter Panel

• Purpose & Value: Allows multi-variable filtering without abandoning the active search canvas — narrows results by category, condition, and price, then reorders them by sort criteria, all without a page reload.
• Key Components: Inline expandable panel anchored below the search bar; Category chips (All, Calculators, Textbooks, Lab Supplies, Supplies); Condition chips (All, New, Like New, Good, Fair); Max Price slider with live label ("Max Price: P100"); Sort by chips (Relevance, Price low, Price high, Rating). Selected chips use the accent-blue filled pill; unselected chips are outlined.
• States & Interactions: Panel expands/collapses via the funnel icon in View 05's header; the results grid remains visible and live-updates beneath the panel as filters change, so the student never loses context. Default state on open: Category = All, Condition = All, Max Price = slider max, Sort = Relevance.
• Open question for the team: "Supplies" and "Lab Supplies" appear as separate category chips — confirm whether these are meant to be distinct or if it's a duplicate that should be merged.
• Prototype Mockup Asset:

View 07: Detailed Product View

• Purpose & Value: Resolves buyer hesitation by presenting comprehensive item proof, academic applicability, and seller reputation in one place.
• Key Components: Multi-photo preview carousel with pagination dots, course syllabus tag, verified seller credibility card, item description, and dual persistent action buttons (Add to Cart and Chat with Seller).
• Prototype Mockup Asset:

View 08: Item Publishing with AI Price Suggestion (Smart Feature)

• Purpose & Value: Guides sellers through an effortless publication flow while using computer vision to recommend fair valuations[cite: 8].
• Key Components: Multi-angle photo upload zone, automatic condition detection badge, AI suggested price recommendation card with historical reference range, and category/course pickers.
• Prototype Mockup Asset:

View 09: Buyer-Seller In-App Chat

• Purpose & Value: Protects student privacy by eliminating the need to share personal phone numbers or off-platform social links.
• Key Components: Pinned transaction header showing the item photo and price, real-time message bubbles, secure media sharing button, and a dedicated Propose Meeting Point action trigger.
• Prototype Mockup Asset:

Chat thread	Media sharing

View 10: Dynamic Safe Meeting Point Selection (CAS Feature)

• Purpose & Value: Uses campus micro-location and class schedules to remove logistic friction and guarantee a safe physical exchange.
• Key Components: Interactive campus map highlighting official safe exchange zones (library lobby, student center), distance indicators relative to both parties, and an "Accept Proposal" system card.
• Prototype Mockup Asset:

Map view	Zone detail	Accept proposal

View 11: Wishlist & Smart Match Notification Center

• Purpose & Value: Course materials on campus are a first-served market, so students often have to refresh the feed to find what they need. View 11 solves this with two screens: Wishlist saves items for later, while Alerts lets students set requests based on the item, course, category, condition, and maximun price. The app then looks for matching lists automatically, saving time and avoiding items that are outside the students budget.
• Key Components:
  • Wishlist grid: two column card grid of saved listings (image, title, rating, condition badge, price) with a filled heart that saves and un-saves the item. Header shows the live count.
  • Empty state: Heart icon, explanatory copy and a primary action that routes the student to Alerts.
  • New matches(Alert): a card per listing that satisfies an active alert, showing posted N min ago, with condition, badges, price and a derived line: "79% below your X COP limit". A reserved button holds item and flips the card to "Reserved"
  • Your alerts: One card per saved search with the treshold rendered in monospace (Alertme under X COP), an on/off switch, badges for the filters in force, the live match count and delete. *Quiet hours: "Muted during your classes" with a clock icon.
  • New alert form: keyword field ("Item or course code"), category, minimun condition, price slider and Instan/Dayly choices.
• Prototype Mockup Asset:

View 12: Transaction Completion & Peer Rating View

• Purpose & Value: A ptp campus marketplace has no escrow or returns, so trust depends on user ratings. View 12 guides students through the exchange, with inspection before payment and a rating after the meeting. It starts from the chat once both users confirm the meeting.
• Key Components:
  • Transaction summary card: thumbnail, title, price, the confirmed meeting point and time slot from View 10, and monospace transaction code.
  • Step 1 x Check the item before you pay: four checkboxes: Matches the photos, Condition is Like New as listed, Everything included, Works as expected; an escape hatch ("Something is off? Report a problem"); and Confirm the condition you received pill row
  • Step 2 x Rate seller: five tappable stars with a live label (Poor -> Excellent), quick feedback tags (Punctual, Item as described, Friendly, Good communication, Fair price) and an optional 200-character review with a character counter.
  • Blind ratings: Ratings stay hidden until you both rate
  • Confirmation state: "Exchange closed", a summary of the score given, and the counterpart's card showing either "Hasn't rated you yet" or the revealed rating and tags once both sides have submitted.
• Prototype Mockup Asset: