CampusLoop: Designing a Mobile Campus Community

Abstract

Campus information is scattered across messaging groups, notice boards, posters and word of mouth, so students miss what matters to them. CampusLoop is a mobile-first community app concept that gathers this activity into one place: a live “Campus Pulse”, a feed from followed clubs and people, and a five-item navigation for discovery, posting, messaging and profile. This report documents the complete UX process — objectives, system flowchart, use-case and data-flow diagrams, a variable-based design system in Figma, five connected 390 × 844 screens, and a usability review.

The problem

A campus produces a constant stream of information — club announcements, event posters, placement talks, timetable updates, study-group requests and personal conversations. Spread across six channels, it's easy to miss. CampusLoop's idea: open one app and immediately see what's live on campus, what your clubs posted, and where to act.

System structure

The flowchart starts at Home, where the bottom bar branches to Explore, Create Post, Inbox or Profile — every branch returns to one decision: keep using the app, or close it.

The use-case diagram defines two actors: the Student, who performs every use case, and the Club / Cell Organiser (for example the Robotics Club or Placement Cell), who publishes announcements and events, views RSVPs and messages students.

The level-0 data-flow diagram treats CampusLoop as one process exchanging data with those two entities; level 1 splits it into five processes — profiles, posts and feed, discovery, messaging, and clubs and events — each reading and writing its own store.

Design system first

Before any screen was drawn, a reusable system was built in Figma with variables for colour, spacing and radius, text styles and components with variants: eight colour tokens, Plus Jakarta Sans across a single type scale, 24 px round-cap icons, and one radius scale. That foundation kept five screens consistent and made them faster to build.

Five screens

Home — feed tabs (For You, Following, My Clubs), a Campus Pulse strip of LIVE tiles such as library occupancy, a quick composer and post cards.

Explore — search with filters, category chips, trending hashtags with counts, clubs with quick-join, this week's events with RSVP, and people to follow.

Create Post — a focused composer with a live 105/280 counter, up to four images, community chips, optional event/location/audience rows and a reach preview (“About 340 students will see this”).

Inbox — filters, message requests with stacked avatars, and conversation rows with unread and online states. Profile — verified identity, stats, clubs and interests, campus badges and Posts/Events/Saved tabs.

Conclusion

One loop, five screens, one design system. The case study covered the complete UX workflow and showed how a focused, consistent interface can bring the scattered parts of campus life into one mobile experience. The natural next step is a connected backend for the data stores defined in the DFD — the direction the CampusLoop web platform has since taken.