Essbare Stadt

Overview

Essbare Stadt is a prototype app developed as part of a school project, inspired by the book of the same name. The app includes a seasonal filter and a city map feature that helps users locate ingredients locally.

I was responsible for implementing these core features, along with designing an interface to visualize full recipes and their steps, creating a cohesive and interactive user experience.

Meet the Users

To guide the design process effectively, I developed user personas that represent the diverse range of potential users for the food app. These personas were based on thorough research, including user interviews and surveys, which provided valuable insights into their needs, preferences, and behaviors.

Wireframes

With a clear plan in mind, I first mapped out the site structure to define the app’s main sections and navigation. After that, I sketched out wireframes for the key screens.

This step gave me a better picture of how the app should flow and feel, and it set a solid base for the detailed designs later on. It also made sure I included all the important elements for a smooth and engaging user experience.

Digital Wireframes

With the site structure and sketches in place, I moved on to digital wireframing in Figma. I refined each screen, focusing on layout, hierarchy, and simple interactions.

This step helped me build a clear visual flow and keep things consistent across the app, making the move into high-fidelity design much smoother.

Final Visuals / Prototype

To create a fluid and consistent user experience, I utilized components and Auto-layout features in Figma. These tools enabled me to adhere to the style guide effectively, ensuring that all elements maintained a cohesive look and feel throughout the prototype.

This approach not only streamlined the design process but also allowed for easy adjustments as I refined the user interface.

Project Takeaways

Even though it was only a school project, I am very satisfied with the end result and believe it could easily be implemented with a few small corrections.

This project significantly improved my Figma and prototyping skills, particularly in using components and Auto-layout.

Previous Project

art