Kickoff Backoffice prototypes

[dspetrov]

Activities

• [x] Decide if Figma is the tool we wish to use
• [x] Research the best practices
• [x] Identify key features to prototype
• [x] Create high-fidelity prototypes of the key features (pages)
• [x] In case of Figma, utilize Next.js components available there

Deliverables

• [x] Document to summarize the tool we use and the reasons Short guide with the best practices, included in the above doc
• [x] High-fidelity prototypes of pages in Figma (or other tool if chosen)

Useful links

• https://ui.shadcn.com/docs/figma

[dspetrov]

• Why do we choose Figma?
• Figma prototype
• The prototype includes a high-fidelity Forms page (not a final version) and a draft version of Submissions page.
• There are several interactions between the pages.
• Good base to step on but the approach should involve first low-fidelity wireframes
• A proposed plan:
  • Prepare low-fidelity wireframes of all the initial pages we aim go have
  • Discuss them to reach an agreement
  • The above can have several iterations
  • Start creating the high-fidelity prototypes page by page