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.
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
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.
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.
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.
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.
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.
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.
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.
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
- 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:
- To change the text or background color, use this:
- Questions? Post up in our community.
<style>
.notion-toggle {
display: block !important;
}
</style>
<style>
:root {
--color-text-default: #fff !important;
--color-bg-default: #000 !important;
}
</style>