# Juicebox Frame Proposal ## Specs - A frame with which you can read general information about a Juicebox project and donate directly ### Observations/insights - Frames are very small, so they're hard to read. It'd be interesting to survey how many people actually enjoy reading e.g. in-line Paragraph articles. - What's worked best in my personal experience for longer form content for frames is a slides/ppt-like design - User experience becomes crucial for frames. - Careful attention should be put to the buttons. (We have a good UX designer in our team who can help us design it.) - In-app transactions are a really nice-to-have, and it's up for discussion how crucial they are. IMO the frame could also work with only project info, however it diminishes the experience substantially. Luckily, transaction support should be implemented soon: ![Screenshot 2024-02-26 at 20.27.34](https://hackmd.io/_uploads/S1UNLP92p.png) - The first frame should really call the attention - otherwise it can be overlooked quickly. Here we can use the buttons wisely, or a nice design for the front-page. - You can now input dynamic data on the cover frame, so we could put the amount raised and/or amount of people who contributed so-far in the first frame ## Requirements - Wait until Warpcast releases transaction support for frames ## Initial ideas: - All frames include a text on the top right that hints at clicking on the image to go to the juicebox project page - Cover frame with project PFP + project name + one-liner + dynamic data of amount raised + time before raise is over. Buttons direct to different "content categories" - 4 buttons + input field: 4 buttons + input field: `Donate (input the amount)` + `About` + `Activity` + `NFTs and Rewards` ![Screenshot 2024-03-03 at 20.18.32](https://hackmd.io/_uploads/HytzTSfap.png) - Follow up frames include info of the project. Here we should prioritise easy navigation and readability. - After clicking on "read more", this should be the order: 1. **About**: 1 paragraph in every frame (or would it be a good idea to use AI to summarise here?) - 4 buttons + input field: `Donate (input the amount)` + `Activity` + `<- prev page` + `next page ->` ![Screenshot 2024-03-03 at 20.19.08](https://hackmd.io/_uploads/By0V6SzTp.png) 2. **Activity**: 30 Days volume chart - 4 buttons + input field: `Donate (input the amount)` + `NFTs and Rewards` + `<- prev page` + `next page ->` ![Screenshot 2024-03-03 at 20.19.34](https://hackmd.io/_uploads/r1IU6rf66.png) 3. **NFTs and Rewards**: 1 NFT/reward per screen - 4 buttons + input field: `Donate (input the amount)` + `About` + `<- prev page` + `next page ->` ![Screenshot 2024-03-03 at 20.20.11](https://hackmd.io/_uploads/ryvuTHG6a.png) 4. **Last Page**: All the same, except "next page" changes to "Start over" ![Screenshot 2024-03-03 at 20.20.25](https://hackmd.io/_uploads/S1qY6Bzaa.png) ### Mock up Preview Just to have an idea of how it would look we made a quick higher fidelity mock-up of how the cover frame would look like. We used a Juicebox Project Page mobile screenshot, so note that it's only to get a better picture of the final result. ![mockup](https://hackmd.io/_uploads/BkQdtRmap.png)