Contact Me

CampusHub

Platform

PWA (Progressive Web App)

Client

CampusHub LTD.

Role

Lead Product Designer

Duration

6 Weeks

Overview

CampusHub is a PWA-based classifieds platform that connects Nigerian students and businesses around campus communities. It allows students to buy, sell, and discover everything from accommodation and electronics to gigs, parties, and learning opportunities, all within a fast, intuitive interface tailored for the mobile-first habits of Nigerian youth.

Problem

Students on Nigerian campuses rely on fragmented WhatsApp groups, Telegram channels, and flyers to buy/sell goods or promote services. These methods:

  • Lack central organization
  • Invite scams and unverified sellers
  • Make it hard to search or filter listings
  • Don’t offer category-specific user experiences

    • Campus-based businesses also lack a student-first platform for advertising goods and services efficiently.

    Goals

  • Create a unified marketplace for students and nearby vendors
  • Simplify posting, browsing, and chatting through mobile-first design
  • Establish trust through seller verification and feedback
  • Deliver a lightweight experience suitable for limited devices and bandwidth
  • Use visuals, not text-heavy layouts, to match Gen Z browsing behavior

    • Target Users

  • Students (looking to buy or sell goods and services)
  • Student entrepreneurs (private or business account)
  • Off-campus businesses targeting student markets

    • Research Insights

    To understand user behavior, pain points, and expectations, I conducted informal interviews and usability observation sessions with:
  • 8 students from 4 Nigerian universities
  • 3 campus-based business owners
  • 2 school event promoters

    • Key Findings:

    Students:
  • Rely on WhatsApp/Telegram groups, but find them disorganized and spam-heavy
  • Feel unsafe dealing with unverified or anonymous sellers
  • Prefer visual, categorized browsing
  • Use dark mode frequently, especially at night
  • Want a way to chat or ask questions within the app
  • Are conscious of data usage and storage, and avoid downloading apps

    • Businesses:
  • Want to target users by school or region
  • Prefer customer contact through WhatsApp
  • Need access to basic ad metrics (views, interest)
  • Open to ID verification for a badge that boosts trust
  • Require a quick and mobile-friendly ad-posting flow

    • These insights directly shaped:
  • The WhatsApp number requirement and contact button
  • Building CampusHub as a PWA, not a native app
  • Image-based categories for easier scanning
  • A tiered verification system that users can grow into
  • The feedback and report flow for transparency

    • Ideation & Structure

    User Flows

    We mapped out core user journeys, including:
  • Posting an ad
  • Viewing and filtering listings
  • Messaging a seller
  • Verifying an account
    • These flows helped us define necessary pages, entry points, and user decisions

    Lo-Fi Wireframes

    Sketches and grayscale layouts were created to:
  • Explore visual hierarchy without distractions
  • Rapidly test layout options
  • Ensure responsiveness across screen sizes

    • Key screens wireframed:
  • Home with categories
  • Listing detail page
  • Chat interface
  • Ad creation form
  • Profile with tabs for ad states

    • Visual Design System

    Color Palette
    CampusHub’s color system balances trust, youthfulness, and function:

    Purpose Hex Code Role/Usage
    Primary (Teal) #008080 Core brand color — buttons, icons, CTAs
    Background #FCFCFC Neutral backdrop for listings
    Primary Text #121212 Accessible, high-contrast body text
    Active Ads #2ECF8B Energetic green to highlight published ads
    Under Review #F7C02B Cautionary yellow to signal moderation stage
    Hidden Ads #707070 Muted gray for private user-hidden content
    Draft Ads #009DC4 Calm blue for saved but unpublished content
    Declined Ads #DC3454 Alert red with notification feedback

    Brand Mood & Accessibility

  • Teal stands for trust, knowledge, and modernity.
  • Color contrast (e.g., text on #fcfcfc) passes WCAG AA.
  • Filled icons ensure clarity even at smaller sizes.

    • Typography: DM Sans

    Chosen for its friendly and geometric forms, readable across all screen sizes

    Style Weight & Size Use Case
    Display XL Black, 24px Hero titles, section headers
    Heading L Bold, 20px Page titles
    Heading M Bold, 18px Ad titles, headings in cards
    Body L Regular, 16px Main paragraph text
    Body M Regular, 14px Meta info, prices, location
    Micro Medium, 12px Buttons, badges, disclaimers

    Icons

  • Sourced from Flaticon
  • Filled style throughout for consistency
  • Changes to teal (#008080) when active

    • Sign-Up Flow

    Users begin by choosing their role:
  • Are you a student or non-student?
  • Select account type: Private, Student Business, or Non-student Business?
  • Enter personal info: First name, last name, email, password
  • WhatsApp number is mandatory. Used for buyer-seller communication

    • Why WhatsApp is required:

    WhatsApp is the default messaging tool in Nigeria. Requiring it:
  • Prevents burner accounts
  • Allows faster off-platform communication
  • Supports hybrid communication models (in-app + direct)

    • Key UX Features

    Visual Category Browsing
    CampusHub uses real-world images to represent categories, not generic icons. This approach:
  • Increases visual recognition
  • Creates a more relatable, lifestyle-inspired interface
  • Works well in both dark and light modes

    • Categories include:
  • Community
  • Apartments
  • Phone, Tablets & Accessories
  • Electronics
  • Fashion
  • Health & Beauty
  • Scholarships
  • Parties & Events
  • Freelance Jobs & Gigs
  • Services
  • Tutorials & Training
  • Food & Drinks
  • Books & Study Materials
  • Flasks & Wares
  • Artworks)

    • Homepage Structure

    Header: CampusHub logo on the left, dark/light mode toggle on the right
    Search Bar: Full-width, visible beneath the header
    Category Grid: Vertically scrollable with image thumbnails
    Latest Ads Feed: Card layout showing:
  • Item image
  • Title
  • Price
  • School (Location)
  • View count
  • Save Ad button
  • Text indicating the number of images in the ad
  • Verification tag (For verified users)

    • Seller Verification System

    Verification builds trust and filters out bad actors:
  • No verification
  • Email verification (required to post)
  • ID upload
  • Selfie match with ID → earns Verified Seller badge
    • This tiered system encourages transparency without raising barriers too early.

    Navigation & Mobile Design

    Bottom Navigation Bar

    Contains 5 tabs:
  • Home
  • Saved Ads
  • Sell
  • Messages
  • Profile
    • Why bottom nav over hamburger?
  • Easier for thumb access on mobile
  • Keeps critical actions always visible
  • Reduces navigation friction, especially on PWAs

    • Sell Flow

  • Tap "Sell"
  • Choose a category
  • Dynamic form based on category
  • Upload image(s), enter price, description
  • Email verification required to publish
  • Ads go to moderation queue for approval

    • Messaging

  • Chat is ad-specific
  • Multiple conversations between same users possible if tied to different ads
  • Ad context is always pinned at the top of the chat
  • Messages screen includes notification bell for system updates

    • Advert Detail Page

    Includes:
  • Image carousel
  • Ad title, location, price, view count
  • Item details (dynamic by category)
  • Safety tips section
  • Seller information (image, verified status, time on platform)

    • Dual CTAs: WhatsApp & In-App Chat
    Two side-by-side buttons:

    Button Action Style
    WhatsApp Opens chat with seller using their registered WhatsApp number Green
    Chat Opens in-app ad-specific thread White with Green border

    Why both options?
  • WhatsApp: Faster, familiar
  • In-App: Secure, contextual, easy to moderate
  • Choice improves engagement and user trust

    • Feedback & Reviews

  • Users rate sellers as Good, Average, or Bad

  • Optional written comment

  • View history of seller feedback with “See All” option

  • Encourages accountability and better seller behavior

    • Profile & Settings

    Profile includes:
  • Personal info
  • Ads grouped by status: Active, Reviewing, Hidden, Drafts, Declined (with reason)
  • Posts and replies in Community section
  • Feedback sent/received

    • Settings panel includes:
  • Edit personal info (Name, Email, Password etc.)
  • Notification preferences
  • Feature Suggestion
  • FAQ
  • Privacy Policy
  • About Us
  • Terms of Use
  • Safety Tips
  • Contact Us
  • Dark Mode
  • Log Out
  • Delete

    • Technology Approach: Why PWA?

    CampusHub was built as a Progressive Web App, not a native mobile app:

    Benefit Why It Matters
    Lightweight Reduces data and storage load for users
    Cross-platform Works on browsers, Android, iOS without install friction
    Speed Loads quickly even in low-bandwidth conditions
    Push support Can still send notifications with permission

    For Nigerian campuses, this means accessibility without barriers.

    Usability Testing

    Participants:
    8 students + 3 business owners

    What Worked:
  • Easy recognition of categories with images
  • Verification system improved trust
  • Users appreciated both WhatsApp and chat options
  • Nighttime users liked the dark mode toggle
  • Ad-specific chat reduced confusion

    • What We Improved:
  • Tooltips added to explain verification levels
  • Allowed limited guest browsing for ad discovery

    • Key UX Decisions

    Decision Rationale
    Image-based categories Immediate recognition, lifestyle-driven UI
    Bottom nav bar Mobile-first, faster to use than hamburger
    Tiered verification Balances ease of use and accountability
    Dual chat CTAs Gives users control while encouraging engagement
    PWA over native app Lightweight, inclusive, no installation friction
    Feedback system Simpler than stars, encourages transparency

    Expected Outcomes

  • More trust in the platform = higher engagement
  • Faster sell flows reduce abandoned listings
  • Visual layout improves category discovery
  • PWA architecture ensures strong retention, even for low-end device users

    • Prev Project
    OPT Media Agency
    Next Project
    TH3 Web Design

    all Projects