Realization
(see @Pavan’s post for the current status of our wallet component design)
TL;DR: we made a bunch of progress in Figma and then when we translated it to a tangible prototype, we found quite a few quirks with our initial wallet component designs so we iterated a bit and now it’s getting even better :)
Process
For the past few days, I’ve been focused on testing and improving some of the wallet component designs from my post last week. While Pavan has been running some rapid UX prototyping in Figma, I’ve been rapidly prototyping key components of the Figma designs in Swift to reality check our design decisions.
Together, Pavan and I have learned a ton about what will work, what won’t work, and what might work when translated from Figma to the actual Dub browser. While this translation process might seem mundane, making our design prototypes more tangible in code has helped us greatly in fine-tuning sizing, weight, opacity, and interaction patterns.
One of the major chnages exploring a slightly larger wallet component. While the lil’ wallet looks great zoomed in at 300% on Figma, it was a wee bit wee in our actual prototype. Also, the addition of the wallet switcher on the left-hand side of the wallet took away valuable width from the rest of the wallet component. Thus, I explored expanding the wallet component to ~320px wide and 160px tall (4 base units). While it’s technically four units tall, the design with the seperated display and button rows only has three rows. This break subtle break from the sidebar grid that we otherwise hold quite strongly to makes the wallet component look even more stunning and further elevates the wallet component to the foreground of the Dub experience.
Now, I don’t know that we’ll stick to the 320px width since that’ll mean the entire sidebar will take up quite a bit of horizontal screen real estate - but the generally larger wallet component is quite exciting to me and I’m amped to continue iterating there.
Next Steps
Just Dub It
I only have one goal next week - to release a new version of Dub. At this point, I can’t even recall what version number we’re supposed to be on. That’s not great.
While our time spent both exploring and improving Dub at the core (see Anupam’s post this week) has set us up for unlimited fun with future prototype, it has taken what feels like forever (really just a few weeks) to get to a spot where we can release a stable update to Dub.
Anupam and I will collaborate closely to bring the new backend to fruition through a new frontend (based on the new designs that Pavan has been pushing forward).