Designing With Web
Part 3 · Phase 1: Prototype


How to fill in this document?
Simply edit the index.html file and fill in everything that has the .todo class. You can remove the class bit by bit afterwards to make sure you're not missing anything (every missing bit will be colored).

By the way, "lorem ipsum" is just a dummy text used for text placeholders and testing layouts. You can learn more about it on loremipsum.io.

Group (group number goes here)

Add your name to the list and provide a link to the individual exploration that you did for Part 2.

Our group

Our subject

Our subject is (Reduce waste generation through prevention, reduction, recycling and reuse. ).
It comes from the United Nations' Sustainable Development Goal number (12), which is entitled "(Responsible consumption and production".

Our research question

RESEARCH QUESTION HERE


Project 1 · (GooDish

Context

When? Where? Who? Why? Explain the specific context of your project.

Over ⅓ of the food produced globally is wasted; in Europe, ​33 million people cannot afford a quality meal every second day. According to the United Nations Environment Programme (UNEP), 39% of food waste generated in 2019 came from food service and retail. That represents an annual loss of around 143 billion euros. In 2021, there are around 7.9 billion people in the world; by 2050, this number is expected to increase by 2 billion. That means more food needs to be produced and, if things remain the same, more will be wasted. Connectivity between individuals and organizations can start making the path towards a society where no one has to struggle with hunger.

Dolore commodi fugiat cum quidem quas accusamus ab hic, est reprehenderit, odio error adipisci similique provident aliquid. Laudantium recusandae obcaecati enim aut perferendis non, ad amet minus et, iste molestias?

Target + persona

For whom? Describe the users and beneficiaries of your project, and then suggest a quick persona (refer to Part 2 of the course for methodology tips).

We are targeting this project especially for large operators in the restaurant industry such as hotels, restaurants, grocery stores, and the same kinds of agents who are handling great amounts of food every day. An example of this is a coffee shop that didn’t sell all its croissants the day before and doesn’t want to throw them away; our proposal is to find charity associations willing to collect and distribute those croissants. With the help of our project, we can reduce the amount of food waste that is more than fine to be eaten, but not sold in the initial store. The surplus food will be taken from our partners to charities. This way the charity organizations can reduce their budget for food and put the leftover money to something else. Operators taking part in our project can benefit on a wide scale. They can participate in commonweal and in the process gain tax benefits as well. The amount of waste produced is walking hand-to-hand with the amount of taxes.

Persona

Service offered

What? How? Explain how your solution works, what it enables the user to do, and how is solves the initial issue.

Our project is both a mobile app and a website. Operators that are willing to give their leftover food to charity can join in our project by filling their company information to our database. After the operator is part of the project, it can inform if they have some leftover food that is still safe to eat, and they want to donate them. This way people who may not have money for food can have a meal and do not need to live with hunger. The project is

Features + user flow

Explain what features your project involves and hierarchize them from the most important one to the least. Remember: a feature is a verb + a noun, it describes an action that the user can do.

Then, for your first and most important feature (the key feature), write down and draw the user flow: what steps will the user have to go through, from the initial situation to the final situation? Again, refer to Part 2 of the course for methodological tips.

Features

User flow

(Add a drawing of the user flow for the key feature here) User flow

Illustrations

Find pictures that describe the universe around your service (context, users, places, technologies…). Don't try to illustrate the final service that you may have in mind but instead, its context. Basically, translate the keywords you used in the descriptions above to pictures.

Benchmark

List competitors or related projects, and describe how they relate or differentiate to your project.

References

Books, films, articles… list every reference that may be relevant regarding this project, and explain why.


Project 2 · (give your second project a name)

Context

When? Where? Who? Why? Explain the specific context of your project.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae at pariatur eos eum voluptas eaque animi cumque! Molestiae molestias velit numquam, incidunt! Blanditiis, cupiditate repellat qui eum molestias, temporibus! Qui! Incidunt harum expedita aperiam fugiat, quaerat corporis fugit quam praesentium, minus alias, repellat deleniti, dignissimos iure nulla vitae ullam voluptatum temporibus. Ipsa nam sint ullam odit quia vero fuga laboriosam.

Dolore commodi fugiat cum quidem quas accusamus ab hic, est reprehenderit, odio error adipisci similique provident aliquid. Laudantium recusandae obcaecati enim aut perferendis non, ad amet minus et, iste molestias?

Target + persona

For whom? Describe the users and beneficiaries of your project, and then suggest a quick persona (refer to Part 2 of the course for methodology tips).

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae at pariatur eos eum voluptas eaque animi cumque! Molestiae molestias velit numquam, incidunt! Blanditiis, cupiditate repellat qui eum molestias, temporibus! Qui! Incidunt harum expedita aperiam fugiat, quaerat corporis fugit quam praesentium, minus alias, repellat deleniti, dignissimos iure nulla vitae ullam voluptatum temporibus. Ipsa nam sint ullam odit quia vero fuga laboriosam.

Persona

Service offered

What? How? Explain how your solution works, what it enables the user to do, and how is solves the initial issue.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae at pariatur eos eum voluptas eaque animi cumque! Molestiae molestias velit numquam, incidunt! Blanditiis, cupiditate repellat qui eum molestias, temporibus! Qui! Incidunt harum expedita aperiam fugiat, quaerat corporis fugit quam praesentium, minus alias, repellat deleniti, dignissimos iure nulla vitae ullam voluptatum temporibus. Ipsa nam sint ullam odit quia vero fuga laboriosam.

Features + user flow

Explain what features your project involves and hierarchize them from the most important one to the least. Remember: a feature is a verb + a noun, it describes an action that the user can do.

Then, for your first and most important feature (the key feature), write down and draw the user flow: what steps will the user have to go through, from the initial situation to the final situation? Again, refer to Part 2 of the course for methodological tips.

Features

User flow

User flow

Illustrations

Find pictures that describe the universe around your service (context, users, places, technologies…). Don't try to illustrate the final service that you may have in mind but instead, its context. Basically, translate the keywords you used in the descriptions above to pictures.

Benchmark

List competitors or related projects, and describe how they relate or differentiate to your project.

References

Books, films, articles… list every reference that may be relevant regarding this project, and explain why.