MS6 - fedemelo/unitrade-wiki GitHub Wiki
Micro-sprint 6 Deliverable
Index
1. Value Proposition
Uniqueness of Solution
UniTrade stands out as the only marketplace solely focused on second-hand academic materials, with a strong commitment to reducing material waste. Unlike other platforms, UniTrade provides a specialized space for students to buy, sell, and rent materials specifically for their university coursework. Additionally, the app incorporates smart features that enhance the user experience, such as live campus maps to facilitate real-time exchanges, a recommendation system tailored to users’ majors and course work, and statistics on each product to help sellers and renters make informed decisions. These features, combined with its emphasis on sustainability, make UniTrade a unique solution in the marketplace.
Comparison with Existing Solutions
Compared to broader solutions like social media groups and general marketplaces like eBay, UniTrade provides a structured, efficient platform specifically designed for university students. While other platforms may offer a wide variety of products, none are dedicated solely to second-hand academic materials, nor do they focus on reducing waste as a core mission.
Additionally, UniTrade’s smart features, such as live location maps for exchanges, course-based material recommendations, and product statistics for sellers and renters, provide a user-centric experience that general platforms cannot match. Other marketplaces that involve a middleman often slow down transactions, whereas UniTrade enables direct, peer-to-peer exchanges, making the process faster and more reliable.
UniTrade also outshines platforms that impose higher fees or irrelevant ads by maintaining a fair 3% commission and using native ads that blend seamlessly into the user experience. This combination of efficiency, sustainability, and student-focused features makes UniTrade the superior choice for academic material exchanges.
2. UI/UX Design
Colour Palette and Rationale
The color palette used for our app is:
The explanation behind the selection of each color is presented below:
- #070304 (Almost Black): This very dark color offers a strong contrast and grounding effect. It will be used for text and other elements where clarity and readability are essential, ensuring usability and sharpness in design.
- #FFFFFF (White): White represents simplicity, cleanliness, and space. It provides a neutral backdrop, allowing the other colors to stand out. White ensures the design feels open and accessible, contributing to a minimalistic, clear user experience.
- #1D4E89 (Deep Blue): We used blue tones to convey trust, professionalism, and stability. This shade can give our app a solid, reliable, and dependable feel. It’s associated with corporate and educational environments which is perfect for a university marketplace.
- #FBD1A2 (Soft Peach): Light peach tones add warmth and approachability. This color brings a touch of softness, making the overall palette feel more inviting and friendly. It also contrasts nicely with the deep blue, balancing professionalism with a human touch.
- #F79256 (Vibrant Orange): Orange is an energetic and stimulating color, often linked to enthusiasm and creativity. This vibrant shade can help draw attention and create a lively, engaging atmosphere. It suggests action, movement, and optimism, making it great for call-to-action elements.
Fonts
In UniTrade, we chose two fonts: Urbanist and Inter. We decided to use only two sans-serif fonts to preserve the minimalistic style and ensure a clear, readable interface that maintains a modern, student-friendly appeal. Urbanist is used for headings and buttons, while Inter is used for paragraphs and lower hierarchy texts.
Urbanist
Urbanist is a modern, geometric sans-serif font. It was chosen because it balances design with readability and gives a modern, friendly and youthful aesthetic, which is a core purpose of our UI design.
Inter
Inter is a sans-serif font specifically designed for screen readability, making it an excellent choice for a mobile app like UniTrade. The font’s versatility and neutrality ensure that it blends seamlessly into various sections of the app without being overly decorative or distracting, aligning well with an academic and efficient marketplace.
Icons and Images
Icons and images play a crucial role in the UniTrade interface because they improve the speed and ease with which users can browse, search, and interact with the app, making the entire experience smoother and more efficient. We decided to use flat and outlined icons to convey simplicity. Here are some of our icons:
Category Icons
Represent different product or content categories in UniTrade
Navigation Icons
These help users navigate through the app’s different sections
Action Icons
These represent specific actions a user can take like search, heart, or add
Regarding the images, we use them to build trust, improve product understanding, and drive engagement. Some of the images used in our marketplace are:
Product images
Each product listing has high-quality images that show the item.
Banner Images
These visually engaging images help capture user attention and drive traffic to other sections.
UI Prototype for UniTrade
The UniTrade design emphasizes simplicity, clear navigation, and personalization, ensuring an intuitive and engaging experience for university students.
- Login and Create Account: Simple forms with essential fields (email, password) for quick access. Includes third-party login options (Google, Facebook) to streamline the process.
- Recommendations: Personalized onboarding where users choose categories of interest (e.g., Textbooks, Electronics) to tailor recommendations and improve user engagement.
- Home Page: Centralized search bar and quick access to popular categories. Includes personalized product recommendations and a clear bottom navigation bar for easy exploration.
- Categories Page: Filtered product view by categories like Math, Music, Science with additional filters for price, availability, etc. to simplify browsing.
- Product Detail View: Displays item name, size, description, and reviews. Clear calls to action (e.g., "Add to Cart", "See all reviews") to guide users.
- Buyer/Renter History: Users can track their purchases or rented items with key details like dates and prices for easy management of past transactions.
- Seller Dashboard: A view for sellers to manage product listings with details such as item status, price, and the ability to edit or promote listings.
- Product Upload: User-friendly upload process with image uploading, product details, and availability options for seamless listing creation.
Navigational Patterns
The following navigational patterns were selected to provide intuitive and direct access to core features, supporting a seamless user experience by minimizing clicks and making key actions readily available:
-
Bottom Tab Navigation: We were inspired by other apps to create a persistent bottom tab bar. This bar is used for core features like home, categories, profile, and notifications. It offers easy, one-tap access to key areas without needing to dig through menus. It aligns with mobile app best practices, keeping important features always accessible.
-
Search Bar at the Top: Positioned prominently on the home and category pages for users to find products effortlessly, it is a familiar and intuitive way of locating items
-
Filters: The category page includes horizontal tabs or segmented controls (e.g., Math, Science) for users to filter items, and we also added a filters view to add more ways to filter the items, like price, popularity and sorting.