Knight Quarters Social Media App - Case Study

A discussion-based app designed for UCF students to connect, discover RSOs, and stay updated on campus news and events. It centralizes UCF-related discussions and adheres to UCF’s branding guidelines. The goal is to provide an interactive, community-driven experience where students can exchange advice, information, and opinions in real time, building a stronger sense of connection within the UCF community. The app emphasizes inclusivity, authenticity, and real-time interaction—all while aligning closely with UCF’s visual identity.

... ... ...

Designed for Knights, by Knights

DIG 4172c - Spring 2025

  • Cole Davison – Backend Developer
  • Gianna Ruspantini – Frontend Developer & UX Researcher
  • Anthony Ugwu – UI/UX Designer
  • Evence Eliassant – Graphic Designer
Knight Quarters prototype image 1
Knight Quarters prototype image 2

Projected Impact of Knight Quarters

  • 🎟️ Ticket Sales Growth:
    Projected Increase: 150%
    With tailored event promotions and real-time engagement, Knight Quarters is expected to increase event ticket sales by a significant margin, compared to general platforms like Instagram and Reddit.
  • 📅 Event Attendance:
    Projected Attendance Rate: 85%
    Personalized notifications, campus-specific targeting, and a strong community-driven experience are projected to result in higher event attendance than other social platforms.
  • 💬 Audience Engagement:
    Projected Increase: 400%
    Real-time discussions, comments, and updates, combined with a user-friendly interface designed for UCF students, will drive unparalleled levels of engagement for event posts.
  • 🚀 User Growth:
    Projected Growth: 500% increase in active users
    As Knight Quarters continues to align with student needs, it is projected to rapidly grow its user base as more students join to engage in campus-specific events and discussions.
  • 🏛️ RSO (Registered Student Organizations) Impact:
    Projected Increase in RSO Activity: 250%
    RSOs will benefit from increased visibility and easy access to UCF students through Knight Quarters, driving higher participation in their events and activities.
...

Client-Side Technology Process

Technology Used: React Native, Expo, TypeScript, Figma

Approach/Process:

  • Developed a structured component-based architecture in Figma.
  • Created a responsive navigation bar for intuitive user flow.
  • Designed interactive elements for search, posts, messages, and communities.

Unimplemented Features:

  • Advanced filtering options for search.
  • Additional transitions for smoother navigation.
Image description

Key Findings - Emergent Needs

Insights gathered from participant surveys

Ease of Navigation

60% of participants were able to locate key features like their user profile and the search page with minimal effort. Users appreciated the intuitive layout and noted that minimal guidance was needed to explore the prototype effectively.

Icon Clarity and Recognition

100% indicated a keen interest in engaging features that make studying more interactive and rewarding. There is a clear demand for gamification elements and motivational tools to enhance study habits and maintain focus.

Text Legibility and Layout

Users highlighted that the text was easy to read and the layout made information accessible. Clear labeling and readable fonts contributed to a smoother user experience across different screens.

Mixed Feedback on Visual Appeal

Participants indicated that the current aesthetic felt underwhelming, signaling a need to enhance the visual identity and polish.

Participants described the experience as generally positive, averaging 3.8/5 for overall satisfaction. However, this also suggests room for improvement in areas like engagement, look-and-feel, and user delight.

Server-Side Technology Process

Create a platform that combines social media elements with a focus on studying to combat isolation and increase motivation. We aim to make studying more engaging and enjoyable, encouraging a lifelong passion for learning. Together, we can overcome challenges, celebrate achievements, and create a vibrant network of knowledge seekers.

Technology Used:

  • Backend: PHP
  • Database: MySQL
  • Server: XAMPP/Apache

Approach/Process:

  • Developed a structured component-based architecture in Figma.
  • Created a responsive navigation bar for intuitive user flow.
  • Designed interactive elements for search, posts, messages, and communities.

Unimplemented Features:

  • Advanced filtering options for search.
  • Additional transitions for smoother navigation.

Issues and Resolutions

Issue Description Resolution
Backend Is No Longer Responsive Data from the frontend is no longer being read by the backend due to me playing around with files I had no business of touching. Reinstall Xamp in hopes of returning files back to their default settings.
Comment Length Handling Comment input overflow goes outside of the comment container. Implement a vertical ScrollView to comment container.
Comment Error Handling Comment error on Search Page was being displayed in the wrong spot. Implement a new useState variable to differentiate error handling between the search bar and the comments.
Community Navigation Not Functional Community navigation was not rendering associated posts. Ensure Axios call is sending the community_id to the API endpoint.
Direct Messaging Not Functional Direct messages are not being sent to the user. Ensure Axios call is sending and receiving the correct data from the backend.
Following and Likes Not Functional The interface to follow other users and like comments and posts were not included on the frontend. Reevaluate front-end interface to ensure all content necessary for core functions is included.
WGAC Criteria Not Met Color contrast ratio did not meet the required 4.5:1. Design revisions were implemented.

Testing Results

Manual testing was conducted at multiple stages of development to validate integration, functionality, and user experience. Browser-based testing confirmed that core features worked as expected in early stages, and tools like Postman and Expo Go were used for API and mobile simulation testing.

Testing included:

  • Functional testing of login, post/comment creation, and search
  • Integration/API testing between front-end and back-end
  • UX testing for responsiveness and accessibility

  • Surprises

  • Expo Go configuration unexpectedly broke backend connectivity; input data from the frontend is no longer received by the backend.
  • Console logs show data is still being retrieved, but PHP endpoint logs reveal no input captured.
  • Limited testing due to incomplete featuresComment overflow and misaligned error messages uncovered edge cases in UI design.

  • Unimplemented:

  • Community navigation and API linkage still in progress
  • Full mobile functionality disrupted due to server reconfiguration
  • User Flow

    Users will be directed to log in, with entering registered email and password. Otherwise, they well be asked to sign up. The registration form has details like name, email, and create a password.

    Connections Page

    Personalized recommendations tailored to your study preferences and goals. Discover study groups, trending topics, and recommended resources based on your interests and interactions within the platform. Keep up with content that aligns with your academic pursuits.

    Discover Page

    Discover trending discussions, helpful posts, and new communities tailored to your engagement and preferences. Powered by intelligent suggestions, the Discover page helps you explore content beyond your circle to expand your academic journey.

    Direct Messaging

    Connect with peers instantly through private messages. Whether you're coordinating a group project, sharing study materials, or just checking in with a classmate, KnightQuarters’ messaging feature makes academic communication seamless and secure.

    These features are designed to enhance user experience by fostering community engagement, personalized learning pathways, and efficient resource management within your social media studying platform.

    Discussion-Based Posts

    • Create Posts: Share thoughts, questions, or academic discussions within a supportive student community.
    • Comment Threads: Engage with peers by replying to posts and building dynamic, informative conversations.

    Community-Centric Design

    • Join Communities: Browse or join specific communities based on your interests or academic focus.
    • Blog Post Resources: Posts and discussions are filtered by your selected communities for a more relevant feed.

    Smart Search & Navigation

    • Keyword Search: Quickly find posts, users, or communities using specific keywords.
    • Error Handling: Intuitive error messages guide the user when searches don’t return results.

    User Security & Customization

    • Secure Login: User accounts are protected with credential validation and token-based authentication.
    • Profile Management: Users can customize their profile and update their study focus or bio for community engagement.

    Challenges

    Challenges Faced
    • Backend integration issues due to time constraints.
    • UI responsiveness problems on different devices.
    • Limited testing due to incomplete features.
    Lessons Learned
    • The importance of early backend development for seamless integration.
    • Need for thorough testing and feedback loops during the development process.

    Conclusion

    The Knight Quarters app has been a transformative experience for our team, allowing us to explore the intersection of social media and education. Through this project, we have learned valuable lessons about collaboration, user-centered design, and the importance of community in enhancing the study experience.

    How did this experience change you as a team?
    • Strengthened our collaboration and problem-solving skills.
    • Improved our ability to structure and implement large-scale UI projects.
    Are we ready for post-graduation projects?

    Yes, but additional experience with backend development would be beneficial.

    What would we do differently?
    • Allocate more time for backend development.
    • Conduct early testing to address UI responsiveness issues sooner.