[EPIC](design): Initial Design Document Implementation and Example App Rework

[edda]

Description

This epic focuses on the creation and application of an initial version of a design document that will serve as a reference guide for app developers using our design system. The design document will contain guidelines and UX patterns aimed at standardizing frontend app development.

The first validation of the document will involve reworking the existing example app to align with the new guidelines. Feedback on the design document’s clarity and ease of use will be gathered during this process, and the outcome will be both an improved example app and valuable insights for refining the design documentation.

Objectives:

Create an Initial Design Document:

Develop a comprehensive design document that includes guidelines, UX patterns, and best practices for app developers using the design system. This document will serve as a reference for standardizing the look and feel of frontend applications.

Rework the Example App:

Rework the existing example app, ensuring it follows the guidelines outlined in the design document. This will serve as a real-world test of how easily developers can adopt and implement the design system.

Gather and Incorporate Feedback:

Collect feedback from developers regarding the ease of use and clarity of the design documentation during the rework of the example app. This feedback will help identify areas of improvement for the documentation.

Tasks:

• [Task](design): Release an initial version of our planned design guidelines document #592
• [Task](exampleapp): Migrate Example App to TypeScript Using ts-migrate tool #593
• [Task](exampleapp): Rework the example app according to the new design guidelines #594
• Collect feedback from developers involved in the rework, focusing on the usability of the design document.
• Refine and update the design document based on the feedback received.

Acceptance Criteria:

• The initial design document is complete, containing clear guidelines and UX patterns.
• The example app has been fully reworked according to the guidelines in the design document.
• Feedback from developers is collected, focusing on the usability and clarity of the design document.
• A refined version of the design document is created based on developer feedback, improving clarity and ease of use.

[martawright]

Prototype live and ready to be shared for SAP users.

To access user needs to validate permission to access the prototype by logging in with SAP email address.

User can view file
User can add comments
https://www.figma.com/proto/dPqygpJx9EmHYeYVC3mZGU/Juno-Design-System-Documetation?page-id=0%3A50&node-id=0-544&node-type=frame&viewport=484%2C504%2C0.09&t=1S8RFJOV0cRiL1dQ-1&scaling=min-zoom&content-scaling=fixed