Exploration / Concept
Search Bar: Search for your favorite websites or Google it
Wallet Transfer UI/UX: Move your NFTs between your wallets simply using drag and drop.
Achievement
What cool thing did you do?
- Animations for Search Bar (building on https://experiments.gg/experiments/14)
- Transfer Assets between Wallets (building on https://experiments.gg/experiments/8) - Hover effect for NFT Cards
Inspiration
What was the impetus for this exploration?
Search: When we had out first users try out our browser, the first thing they did was search. So we knew that experience had to be functional, inviting, and delightful. Last week, I implemented a search bar uses a list of popular domains for suggestions. If a domain isn’t on the list, users can still type the url, and if the what they entered isn’t a valid url, it will do a Google search. This week, I added better focus states like the hover state and loading animation to add delight and reliability.
Transferring Digital Assets: This was part of a larger exploration around transferring digital assets: one of the most common activities on the blockchain alongside connecting and signing.
Process
What were the primary challenges in making this work?
- In order to make those magical data transfers happen, I needed to rearchitect the project’s state management structure. I also learned how to use animation techniques in SwiftUI.
What did you learn that will help dub in the future?
- I learned how to design better data/state management for the browser
- Personal process: I learned to test out out the most animated, over the top design to prove that I can implement it. I then tone it down to create the most ideal experience.
Reflections / Next Steps
Is there anything you would’ve done differently?
- I need to set up better organization within my Testing Playground to be more modular. Is there anything that is still needing done?
- Autofill for search. I will do that at a later date.