Case Study

Kosher products web app

Project Summary

Stuttgart, a city in Germany, has consumers looking for kosher groceries, but no supermarket specialized in such products. Koscher in Stuttgart is a web app that helps find kosher groceries across the city.

The heart of the web app is a database of kosher products. We designed and developed an easy to use and sleek interface where users can browse the food categories or search for a specific product. The product page then shows in which store to find it.

Challenge

In many cities, there are grocery stores that cater to those following Jewish dietary laws and only sell groceries that are certified as kosher. However, consumers in other places that don’t have such a specialized store, have a harder time to buy the groceries they are looking for. They have to browse the supermarket shelves, hoping to find a product with a kosher certification.

We set out to build a tool that helps consumers know what to buy where.

Solution

Scribble evolution and gaze plot

Concept
Our app's goal is to simplify kosher grocery shopping in Stuttgart. We identified key functions, like a search field for quick product location, emphasizing the significance of a robust database. To enhance our listings, we collaborated with a WhatsApp group documenting kosher groceries in local supermarkets. Recognizing the need for a mobile-first design, we prioritized user convenience.

UI Design
Starting with a sketch, we organized the app's elements based on user priorities, placing the search function and product categories at the screen's center. Visual decisions, such as prominent headings and icons for intuitive understanding, were made to align with the app's mission.

Moodboard

Moodboard
Transitioning from a draft to a higher fidelity design, we used a moodboard to bring the app's skeleton to life. Fresh and friendly colors and icons were chosen, aligning with the app's mission statement.

User Feedback
Presenting our prototype to potential users, we received positive feedback, validating our design approach. With user interaction in mind, we proceeded to convert the screen design into a fully functional web app.

Front-end Development
The user interface was constructed primarily using HTML and CSS, incorporating web fonts and libraries like FontAwesome. Dynamic product pages were generated through PHP connected to a database. SEO-focused headline and page description choices were made, and extensive testing on various browsers and devices ensured optimal performance.

Results

During the development of this web app, we stayed in contact with programmers that were working on similar projects. We decided to join forces and use insights and aspects of Koscher in Stuttgart to further other projects, primarily because of their wider geographical appeal.

Nonetheless, this web app remains a great example of finding a smart digital solution to a problem a user group faces. The right idea can make a real difference to communities of all kinds.