# Design week 🎨 - Exam grade boost --- ##### Visual essay planning application  --- ## Working with our product owner + 📞 Seeking clarity on educational methods + 🔁 Iterative design process + ⬇️ Limiting scope + 🤝 Converging on feasibility + 👋 Handover and ownership --- ## Balancing implementation details and wishful design ⚖️ + Too much focus on implementation early on can interfere with product owner's vision and result in divergence from user needs 📲 + Ignoring implementation details at figma design stage is equally problematic, as the end product could diverge significantly from the prototype and the product owner's expectations 💫 --- ## Learning objectives + 🎯 **Adam**: React rendering and state management + 🎯 **Paolo**: Converting and translating a product owner's idea into an MVP, extend knowledge of testing and auth + 🎯 **Oli**: Learning styled components and UI libraries --- #### Planning ##### Expected 42 points  --- ## Synthesize Feedback  --- Our assumptions were challenged .. again!  --- * Specific user's needs * Accessibility and colours * Tutorial explaining the app --- * Interactive elements not clear enough   --- * Some useful elements missing * Overall good, clear, simple design 🙂 --- ### Figma How to use a mask 🎭 --- * Create an element to use as mask  --- * Place the picture above the mask * Make sure it is above the mask also in the layers panel   --- * Select the mask from the layers panel and click the mask icon in top navigation bar   --- ### Project Planning Focus on identifying the spikes research and possible blockers  --- * Simple, clear app * Accessibility * Mind map / spider diagram * Convert to PDF and MS DOC * Different versions for each section * Integrating a text editor * Side navigation menu for resources * Embedding video from Vimeo --- ## Tech stack  --- + react for the front end for reusing states across different components. + supabase for the backend since its free and has more flexibilty than elephantsql + next.js to connect them together and helps us to do server-side rendering which also saves us using useEffect a lot more. --- ## Key technical issues + Updating and saving state across many pages + Providing rich text formatting options + Exploring export options + Availabilty for using supabase in the long term --- + How to store data for each of the sections of the essay (localstorage or database?) + How to show videos for the website (link to the video url or serve it through the app?) + demo account to proper auth with next.js