Why We’ve Designed a Leaderboard Section Into Dharma: a Feature Design Sprint Process

Andrei Ponivesc
Jun 11, 2020 · 6 min read

If you’re into the DeFi space there’s a big chance you’ve heard of Dharma. I’ve heard of it a few months ago and decided to give it a try. As a Product Designer I was impressed by the attention to design details the product has, it features a light and simple design, easy to use and a good user experience. The colours and the experience reminded me more of Snapchat than a DeFi product.

I’ve used it for a while and it made me understand that its simplicity and user experience, differentiates it from the other blockchain products out there. However we did see some opportunities that the team at Dharma could explore further. And because we’re strong believers in optimizing products to their full potential, we took some time and designed the specific feature we’ve envisioned for the product.

Step 1: Identifying the problem

It’s easy to understand what Dharma offers, they made a decent job of educating the users on that. You earn 0.9% APR on the money you hold into your account, you can withdraw it at any time, and the app makes it easy to send money to anyone on Twitter. You can see how they’ve focused on the convenience of holding crypto and creating their experience from that.

As users of the app, one section that didn’t seem to spark our interest was the activity screen, where the total interest generated is shown and also the recent transactions that users have made. It’s fun to watch and you can add different emojis to each transaction, which adds a social aspect to the experience, but it’s clearly not a point of delight in terms of making you interact with the app in any way.

Previous user experience of Dharma. Recent transactions on the right.

We wanted to replace this with something that adds a bigger social impact to the app and also something that would stimulate users to keep more crypto locked in their wallet.

Step 2: Potential opportunity

In a normal design sprint, we would of had a few user research sessions in oder to understand their pain points better, but because this was our own pain point we’ve decided to go on to the next step and identify potential solutions for the product based on the assumption we have.

We came up with a couple of concepts and had a conversation on which one would potentially bring more user engagement and increase the crypto amount in wallets.

At this stage we decided that we would remove the recent transactions screen from the main tab bar and replace it with a Leaderboard that would feature users that earn the most interest Daily, Monthly and All Time.

We then moved forward and designed the wireframes. Our design tool of choice is Figma.

Wireframing the new feature.

Step 3: Designing the screens

We spent a couple of hours brainstorming ideas on how the leaderboard should look like. We knew that it should keep the same feel the app offers now while making it attractive for users to be part of.

Design process in Figma.

Based on the above assumptions we then moved forward and designed the solution we’ve had in mind.

Design Solution

At this stage we also decided to change the main gradient the app was using to the other gradient which we’ve seen on the website. We also saw fit to include a few other design improvements.

We thought that the Deposit button was too big

Deposit button, before and after

And the interaction between the home screen and the Leaderboard should keep the navigation bar static.

Navigation bar, before and after

Step 4: Prototyping

Based on all the assumptions and insights we’ve had, we moved forward to creating an interactive prototype in order to show the different interactions between the design components. We wanted the experience at this stage to feel as realistic as possible so that users can share rich feedback that would address the full user experience.

Our screen animation tool of choice is Principle. We designed the screens in Figma and exported them to Principle. We knew that it would take us more than a few hours to come up with a detailed animation, but our team was up for the challenge.

Animation rich prototype

Step 5: User feedback

At this stage of the Design Sprint we would do a few user testing sessions with current users of the app and also new users, in order to validate the assumptions we have about the solution we are proposing, and iterate further. We‘ve made our own assumptions before we present the prototype to users in order to be validated at a later stage.

Our Feature Design Sprint tips:

Have the whole process written down before you start with the design sprint. Just like you would prepare all the ingredients before cooking, you need to think of all the small tasks and steps that go into the design process before you start designing.

Make sure you have your feature assumptions written down before. It becomes difficult to design something if you don’t know the potential impact your design will have on its users after it has been implemented. One way to understand if you’re solving a problem, think of the implications your design will have on its users, select the ones that you’re not sure of, and create assumptions based on them. Later you can test those assumptions by putting the prototype in front of users.

Have the right toolbox:

Tools become very important when running a remote Sprint. Don’t let technology get into the way of your creative mindset. See below a list of tools we use for our Design Sprints

Notion — the all in one tool, we use it to keep track of the daily Sprint Planning, Project Notes, User test sessions, etc.

Zoom — we use Zoom for user test sessions, you can use any tool you wish. We like Zoom because it makes it easy for users to share their phone screen while doing remote user test sessions.

Figma + Principle — UI design and Prototyping

Hey, hey…before you go! 🙆‍♀️🙆‍♂️

👏🏻 SPAM 50 CLAPS if you enjoyed this article.
👨‍🎨 Curious about what we do? Check our site https://ultimstudio.com/
💭 Comment your thoughts, feedback or what you had for breakfast.

If you want to see the prototype in action on your iOS device follow this link, add your email and we will send you an instructional email. No Spam!

Prototype in action

defidesign

One stop resource for DeFi user experience

defidesign

Read the latest articles on DeFi user experience design, Design Sprints, and best practices in the financial space.

Andrei Ponivesc

Written by

Designing, writing and pursuing my journey wherever it may take me.

defidesign

Read the latest articles on DeFi user experience design, Design Sprints, and best practices in the financial space.