An app for healthier breaks and nourishing meals - CatchEat
Duration of the project: 2 weeks | prototyping Type: individual work
Overview
Project background

In my environment, I observe many programmers who spend most of their working day in front of their laptop or PC and hardly move. They usually order their food online and have it delivered. This pattern repeats itself every day, five days a week. This inactivity can lead to health problems such as back pain and stomach problems, and their eyes suffer as well.

That's why I came up with the idea of an app that addresses this problem. The app allows users to order food and pick it up in person. This way, they could briefly get fresh air, exercise, and save on delivery time.

The app offers a variety of healthy meals from local restaurants. Users can easily place orders through the app, adjust the pickup time to fit their break, and enjoy high-quality food. Rewards could further motivate them to maintain healthy habits.

This app would not only improve physical health, but also quality of life. By addressing the challenges of the modern workday, it promotes a more balanced lifestyle.

Problem
  • Lack of movement: People who spend long hours in front of computers, such as programmers, researchers, designers, gamers, film editors, etc., often don't move enough while working, which can lead to back pain and eye strain.
  • Eating habits: This group often has unhealthy eating habits, ordering greasy meals and paying little attention to quality.
  • Fresh air and relaxation: While working, many people feel stressed and tired because of a lack of oxygen to the brain. Fresh air is essential for relaxation.
  • Unnecessary waste production: Orders generate a lot of packaging waste and contribute to environmental pollution.
The Goal
Designing an app that encourages people to move during their work breaks by personally picking up their ordered meals. This helps break the sedentary work style and promotes physical activity.
Responsibilities
User reasearch, Wire friming and visual design
Tools
Figma, Photoshop , Illustrator
The Process
My process will be different in different projects and will be determined by many factors such as the project goals, business needs, complexity of the problem, time, etc. Here I'll describe my process for solving this problem.
Profile
Discover
Generate and gather ideas plus look at other ideas
Profile
Define
Contarct point of view based on user need
Profile
Ideation
Brainstorming and come up with creative solutions
Profile
Design
Develop ideation designs
Profile
Prototype
Build a Prototype
Discover
User reaserch
I conducted three user interviews to validate our assumptions. The predominant feedback from these interviews highlighted that the website appeared overly chaotic and overwhelming. The individuals we interviewed corroborated our initial hypotheses.
Key Findings
  • DarkTheme app.
  • No minimum order.
  • A combination of ingredients.
  • Something to save time.
  • Filters for allergies and prohibited foods.
User flow

As the saying goes, a good start is half the battle. Before delving into the user interface design, I made sure to refine the features and user interaction flow.

The following feature flowcharts illustrate the content strategy and user journey within the app. Filtering features allow users to customize their desired food combinations. Login functionality helps users create a personalized profile and associate it with their preferences. The creation of these flowcharts serves as a foundation for streamlining developer tasks and ultimately creating high-fidelity designs. They also facilitate the early identification of potential problems in the product, contributing to a fast and efficient troubleshooting process.

Define
User Personas
I created a preliminary persona to foster a deeper understanding of their perspective after identifying the target audience.
Biography
Highly educated, currently employed full-time and earning a respectable salary
briefcase
Occupation

Software Developer

location
Location

Berlin, Germany

person
Age

26-35

home
Family

Single

Behavior
  • Busy schedule
  • Not much of a community
  • Nerd, Interested in new technology
  • Not much sports
Needs & Goals
  • Good quality food
  • Variety of food choice
  • Desire to locate nearest restaurant
  • Desire for physical activity
  • Personal food preferences
Ideation
Gathering Ideas
The inception of ideation involves sketching and wireframing, so I created numerous variations of sketches. Each sketch represented a different angle or perspective, allowing for a comprehensive exploration of potential ideas. This process not only sparked creativity but also provided a tangible foundation for the subsequent stages of development.
LOW FI
Design
moodboard
Bild
The Moodboard for CatchEat encapsulates the essence of the app - sleek and stylish, vibrant and cheerful, positive and happy, smooth and seamless. These elements give CatchEat a unique identity that brings energy and joy to users' everyday lives.
styleguide
colors
Bild
Grid
Bild
Mobil Grid
Width : Auto
Columns : 12
Margin : 70 Px
Gutter : 70 Px
typography
Heading
Heading Description
Inter Bold
Inter Bold
26px
18px
Heading Photo
Menu
Inter Bold
Inter Bold
20px
13px
Button
Caption Text
Inter Medium
Inter Medium
20px
16px
Body
Inter Regular
16px
Icons
homeIconP2arrowIconP2LunchIconP2zoomIconP2personIconP2LocationIconP2
Illustration
Illustration2P1
Illustration2P2
Illustration2P3
The usage of animated icons helps to make the page more interactive.
Buttons
Buttons-P2
Prototype
Splash and Onboarding
When users start the app, they will be guided through a sign-in or sign-up and onboarding process before proceeding to their default screen, the profile screen, which allows users to choose their preferred food filters. They also have the option to combine ingredients and find the best prices for their food. They can then arrange to pick up the food.
GalaxyPlus0
GalaxyPlus1
GalaxyPlus2
GalaxyPlus3
GalaxyPlus4
GalaxyPlus5
Profile and Filter Options
Here, the user lands in the profile. The person can change and save the filters according to their needs, and find which food suits them better, as well as which restaurants offer which food considering their filters.
GalaxyPlus6
GalaxyPlus7
GalaxyPlus8
GalaxyPlus9
GalaxyPlus10
Pick and Combine Ingredients
Users have the option of combining the ingredients themselves via the app and putting together the meal themselves from the start. They can then find out which restaurant is ready to prepare their individual order. In this case, only three main dishes are available for combination..
GalaxyPlus11
GalaxyPlus12
GalaxyPlus13
GalaxyPlus14
Select Restaurant and Navigate
After the compilation, the user can find out which restaurant is ready to prepare the food. The price and distance are displayed. Google Maps is used for navigation.
Map0
Map1
RouteBrechnet