Many complex products often present all features at once, including crypto wallets. Everything is right there, all the time, whether you need it or not.
We wanted to take a different approach where the fundamentals would be at your fingertips, but everything else would appear as it became most relevant to you.
We decided to focus on fluidity after observing how static transitions can disrupt the user’s sense of flow and orientation. Staticity can also leave a product feeling lifeless, which we didn’t want. A lifeless product feels like a dead product, and a dead product feels uncared for.
Family's dynamic tray system comprises components housed within trays that can effortlessly expand, contract, and adapt in response to a user’s actions. Trays can appear on the fly and function as a condensed version of the app, with a specific set of constraints and capabilities.
The tray system follows certain rules to function in a way that feels natural. Trays are initiated by the user by tapping buttons, icons, or opening push notifications. They can manifest either as standalone entities on top of any app content, or emerge from within other components like buttons.
To prevent any confusion during transitions, each subsequent tray is designed to vary in height. This makes the progression or change unmistakably clear. This constraint occasionally requires us to rewrite content or tweak the design of a tray slightly to make a transition apparent.
Every tray is equipped with a title that succinctly captures its function or contents, alongside an
icon. This icon serves a dual purpose: it allows users to dismiss the tray if it's the initial one shown, or navigate back through a sequence of trays that have been presented one-by-one.
Each tray displayed is typically dedicated to a singular piece of content — like educational text explaining a feature — or a primary action, such as completing a checklist before a transaction.
When deciding whether to implement a tray or full screen flow, we decided to utilise trays for transient actions that don't need to be permanently on display within the app.
This can be especially helpful for confirmation steps and warnings, which appear in the right place at the right time.
Trays can also function as the starting point for more elaborate flows that ultimately transition to a full screen format.
One advantage of leveraging trays over full screen flows is the preservation of context. Unlike full screen transitions that can displace users from where they just were, trays overlay content directly onto the current interface.
The compact nature of trays signals to users that each task is approachable. It encourages engagement without the intimidation of a full screen commitment.
Users are guided through actions with the reassurance that they're not veering off course, but rather diving deeper into their current context. This simplifies the user's journey and reinforces the fluidity and coherence of the overall experience.
Imagine seeing parts of a room through an open doorway. From a few metres away, you’re able to catch a glimpse of what’s inside. As you approach and enter, the space and its contents are gradually revealed.
Each action by the user makes the interface unfold and evolve, much like walking through a series of interconnected rooms. As a user, I get to see where I’m going as I go there. It’s this dynamic that allows Family to remain simple and keep complexity out of sight and out of mind until required.
Our second principle builds upon similar themes to our dynamic tray system and pushes the concept even further. It envisions the entire app as a constantly evolving space, where any element can theoretically transform into another, given there's a strong enough rationale for the transition.
Similar to our tray system, we aim for a sense of dimensionality throughout the app. Our goal is to create a coherent journey that users are able to follow easily. Every movement feels like a logical step forward to resemble what we experience in physical spaces.
For example, switching tabs in Family includes a flash of directional motion. If you tap on a tab on the left, the transition moves left, and vice versa for the right. This creates a subtle yet helpful sense of space and movement. We fly instead of teleport.
Let’s take the transformation of a chevron in a multi-step flow; something that would typically be static.
In Family, we saw an opportunity when transitioning between screens for a simple but effective animation — from an
to a
. This tiny detail, coupled with the broader view transition, clarifies the navigation action taken. Details such as this contribute to a sense of fluidity throughout the app and quickly compound over time.
1x
0.5x
A pet peeve of mine is when a component already visible on the screen unnecessarily duplicates itself during an animation.
If a component occupies a space and will persist in the next phase of the user's journey, it should remain consistent.
This concept of fluidity goes hand in hand with our dynamic tray system. We’re able to create interactions of trays morphing into full screen views, buttons gliding across trays, buttons morphing into trays and back again, and so on. Every interaction feeds into the next.
These interactions aren't easy to create, but the seamless transitions within Family are more than just technical achievements. They're a manifestation of our respect for the user's sense of space and movement within the app.
In contrast, when my banking app displays a glitchy animation while accessing my checking account, it erodes my trust. It makes me question whether the app truly understands what I'm trying to do or if it can execute my actions accurately.
With Family, the consistent, smooth interactions communicate a clear message: "I know exactly what you need — let me get that for you…"
Mastering delight is mastering selective emphasis. It’s about knowing where, when, and how to apply magical moments intentionally across a product.
We don’t intentionally diminish moments of delight in our less common features — we try to insert delight with varying degrees of ‘intensity’.
We leverage the element of surprise in a few places, such as on the QR code screen in Family. The feature is used just enough to make an easter egg placed here enjoyable rather than annoying. In this instance, the magical moment is hidden in plain sight. When the user taps on the QR code, it triggers a gentle ripple effect.
For features encountered less often, the opportunity to inject delight significantly enhances the user experience. For frequently used features, the value of adding further delight gradually diminishes.
While our frequently used features are always crafted to be inherently delightful, it's often the delight in the less utilised features that leave a more lasting impression.
No matter the context, the ‘specialness of a moment' generally decreases with repeated encounters. Eating your favourite candy will get progressively less enjoyable with each piece, etc.
(unless they are Nerds Gummy Clusters)
Let’s take a very commonly used feature as an example of where doing too much would quickly diminish potential delight.
As mentioned earlier, sending tokens is a core feature and something many users do daily. It’s therefore important for it to be efficient and enjoyable, without being overbearing.
Our approach here was to focus on the little things. In this case, the commas when inputting a number shift visually from place to place as the number is inputted.
When adding tokens or collectibles to the trash, they visually tumble into a skeuomorphic trash can.
Completing the action plays a satisfying sound effect.
Activating stealth mode is accompanied by a gentle shimmer effect when active. This effect signals that although your holdings' values are concealed, they continue to update discreetly in the background.
In all of these features, we're not just trying to entertain the user4. These moments are our way of valuing and rewarding the user's time and emotional investment in Family. They transform something mundane into something memorable.
The true value of Family lies in making every day interactions with the wallet a little easier, a little more seamless, and a lot more enjoyable. This philosophy shapes every aspect of the product.
Niche Internet