Deepr

Deepr

Making DeFi Accessible with Deepr

Deepr wanted to provide a user-friendly and intuitive experience for users who may not have prior experience with DeFi protocols.

I took on the challenge, leading the design team to create a desktop and mobile compatible platform that makes it easy for new users to engage with DeFi.

image

Executive Summary

Inherently, risks with decentralised lending can be significant. We want to demystify these risks and make them more understandable to end-users. Deepr aims to establish itself as a leading platform, addressing the need for accessible, transparent, and secure decentralised financial services.

Our primary goal was a simple yet powerful user interface that clearly explained complex areas and made risk easy to spot and manage. By collaborating closely with Deepr team, we effectively meet these objectives to offer a streamlined, user-friendly experience in DeFi lending.

Goals

πŸ’‘

1

Simplify the DeFi lending process for users

πŸ’‘

2

Provide a secure and transparent platform

πŸ’‘

3

Minimise onboarding and new heuristics

πŸ’‘

4

Create an intuitive and appealing interface

πŸ’‘

5

Enable easy access to lending and borrowing services

πŸ’‘

6

Allow users to manage risk in a straightforward manner

image

My role

I oversaw and led the core product design, branding refresh, creative direction and UX direction. I oversaw and implemented a complete brand refresh to reflect a more contemporary audience. I was engaged stakeholders to ensuring that each element was consistent with their vision.

image

Exploration stages

As with any UX design process, our first step was competitor research and discovery. We identified pain points and usability issues in existing DeFi platforms, as well as best practices and innovative features. We shared our research with the Deepr team and identified opportunities for improvement. From there, we got to work.

Initial workshop and kickoff
Review and improve current brand
Perform competitor research
Implement wireframes and user flow design
UI Design and prototyping
Community validation and user testing

Brand sprint

Through two sprint workshops, we ideated around the core brand meaning – β€œStart with the Why”. I led workshop thinking to help focus the team and define the core aspects and meanings behind the concept. This consolidated thinking around the name Deepr, signifying liquidity and abundance and so the name was chosen by the team.

image

Brand refresh

We knew that a clean, identifiable and modern product would be critical to making DeFi more approachable to new users. With this in mind, we underwent a brand discovery process and refresh, including a brand style guide that kept the original ethos of the sonar signal. We presented a range of options that were liked by the team, with a final sonar design chosen.

image
image
image

dApp landing

We first outlined an MVP landing page for the alpha product, using a nautical theme and the illustrators were commissioned to provide 3d assets.

This is an important conversion point for users, so the benefits of using the platform need to be very clear. We optimised the core value propositions of the dApp in an easy to understand layout.

image
image

Glass UI

For look & feel, we proposed a 'glass UI' approach for the interface for a cutting-edge aesthetic. By incorporating slight transparency and texture, the UI achieved a sense of depth and premium quality.

We then developed the core dApp screens, such as logged in/out views, error states, hints, and documentation. Our primary goal was to eliminate the need for complex heuristics or onboarding, allowing users to explore the platform intuitively.

Consequently, we designed our desktop UI to prioritise ease of use and accessibility, providing clear visual cues and guidance for new users throughout the process.

image
image
image

Lighthouse

We also created an entirely new concept for users to understand the risk of their investment being liquidated, which I proposed as β€œLighthouse”. Lighthouse changes state depending on the level of risk, making it easy for users to access and understand. This feature has not been developed as a concept by anyone else in such a user-friendly manner, and we're confident that it will make managing DeFi risk much more attainable for our users.

image
image

Mobile

We didn't stop at desktop. We took all of the above thinking and made it highly usable on mobile. This encourages wider adoption and engagement, particularly in Africa, whereby interest is high and mobile usage is primary.

Unusually for DeFi platforms, that tend to have sub-optimal mobile experience, we tackled the challenge by streamlining the experience and using an adaptive approach on tables and large data display.

image
image

Impact

The platform is currently in a testing phase.

Within the first 7 days over 10,000 QA testers had interacted and provided lending on the platform. The feedback was overwhelmingly positive.

Our collaboration with Deepr led to the creation of an innovative DeFi lending platform that simplified the lending and borrowing process for users in a complex DeFi lending space.

We're proud to have created a product that makes DeFi more accessible and user-friendly for all, and we're excited to continue iterating and improving based on user feedback.

Check out the new Deepr platform

Outcomes

πŸ’‘

1

User-friendly DeFi lending platform

πŸ’‘

2

Seamless blockchain integration

πŸ’‘

3

Enhanced security features

πŸ’‘

4

Streamlined lending and borrowing process

πŸ’‘

5

Responsive and visually appealing design

πŸ’‘

6

Positive user feedback and increased adoption

Recent Projects

Reach me through LinkedIn or Twitter

β€£
Notes
  • Both quote blocks for the navbar & footer are global blocks. Edit the content of the ones on the main page, and that will update the rest of them throughout your site.
  • The font used is Inter. Select it from your Super Options page. Other fonts that can work well with this template are Epilogue, Public Sans, and Space Grotesk.
  • Notion toggles are hidden by default. To unhide them, paste the CSS below to the bottom of your snippet injection box in your Super site settings:
  • <style>
      .notion-toggle {
        display: block !important;
      }
    </style>
  • To change the text or background color, use this:
  • <style>
    	:root {
    	  --color-text-default: #fff !important;
    		--color-bg-default: #000 !important;
    	}
    </style>
    Change #fff or #000 to any colors you'd like
  • Questions? Post up in our community.