Hero

Loop helps users find locally sourced food substitutes through effortless recipe scanning, encouraging conscious shopping and a sustainable mindset.

Duration

4 months

Year

2024

Responsibilities

Research
UX/UI Design
User Testing
Visual Identity

Deliverables

Personas
User Flow
Wireframes
Prototype
Loop
Loop

The Opportunity

Changing people's habits

During my exchange in Germany, I had the opportunity to immerse myself in the UX and UI design process. As part of a User Interface Design course, we were divided into teams and given a brief to solve. Through the design process — researching, brainstorming, prototyping, user testing, iteration, and refinement — we developed Loop, your personal shopper for locally sourced food options.

Why should we shop local?

Local shopping means buying goods and services from businesses within your community rather than large national or international chains. Supporting local businesses boosts the economy by keeping money circulating within the community, which strengthens small businesses and creates more job opportunities. It is also better for the environment, as shorter travel distances reduce emissions, packaging, and the need for pesticides in farming and production. As a result, locally produced goods are often fresher and healthier for consumers. By choosing to shop locally, we not only support the economy but also contribute to a more sustainable and healthier world.

Hero

Final Prototype

Focusing on core functions

The image above shows the MVP of our product, illustrating one of the main user flows in the app. After several iterations and user feedback, we decided to narrow our solution to focus solely on food, ensuring a clearer and more streamlined experience for our users. Loop helps users find local substitutes for food products through effortless recipe scanning.

The User Flow

Imagine you've found a recipe you want to cook for dinner tonight. You open Loop and tap "Scan a Recipe" or select the scanner icon in the navigation bar. Depending on whether you have the recipe saved digitally or in front of you, you can either upload it or take a picture directly. Loop then scans the ingredients and presents a list, allowing you to edit the details. Once you're satisfied, the app takes you to the map view, where nearby markets and grocery stores are listed with local substitutes for your ingredients. The store with the most matches at the best price appears at the top of the list. If you're only looking for a specific ingredient, you can use the search field or navigate directly to the map through the navbar. Loop will display results for that particular ingredient, and you can adjust the search radius to find options within your preferred distance. On the home screen, you can also access your previously saved shopping lists, allowing you to reuse them for frequently made recipes.

Tale
Tale

The Visual Identity

Loop's visual identity is designed to reflect their ethos. The goal was to convey a sense of health, friendliness and sustainability. These words were in the back of our minds when choosing everything from colours and fonts to illustrations.

Logotype

The name Loop stands for Local Opportunities. Shopping locally creates a closed loop, keeping money circulating within the community to boost jobs, resources, and economic resilience. This concept is reflected in the logo, where I have connected two loops that form a leaf in the middle. The two loops can also be seen as plates, symbolizing the core function of our idea—finding local food alternatives. The leaf in the center represents health and sustainability, key benefits of a community where people consume mindfully.

Colors

The color palette is inspired by nature, as well as vegetables and fruits, to evoke a sense of health and well-being. The background features a soft, warm off-white called Baylies Beige, creating a gentle and welcoming impression. For text, Coffee Brown and Pfeffi Green are used to provide both contrast and harmony. To add variation and vibrant accents, Carrot Orange and Poppy Pink bring pops of color.

Tale
Tale

Typography

Averia Serif Libre is used for headlines, giving a warm and inviting feel. For clarity and smaller text, Merriweather Sans is used.

Illustrations

To enhance the sense of community, we have incorporated illustrations, primarily used for decoration, adding a personal touch that strengthens the brand identity. Additionally, rounded shapes are widely used for buttons and text elements, reinforcing the soft and welcoming impression.