4. Prj 1: Vision and Prototypes

In this lab, you take the next step in your app project: turning your idea into a visual and interactive prototype.

• Tasks marked with are individual assignments.
• Tasks labeled are team-based.
• Remember, each team member must contribute to the tasks in every lab.

4.1 Preparation

Start by asking yourself

• What problem do you want to solve?
• How could your project contribute to the UN Sustainable Development Goals?

Spend time understanding the problem and your users through

• Watch people in their natural environment
• Note their frustrations and workarounds
• Document what they say vs. what they do
• Look for emotional reactions and pain points
• When does the problem occur?
• What triggers frustration?
• What current solutions do they use?
• What would make their day easier?

Write a clear, inspiring vision statement in 1-2 sentences that captures your project's ultimate impact and its connection to sustainable development.

• Register for FlutterFlow with your stud-account and apply for edu license to be able to work together on one project.
• Add your project vision to the README.md file in your team repository.
• Prepare a short elevator pitch as a team (1-2 minutes).
• Read and understand
  • git
  • scrum
  • communication
• Create a paper prototype showing the complete application flow.

4.2 During the Lab

• We discuss your questions.
• You pitch your projects.
• You evaluate your paper prototypes.
• You finalize your paper prototypes.
• Clone your repository. Familiarize yourself with Markdown, make sure the Docker container runs locally on your machine, and that you can test the documentation locally.
• You define first issues applying the INVEST priciple.
• You define the first milestone.

4.3 After the Lab

• Define issues, project board and milestones in gitlab.

• Explore Figma, read, understand and use

  • Frames
  • layout grid
  • styles
  • components

  • click prototype

  • Design a primary button component and a card component,

  • Use both components on a sample screen.

• Create a click prototype in Figma.

• Start with the documentation of your project
  • add your paper prototypes, tasks and findings of your paper prototype
  • add a screenshot of your figma click prototype
  • add a screenshot of your Figma components
• Create a project in FlutterFlow and add all team members.
• Prepare the next lab.