Duration
4 monthsYear
2024Responsibilities
ResearchDeliverables
PersonasThe 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.
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.
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.
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.