MarketMate
Campus Marketplace — Exclusively for Students
Software Engineering Class Project
UX/UI Designer, Front/Back End Developer
Fall 2024
3 Months
Tools
Figma, HTML, CSS, JavaScript, Firebase
Background
University students often struggle to find a platform that meets their specific needs for buying, selling, or offering services within their campus community. General platforms like Facebook Marketplace or OfferUp cater to a broad audience but fail to address the unique challenges and security concerns faced by students. MarketMate was our solution—a web application designed exclusively for university students, leveraging .edu email verification to ensure security and trust.
This project was part of a software engineering class, spanning 3-4 months during the Fall 2024 semester. As a team, we worked collaboratively to design, develop, and test this application, overcoming challenges in both usability and technical implementation.
User Problem
The primary pain point we identified was the clutter and inefficiency of university group chats. Students frequently posted listings for books, furniture, and services such as haircuts or cooking, which disrupted the chat’s main purpose—communication. Existing platforms (FaceBook and OfferUp) also allowed for multiple fake accounts and irrelevant listings, leaving students without a secure and streamlined solution.
Screenshots from students posting their product/service on the university group chat were collected as shown below. Through user research, we confirmed a strong demand for a dedicated platform where students could list items and services securely, with features tailored to their unique needs.
Solution
MarketMate addressed these challenges by introducing:
Account Verification: Users can only create accounts with .edu emails, ensuring authenticity. Since each student is only given one university email, and we require a .edu verification, this will eliminate multiple fake account creations.
Core Features: A product feed, listing page, wishlist, notifications, messaging, and user profiles streamlined the buying and selling process.
Secure and Accessible Design: Built using HTML, CSS, JavaScript, and Firebase, the app prioritized functionality and security.
Our Approach
Empathize/Define: To validate the demand for MarketMate, we conducted user research by analyzing activity in university group chats and speaking with potential users. This research highlighted student frustrations with existing platforms and emphasized the need for a secure, streamlined alternative.
Ideate: Once we figured out the user problem and how we would approach it, we created user flows and low-fidelity sketches to visualize the solution better. We also worked on the logo, color palettes, and some assets, such as icons.
Design: After the prep work, we developed high-fidelity prototypes emphasizing usability and accessibility using Figma. Each feature, from the feed to the messaging system, was designed with the student user in mind, ensuring a clean and intuitive experience.
Buy Page
b. Product Page
c. Sell Page
d. Listing Product/Service
e. Product Details
f. Messages
Prototype: Once we had the designs ready, we used Figma to prototype them to understand better the flow a user might take. We linked buttons with pages, so when we pressed a certain button, a certain action would happen, or the user would see another page. This helped us see the functionality without any code and get feedback in the initial stage.
Development: With limited experience in web development, our team quickly learned HTML, CSS, and JavaScript to build MarketMate’s front end. We integrated Firebase for authentication and database management, ensuring secure account creation and storage. We also ensured that users had a valid .edu university email to prevent anonymous emails and multiple account creation, along with enforcing a strong password.
Collaboration was a key aspect of this project. We did regular team meetings, both in person and on Discord, to ensure everyone stayed aligned. My responsibilities spanned designing the interface, assisting with front-end development, and the integration of back-end functionalities.
Usability Testing
To ensure the app met user needs, we conducted usability tests with six student demographic participants. These students completed tasks like signing up, logging in, and navigating the web app, and gave us their feedback.
Key Findings:
The login page text was too small, making it difficult to read.
Users wanted a password visibility toggle for easier account creation.
Messaging functionality lacked clarity in distinguishing sent and unsent messages.
MarketMate Screenshots
Outcome
MarketMate successfully addressed the marketplace needs of university students, offering a secure and streamlined alternative to existing solutions. While the MVP differed slightly from our initial designs, it demonstrates the platform’s viability and potential for future development. Feedback from peers and professors affirmed its relevance and utility for the student community.
Future Enhancements
While the initial version of MarketMate successfully addressed core user needs, there’s significant potential to improve and expand the platform. Based on usability testing feedback and further brainstorming, we considered some key future enhancements:
Mobile App Development: To increase accessibility and user engagement, converting MarketMate into a mobile app would be a significant next step. A mobile app would allow users to take pictures, post listings, browse items, and communicate on the go, which is crucial for a student-focused platform. This would also open up the opportunity to use device-specific features like push notifications and location-based services.
Online Payment Integration: Currently, users must meet in person to exchange items for payment. Introducing a secure online payment system would streamline transactions, making it easier for users to buy and sell without the need for face-to-face meetings. This could involve integrating platforms like PayPal, Stripe, or Venmo to ensure safe and seamless payments.
Account Notifications and Email Confirmations: Adding automated email notifications for account creation, purchase confirmations, and important updates would improve user communication. This feature would also reinforce the platform’s security by confirming account authenticity and informing users about their activity. We also want to pair this with an app notification where users can open the app activity from the notification.
Enhanced Messaging System: Usability testing revealed that users found it difficult to distinguish between sent and unsent messages. Improving the messaging functionality by adding visual indicators (such as read receipts or message status icons) would enhance communication between buyers and sellers, making the experience more intuitive and efficient.
University Partnerships and Expansion: After successfully piloting the app at our university, the next step would be collaborating with other universities to promote adoption. This could involve presenting MarketMate as a recommended tool for campus marketplaces, helping the app grow into a broader network of student communities.