Micro-sprint 7 Deliverable

Index

• Micro-sprint 7 Deliverable
  • Index
  • 1. Value Proposition
    • Uniqueness of Solution
    • Comparison with Existing Solutions
  • How do the smart features generate value
    • How do the CAS features generate value?
  • 2. UI/UX Design
    • Colour Palette and Rationale
    • Fonts
      • Urbanist
      • Inter
    • Icons and Images
      • Category Icons
      • Navigation Icons
      • Action Icons
      • Product images
      • Banner Images
    • UI Prototype for UniTrade
    • Navigational Patterns
    • Link to the Figma prototype

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.

How do the smart features generate value

The smart features are destined to generate value in the application. Specifically, the tailored and customized recommendations to the user based on their preferences and needs make UniTrade a better alternative than a generic marketplace. The fact that the app is centered in university students addresses a key pain point: the difficulty of finding second-hand materials, mostly when they are very career-specific and may be very weird outside the context of the university. Moreover, the integration of maps for real-time navigation to locations where both parties can hold the exchange provide significant value, as this significantly makes the trade-off easier and saves time for both. That feature also allows for near-instant exchange of materials, which is never the case on other alternatives, as one must either go to a physical store or wait for the delivery, which is unable to match the speed of just meeting someone on campus. Overall, the smart features add to the value because they are very convenient, they take a step further than the alternatives, and they make the application unique based on its specific objetive which is usefulness for university students.

How do the CAS features generate value?

Similarly, the application presents Context-Aware System (CAS) features, which take advantage of real-time data from the environment and automatically adapt the application based on that. The application has two main CAS features: the first is the dynamic light and dark mode, which automatically adjusts based on the brightness of the day. This feature ensures that the app adapts to the user’s environment, providing better visibility and comfort depending on lighting conditions. In bright daylight, the app switches to light mode to ensure readability, while in darker environments, it switches to dark mode to reduce eye strain. This enhances usability, particularly when students are using the app at different times of the day, such as late at night or during the day between classes, making the interface more comfortable and accessible.

The second CAS feature is the first is the map that guides users to exchange points. This feature adapts to the user’s context, utilizing the device’s GPS to determine their exact location and orientation. The app knows where the user is facing and updates the navigation in real-time as they turn, providing precise directions to the meeting point. This is particularly useful for students who may not be familiar with the campus layout or when they need to make quick exchanges, as it simplifies navigation, offers the best route and reduces the potential for confusion or delays.

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:

1. #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.
2. #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.
3. #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.
4. #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.
5. #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.

1. 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.

2. Recommendations: Personalized onboarding where users choose categories of interest (e.g., Textbooks, Electronics) to tailor recommendations and improve user engagement.

3. Home Page: Centralized search bar and quick access to popular categories. Includes personalized product recommendations and a clear bottom navigation bar for easy exploration.

4. Categories Page: Filtered product view by categories like Math, Music, Science with additional filters for price, availability, etc. to simplify browsing.

5. 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.

6. Buyer/Renter History: Users can track their purchases or rented items with key details like dates and prices for easy management of past transactions.

7. 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.

8. 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.

Link to the Figma prototype

Link