Sanel Selimovic

Back to home

SmartDeFi

SmartDeFi

Building a DeFi App for a crypto startup

Building a DeFi App for a crypto startup

Building a DeFi App for a crypto startup

tldr

tldr

SmartDeFi leverages the robust Ethereum blockchain to forge a cutting-edge Decentralized Finance (DeFi) platform, meticulously designed for investors aiming to diversify their portfolios with cryptocurrency. My engagement with SmartDeFi centered on enhancing the user experience (UX) by meticulously mapping out the user journey and establishing a cohesive design system.

I spearheaded the development of a scalable component library in Figma, complete with versatile variants tailored for seamless integration. This comprehensive design toolkit was meticulously documented to streamline collaboration with the development team, ensuring a unified vision from concept to execution.

Project Date

2022

Project Type

Android + iOS

Client

SmartDeFi

my role

my role

I had the privilege of partnering with the visionary co-founders of a pioneering Decentralized Finance (DeFi) application. Tasked with the crucial role of bringing their innovative vision to fruition, my responsibilities were multi-faceted and centered around user-centric design principles. I led the charge in articulating the user experience (UX) journey, meticulously crafting intuitive UI assets, and developing interactive prototypes that served as a blueprint for our user engagement strategy. A pivotal part of my role also involved conducting rigorous user testing sessions. These were instrumental in refining our approach, ensuring our design solutions not only met but exceeded user expectations, fostering an intuitive, engaging, and seamless financial platform experience.

challenge

challenge

User-Friendly Fund Selection: Design an intuitive process for users to easily browse, choose, and invest in different DETFs, ensuring a smooth onboarding experience.

Secure Transactions: Design a secure and user-friendly transaction flow that instills confidence in users to invest their funds, integrating biometric authentication for added security.

Portfolio Management: Develop a dashboard that allows users to track their investments, view their portfolio's performance, and make informed decisions.

In the fast-evolving DeFi sector, SmartDeFi aimed to simplify the technology for everyday investors. Given that 73% of our target users were on iOS, our initial focus was an intuitive iPhone app. The goal was twofold: ensure every user could easily sign up and fund their account, and convert at least 30% of them into recurring investors. This demanded a user-friendly design that minimized entry barriers and encouraged ongoing engagement.

methods

methods

User Testing

Design Handoff

Customer Interviews

Design System

UI & UX Design

Interactive Prototyping

project timeline

project timeline

This figure presents an overview of the project's lifecycle, illustrating the phased approach from initial market research through to the development stage. It encapsulates the meticulous process undertaken to ensure that each step, from wireframing to UI design and the establishment of a style guide, is strategically aligned with our overarching design and development goals. This visualization serves as a roadmap, guiding our project’s journey towards a cohesive and impactful user experience.

information architecture

information architecture

The creation of the Information Architecture (IA) was a foundational step in the design process for the SmartDeFi app, serving as a strategic blueprint that guided our design thinking. By meticulously mapping out the app's structure, we were able to visualize and plan the user journey, ensuring a seamless and intuitive navigation experience. This IA enabled us to identify key user touchpoints and prioritize content, leading to informed decisions about layout, hierarchy, and interaction design. Ultimately, the IA acted as a critical communication tool, aligning the project team around a shared understanding of the app's organization and flow, which was instrumental in achieving a user-centered design approach.

Midnight Eclipse

Communicates sophistication, elegance, and a sense of formality.

Honeyed Ember

Communicates warmth, and a sense of approachability. It often conveys a feeling of security and stability.

wireframing

wireframing

In the initial stages of the SmartDeFi project, I embarked on creating monochromatic wireframes. This approach was pivotal in accurately capturing the essential business requirements for the dashboard, ensuring that foundational elements like total portfolio value, year-to-date growth, customer’s buying power, and summaries of the Digital Exchange-Traded Funds (DETF’s) were clearly defined and logically structured. These wireframes served as the blueprint for our design journey, laying the groundwork for a user interface that was both intuitive and informative.

visual hierarchy and data

visual hierarchy and data

With the wireframes in place, my focus shifted towards optimizing the visual hierarchy within the dashboard. It was crucial that the most important data points, such as total portfolio value and growth metrics, were given prominence to draw immediate user attention. Secondary and tertiary information was then scaled to maintain visual balance, ensuring a cohesive and user-friendly presentation of data. This deliberate structuring of information not only enhanced the dashboard’s aesthetic appeal but also its functional clarity.

monochromatic sophistication

monochromatic sophistication

Aligning with the founders' vision for a sophisticated user interface, I opted for a monochromatic theme for all primary buttons and Calls-to-Action (CTAs). This design choice was a strategic departure from the prevalent trend of bright colors and gradients in the competitive landscape, setting SmartDeFi apart as a platform of elegance and distinction. The monochromatic theme was not just a stylistic preference but a reflection of the brand’s identity, contributing to a consistent and memorable user experience.

8-point grid

8-point grid

The adoption of an 8-point grid system was a critical yet understated aspect of our design strategy. This system provided a structured framework for the creation of UI components and variants, including light and dark modes, ensuring uniformity across the application. By embedding this grid system into our design process, we were able to achieve a level of consistency and precision that facilitated the seamless integration of the design work by the engineering team. This foundational consistency was instrumental in building a scalable and harmonious design system.

components

components

This visual showcase features key elements like buttons, input fields, and information cards, each meticulously designed to enhance usability and maintain brand consistency across the platform.

final assets

final assets

results

results

The SmartDeFi project was an opportunity to apply my fintech experience within the cryptocurrency sector. Leveraging previous insights on user onboarding and data collection, I adapted these strategies for DeFi. My deliverables included a detailed Figma file with UI components and variants for both light and dark modes, anchored by an 8-point grid system. This comprehensive design package facilitated the app's development by the engineering team in early 2022, enhancing the efficiency of design implementation.

Post-handoff, I continued to offer support, contributing to the app’s progression towards launch. This ongoing involvement reflects the project's collaborative spirit and the practical impact of the design work.

See this project in Figma

See this project in Figma

Open Figma

Rob Cardwell

UX Design Lead

Sanel shows initiative and self-direction, being able to manage his time against multiple concurrent projects with varying timelines and priorities. He demonstrated the ability to research problems within academic and professional sources to deliver improved solutions. He is open to, and is quick to grasp new techniques, protocols and technology for user interface, human factors and information architecture projects.

I'd love to hear from you!

EMAIL

contact@sanel.design

CALL

339-203-3268

© 2024 Sanel Selimovic

¿Why is a raven like a writing desk?