-
-
Beginning Pages of our QuickVest App
QuickVest by Fidelity
Our team designed QuickVest as a streamlined investing experience for Fidelity, with a strong focus on accessibility, trust, and usability. Every screen was intentionally crafted to align with Fidelity’s standards while simplifying onboarding and reducing intimidation for new investors. Accessibility was a priority from the beginning. The color palette was carefully selected to be visually comfortable and inclusive, meeting the needs of users with color vision deficiencies and ensuring WCAG-compliant contrast throughout the app.
AI Integration Through a Custom Gemini Widget
One of the main technical challenges we encountered was that Figma does not support native integration with external AI services such as Google Gemini. In addition, available open-source widgets did not support the level of interaction needed for our prototype. To overcome this, our team developed a custom widget from scratch to enable Gemini integration directly within Figma. This widget is featured on the QuickVest AI page and serves as a proof of concept for intelligent financial guidance within an investment app. It is important to note that the widget functions only in Edit Mode; Figma does not allow widget interaction in Presenter View. The widget itself is the only part of the project that uses black-box AI. All other components, pages, and designs were created entirely by our team.
Technical Requirements and Setup
Because Figma is not a data storage platform, any information entered during this demonstration will not be saved. To run the Gemini widget independently: Use the Figma Desktop Application (widgets do not run in the browser version). Copy the widget code from our GitHub repository. Import the widget through Figma by navigating to Development → Import widget from manifest. Run the widget on the QuickVest AI page within Edit Mode. GitHub Repository: https://github.com/Monkeyboyandpandamix/WORKS---
Log in or sign up for Devpost to join the conversation.