MS6 - Moviles20242-Grupo32/MovilesSprint1 GitHub Wiki

1. Value proposition

We aim to tackle food waste by targeting surplus food from restaurants, bakeries, and other food establishments during what we call "extreme hours." These are times when businesses, based on their demand patterns, know certain food items won't sell or ingredients are nearing expiration. To minimize waste and simplify the process for businesses, these items will be offered in Surprise Boxes at a 50% discount.

The key innovation is the Surprise Box format, where customers select the establishment but not the specific food items, ensuring an easy, low-effort process for the businesses while guaranteeing customers a variety of food. For example, a surprise box from an Italian restaurant could include a slice of pepperoni pizza, a piece of focaccia, and a bowl of salad.

This model eliminates food waste while providing affordable, high-quality meals to customers. With no delivery service, users pick up their orders, keeping costs low. The app’s user-friendly interface allows customers to easily search, purchase, and collect surplus food, offering secure payments and a convenient way to reduce both food waste and their meal costs.

Next, we describe the difference between our main competitors or related businesses and foodies:

Too Good To Go: Allows users to buy unsold food at the end of the day from restaurants and supermarkets at a reduced price.

Foodies: Operates in Latin America, being a pioneer in the market.

Karma: An app that allows users to buy surplus food from restaurants, cafés, and shops at reduced prices. Like Foodies, its focus is on reducing food waste.

Foodies offers a distinct experience by using surprise boxes, which simplifies logistics for establishments and allows users to receive a surprise, while still maintaining the advantage of a reduced price.

Olio: An app that connects neighbors and local businesses to share food and products that would otherwise go to waste.

Foodies is designed to work with commercial establishments and is more oriented towards purchasing food at reduced prices, rather than being a community platform for sharing food.

Flashfood: An app that allows users to buy food products at a discount in supermarkets before they reach their expiration date.

Foodies focuses on food establishments such as restaurants and bakeries, and the surprise box concept adds a level of convenience for establishments that prefer not to list specific items.

Phenix: Phenix works with supermarkets and restaurants to reduce food waste by selling unsold products at lower prices or donating them.

Foodies is more consumer-focused, catering to those looking to save money while enjoying quality food from restaurants and bakeries, rather than encompassing the donation aspect as well.

2. UI/UX

i) Color palette

Base:

Orange -> RGB(241, 153, 55)

Brown -> RGB(90, 50, 18)

Contrast:

Dark green -> RGB(49, 67, 65)

Opacity: Light brown -> RGB(143, 120, 111)

Explanation

Our app focuses on food and sustainability, so we carefully selected our color scheme to reflect these themes and enhance user experience.

Orange and Brown:

To align with the food-centric aspect of our app, we chose orange and brown as our base colors. Orange is widely recognized for its ability to stimulate appetite and increase hunger, which is why it is commonly used in food-related contexts. Brown, on the other hand, evokes a sense of warmth and comfort, often associated with wholesome, hearty foods. Together, these colors help to create a visual identity that resonates with our primary theme of food, engaging users in a way that feels both inviting and relevant.

Green:

Our app also integrates principles of the circular economy, which emphasizes sustainability and eco-friendly practices. To highlight this aspect, we incorporated green as a contrast color. Green is universally associated with nature and sustainability, making it an ideal choice to evoke feelings of environmental responsibility. By using green in our design, we aim to reinforce our commitment to reducing food waste and promoting sustainable practices.

Light Brown:

To manage visual hierarchy and focus, we employed light brown as a secondary color. This hue is a softer variation of our primary brown and is used for elements that are less prominent or require reduced visibility. Light brown provides a subtle contrast against the more dominant base colors, ensuring that key information remains prominent while secondary elements blend seamlessly into the background. This approach helps guide user attention efficiently, enhancing the overall usability of the app.

In summary, our color choices are designed to effectively communicate the dual focus of our app—food and sustainability—while also ensuring a user-friendly experience through thoughtful visual hierarchy and contrast.

ii) Fonts

We decided to use the default fonts of each operating system to ensure consistency and native feel in our app.

San Francisco is the default font for iOS, macOS, and watchOS. Introduced by Apple, it replaced Helvetica Neue and is designed to provide excellent readability and flexibility across various device sizes and screen resolutions. It is dynamic, adjusting text weight and spacing based on system settings and content size categories to ensure optimal readability. Additionally, it is versatile, supporting various weights and styles that allow for a range of typographic expressions.

On the other hand, Roboto is the default font for Android. Developed by Google, it was designed to offer a modern and clean appearance while maintaining legibility across different devices and screen sizes. Roboto is clean and modern, providing a straightforward and easily readable design with a neutral tone. It is also adaptive, supporting various weights and styles, making it suitable for diverse typographic needs in apps.

iii) Icons and images

Cuadro de textoIn terms of icons, we aimed to minimize text usage, making icons essential for navigation and functionality. In the home view, we chose icons for the cart and profile buttons that do not include filler elements, ensuring they stand out from the Smart feature button, which does include filler. We added a location symbol next to the user's location to avoid using text and clearly indicate the purpose of the displayed address. In the search bar, a magnifying glass icon helps users easily understand the text field's purpose. We used stars to symbolize product ratings and an add symbol to represent adding items to the cart. When an item has been added this symbol changes to a checkmark, so the user can remember it is already added ori t can be removed by clicking on it again. In the cart view, we included a left arrow to indicate a back button and plus/minus signs for quantity management. These widely recognized symbols are intuitive and help users understand their functions without needing additional explanations.

Regarding images, we are using them exclusively to represent the surprise box. We designed an image of a box with the brand's logo encapsulated within a circle to indicate that each box contains different products from a specific brand. The brand is prominently displayed to make this clear.

Surprise boxes image

iv) UI prototype

Link canva https://www.canva.com/design/DAGPXrDdWsc/dOrAXLe_o-G5wPf4DdTr6A/edit

Link figma https:https://www.figma.com/proto/0zHV4u6UxnaV1vlY1Ou8tk/Foodies?node-id=0-1&node-type=canvas&t=TwjlUEQtaex3HA6K-0&scaling=scale-down&content-scaling=fixed&starting-point-node-id=2%3A4

v) Navigational patterns

The main navigation pattern that we are going to use in the design of our app is the hierarchical one, as all the views depend on the superior ones as the user must log in or create an account to access the main page and the info portrayed on the cart depends on the actions that are done on the main page.

In the forward components we use a button on the top of the page to access the user profile and the cart, reverse components to return to the main page. In the login view we use a button to go to the main page or to go to the register view and a reverse component to go back to the log-in.