Back Home

DFlow Exchange

With the DFlow mobile app, we set out to revolutionize the trading experience for cryptocurrency enthusiasts, focusing on a streamlined, mobile-friendly approach. By analyzing several crypto exchanges, we identified an opportunity to blend traditional finance UI/UX elements with the ever-evolving needs of the crypto community. Our goal was to create an app that stood out in the crowded space of crypto trading platforms.

Role

Product Design Lead

Mockup of dflow trade screen

RESEARCH & INSIGHTS

Through extensive market analysis we identified the meme coin market – over 2k+ different tokens with a combined market cap of $50B – as the ideal entry point for DFlow's mobile app. Competitive analysis and community feedback led us to undercover two major pain points in this space. The first was a lack of any mobile-first trading interface for users and the second was the inefficiency & general uneasiness around creating a wallet for non-crypto-native users.

With this information we set out to design and develop an intuitive mobile app that captured the gamified nature of crypto-trading while focusing on an easy sign up and end-to-end purchase flow.

PILLAR 1

Easy Access

In the world of crypto there can be a bit of a learning curve when trying to establish an "account". Your wallet may not work with the given network, and if you’re a first-time user the concept of a wallet may seem a bit off-putting and confusing. In order to enable quick access to our app we partnered with Dynamic – an embedded wallet service. This allows users to open up the app and quickly create a wallet with their email address, similar to creating any kind of web2 account.

Dflow wireframes

Challenge

Switching to Dynamic from our previous wallet provider required us to facilitate fund transfers for existing users. This presented a significant technical and user experience challenge.

DFlow user flow of transferring funds

THE SOLUTION

We worked closely with Dynamic to brainstorm the easiest path for our users. A seamless transfer solution embedded in the account creation process allowed existing users to transfer funds in two clicks, while new users would not be prompted and thus not interrupted. The same process could be accessed later on from the Profile settings if needed.  This approach minimized friction and allowed us to onboard new and existing users quickly with minimal issues.

Dflow transfer designs

NOTE

Since launch we've successfully migrated the majority of existing users over to the new platform with hardly any issues. A handful of users reached out about getting back to the transfer process and we inserted a notification into the app to help guide users to the option in their profile.

PILLAR 2

Optimized Trading on Mobile

When working on concepts for the wires I analyzed modern fintech apps like Robinhood and Coinbase to identify design patterns that our users may recognize. Bold numerical interfaces, easy access to trading, and asset discoverability and curation seemed to be present in all major apps and helped shape what I felt was important in our own experience.

Dflow wireframes

CHALLENGE

Once we were able to test the end-to-end flow internally we realized we had a fairly large issue. Because the app aggregated prices through different exchanges the timing of a trade could be unpredictable – ranging from 5-30 seconds. Forcing our user to wait 30 seconds to confirm a trade was unacceptable, so we needed to create a way around it.

Diagram of dflow trade flow.

SOLUTION

We decided that instead of forcing the user to the order confirmation screen we’d take them back to the initial token list screen so that they could keep trading as the order processed in the background. It was really important to me that we didn’t pull the user out of the trade flow without context, so I came up with an idea to animate the order screen as it transformed into a smaller modal. In order to sell the idea to my team I created some quick wires and turned them into a prototype with our existing designs.

GROWTH

Moving Forward

This was a great fix for our issue, but it brought up a new question. Could we go faster?

Based on user feedback and market analysis we knew that faster trading = higher earnings potential for our users, and this offered us a chance to further differentiate ourselves in the market and potentially acquire new users looking to hit on the next trending token fast.

Dflow screens

QUICK BUY & SELL

With background trading set up, and a swipe-to-like UI already built out – we focused on adding a quick buy button into the mix. Users could now swipe to buy a token right from the trade page, and if they hadn't already configured these settings they'd be taken to the Quick Trade page to do so. Users could also swipe-to-sell from their portfolio page as well.

COMMUNITY

Gathering Feedback

For the first week we kept access to friends & family as well as a small group of dedicated Discord users. We opened the beta up incrementally and have now fully released it to the public.

We work with our community via an "office hours" channel. We use the space to understand their needs, identify pain points, and test new features with a select group.

One of the great things about this industry is the amount of involvement users want to have with any given project. It can be overwhelming when receiving feedback, but it's a really unique experience as a product designer to have testers who feel so invested in the company, have great experience with other products, and are excited to share their thoughts.

a screenshot of our office hours with the community on discord.

Design note

Outside the Box

I put this screenshot in below – not (just) because of my own ego – but because this app is completely outside my comfort zone in terms of visual aesthetic. The cyber/industrial look is directly inspired by the world of video games and the crypto community, and it's not something I'm used to working on. Every design element in the app was developed by myself & Kevin Liang (PM).

Eventually with enough scale we may need to tame down some of these aspects, but for now the community is really responding to it and I hope we always keep a piece of this ethos going forward.

A message from Kevin on slack about how a user likes the design.
mockup of dflow splash screen