MS7 - ISIS3510-Team14/Wiki GitHub Wiki

Now is the time we learn about:

  • Architecture
  • Programming designs and patterns
  • The usage of tools like Git Flow

Value Proposition

SustainU transforms recycling at Universidad de los Andes into an intuitive and engaging experience, empowering students to make informed and environmentally responsible choices. By providing real-time guidance on proper waste sorting and easy navigation to nearby recycling points, SustainU addresses the confusion and inefficiency that obstruct effective recycling on campus. Through its interactive and gamified approach, the app not only educates but also motivates the university community to embrace sustainable practices, leading to a significant reduction in environmental impact and fostering a culture of sustainability across the campus. SustainU offers a seamless, educational, and rewarding experience that aligns with the university's commitment to environmental stewardship.

SustainU's smart features:

Such as real-time guidance for waste sorting and the use of image recognition for recycling verification, creates value by ensuring accurate recycling practices and providing users with instant feedback. These features help minimize the common issue of improper disposal by giving clear instructions and reinforcing correct actions through verification, which increases trust in the system and accountability.

Context-Aware System (CAS) feature:

Add further value by leveraging campus-specific data, such as the locations of recycling bins, to offer personalized guidance based on the user's current position. This context-sensitive information makes the recycling process more efficient, reducing the effort required to find disposal points and encouraging users to recycle more frequently. Together, these smart and CAS features create a seamless, efficient, and effective recycling experience that directly supports the university's sustainability goals.

Prototype

Figma Mockup: https://www.figma.com/design/1OVY8HHFbzDbxInAdcJzBr/Recicle.me-%7C-Recycling-App-Layout-%7C-UX%2FUI-(Community)?node-id=4-3&t=O0NxDYxYXfutcGtR-1

Fonts:

  • Primary font: Montserrat
  • Second font: Body Base

Icons and images:

Navigation bar

Picture1

The icons in this navigation bar for the SustainU app are simple and intuitive, adhering to widely recognized symbols to ensure ease of use:

  • Home Icon: A traditional house symbol, representing the app's main screen or dashboard where users can navigate to see the main functionalities.
  • Map Icon: A pin marker, commonly used to symbolize maps or location-based features, which leads users to an integrated map showing the green points on campus.
  • Camera Icon: The camera symbol it is the feature for capturing images to check the user is in fact recycling.
  • Recycle Icon: The classic recycling symbol made of three arrows forming a triangle which gives educational content on what the user should recycle in each trashcan.
  • Scoreboard Icon: A podium with numbers 1, 2, and 3, representing the ranking features, linked to the leaderboard of who is recycling more on campus

Login Section

Picture2

The image contains two distinct logos:

  • Outlook Icon: This is the official logo for Microsoft's Outlook application, which features on the login page so the user can enter with their outlook email.

  • Universidad de los Andes Logo: The logo of Universidad de los Andes consists of a shield with a yellow background and a black outline.It is also show on the login page to enter with their email.

Recycle section

Picture3

This are the logo's show in the recycling section of the app. Each represents the following:

  • Paper: The icon is a simple outline of a paper boat or origami boat
  • Plastic: The icon is an outline of a water or soda bottle
  • Glass: The icon is an outline of a wine glass
  • Metal: The icon is an An outline of a soda or beverage can

The icons are simple and minimalist in design, using single-color outlines. The paper and glass icons are blue, while the plastic and metal icons are green and orange, respectively.

Picture7

These are standard waste containers typically used for curbside recycling.

  • Grey bin: Used for recycling paper as paper is most of the time thrown in the gray trash can
  • Blue bin: Used for recycling plastic, glass and metal.

Buttons

Picture5

  • Pin location: The first icon on the left is a stylized map pin or location marker. It consists of a large lime green circle with a smaller white circle inside it. It is used in the map section to locate the green recycling locations on campus.
  • Microphone: The middle icon is a representation of a microphone. It's depicted in a light gray color and has a simple, sleek design. It is used so the user instead of typing it can use the voice feature to search for a collection point.
  • Back arrow: The rightmost icon is a simple chevron or arrow pointing to the left. It's rendered in the same lime green color as the first icon. The chevron is formed by two lines meeting at a point, creating a "<" shape. It is used all over the app to return to the main section.

Navigational patterns:

SustainU follows a hierarchical navigation pattern as this design as this design allows users to move through different levels of information or features within the app in a structured manner (from higher concepts to more detailed ones). This model offers the user a clear and organized navigation flow, starting from broad categories such as the recycling features in the bottom of the app then drilling down into specific sections for more detailed content.

For example, it shows the button "See green points" and then, when the user clicks on it, it shows the view of the calendar with the streak points the user has acumulated per day. Then, they can return to the main page selecting the back button.

Colour palette and its rational:

The SustainU logo features a color palette with the following predominant tones:

  1. Light Blue (#129ED8): Used in the "S", this color symbolizes freshness, reliability, and calm, reflecting the focus on clean and sustainable solutions. Additionally, blue is commonly associated with technology, highlighting SustainU's digital platform.

  2. Coral Orange (#E66B4D): Also present in the "S", orange conveys energy, motivation, and action, encouraging users to actively engage in recycling. This color adds a sense of urgency and creativity to the project.

  3. Lime Green (#B1CC33): The green in the "U" and the upward arrow is the primary color linking the logo to the environment and sustainability. Lime green symbolizes growth, renewal, and ecological awareness, underscoring the app's purpose in promoting sustainable practices on campus.

The color palette reinforces SustainU’s mission by integrating colors that represent technology, the environment, and positive action. The use of blue, green, and orange ensures that the logo is attractive, dynamic, and aligned with the ecological theme. The three colors contrast well with each other, making the logo (and the app itself) readable and easily recognizable, facilitating its use in both the app interface and other visual communications.