In this MS we will go over:

• Operating Systems
• Android and iOS programming models
• Lifecycle on mobile apps
• Design patterns

Value Proposition

SustainU revolutionizes the recycling landscape at Universidad de los Andes, offering a seamless, intuitive, and deeply engaging platform that empowers students and faculty to make environmentally responsible decisions effortlessly. With real-time guidance on accurate waste sorting and an integrated map feature that provides directions to the nearest recycling stations, SustainU eliminates the guesswork and inefficiencies that often hinder effective recycling. This ensures that every piece of waste is properly categorized, contributing directly to a more sustainable campus.

The app's gamified elements, such as challenges, leaderboards, and rewards, actively encourage participation, turning recycling into a fun, competitive, and communal activity. By integrating educational content that raises awareness about the environmental impact of everyday actions, SustainU inspires users to adopt more sustainable habits both on and off-campus. The app also enables users to track their recycling progress over time, fostering a sense of accomplishment and personal contribution to the university's sustainability goals.

In alignment with Universidad de los Andes' commitment to environmental goals, SustainU promotes a collective responsibility towards reducing waste and conserving resources. Its interactive features not only educate but also build a stronger sense of community, encouraging students and staff to collaborate in making the campus a greener, more eco-conscious space. SustainU doesn’t just facilitate recycling—it transforms it into an integral part of campus life, paving the way for a future where sustainability is second nature to every member of the university community.

UI/UX Design

Fonts:

• Primary font: Montserrat
• Second font: Body Base

Icons and images:

Navigation bar

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

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

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.

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

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

UI Prototype:

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

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.