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)

Our group

Our subject

Our subject is (paste your group subject here).
It comes from the United Nations' Sustainable Development Goal number (number goes here), which is entitled "(title of the goal goes here)".

Our research question

The research question we have formulated together is "(write down your group's research question here)". The two projects ideas below try to answer that question.

Project 1 · (give your first 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

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

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

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

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.