Designing Market's Landing Page

‍

Back in 2021, crypto was 290M users strong globally and DeFi only 3.6M users. Although faith in blockchain tech wasn't widely strong, the optimism and vision of two builders, Daksh and Rahul, were stronger with Market.

On the other end of the chain, Spacekayak was starting to break into the web3 design scene that carried seemingly endless opportunities and growing creative challenges, something we love to take head-on. The coming together of the two entities focused on sprouting roots in web3 was inevitable, and the rest is history.

Market became one of Spacekayak’s first expeditions on the blockchain and our early contribution to the expansible space of web3 design.

Disclaimer: The purpose of this case study is solely to showcase our work for Market as it operated in February 2022. It does not represent the current working of the product, which has undergone modifications over time. For the most up-to-date information, please refer to the Market Docs.

What is Market?

Market is a cutting-edge multi-chain lending and borrowing DeFi dApp that allows permissionless pool creation by leveraging assets in isolated markets, making it easier to earn yield.

In this case study, we’ll demonstrate the process of crafting the landing page for Market. Before diving in, here’s a sneak peek of the final visual design of the landing page.

‍

Crafting good UX is a two-way street — it's important to listen to the community and users, build trust and test your ideas, but so is creating a strong creative direction.

‍

Designing a successful DeFi landing page requires understanding your DApp and target audience, gaining a deep understanding of DeFi, fostering trust, and striking a balance between psychology and intuition. Let us take you through how we achieved it for Market.

Building Trust Is Key to Building a Community

DeFi offers the opportunity for individuals to utilize crypto assets and conduct financial transactions without intermediaries. However, establishing trust, ensuring financial security, and instilling confidence in the product's legitimacy are challenges that must be addressed. Building this trust is the key to ultimately driving the adoption and acceptance of DeFi among users and helping build a community-centric product.

With Trust, Community, and Accessibility as our north star, we began crafting Market’s landing page.

‍

Studying the Existing Landing Page

We kicked things off by evaluating Market’s existing landing page and examining the areas of improvement, which enabled us to develop a research strategy that could result in an optimal outcome. This was done in collaboration with Market team also to address their requirements and look at Market from their perspective.

🎯 The goal: In-depth evaluation of the page for an early-stage process of pointing out concerns and sections that need tweaking.

Some concerns we noticed:

1. No detailed communication with the users regarding the DApp's working.
   ‍
2. Newer pools were not included with an actionable route for direct navigation.
   ‍
3. Lack of a roadmap that gives users a view of the product’s expected features and long-term goals to make informed decisions about investing their time and resources in the product.
   ‍
4. Missing data visualization, which is crucial to highlight the platform's key features and performance metrics and establish social proof and platform credibility.
   ‍
5. The multi-chain feature of the platform was not explicitly mentioned anywhere.
   ‍
6. Lack of an investor section that emphasizes the platform’s reliability and fosters trust among users.
   ‍

🎯 Tools Used: FigJam
⌛ Time taken: 2 design huddles (2 hrs each)

In-Depth Design Audit and Heuristic Evaluation

We conducted a thorough review of the landing page and documented our observations in a Notion document. By using a heuristic model, we were able to assess and rank the design challenges encountered. This helped us prioritize and effectively address the design issues.

‍

🎯 Tools Used: Notion

To tackle these concerns, we had to understand the Market team and user perspectives and identify typical DeFi patterns before diving into the design.

Digging Into the DeFi Rabbit Hole

The DeFi rabbit hole is deep and equally resourceful, and who doesn't love a good dig? For designing a DeFi landing page, an in-depth understanding of products in this space was crucial to gain insights into what works best, understanding user behaviour, seeking inspiration and finding room for refinements. Since Market is a community-centric product, we also wanted to analyze the feedback of daily active DApp users, community members, and contributors.

🎯 The goal: Research similar DeFi platforms to find interesting design patterns. Collaborate with the users and community to evaluate user experience and develop creative solutions to address their concerns.

1. Clarity Through Conversations

“Who are we designing for?” is inarguably the most important design question which requires designers to comprehend the whole user base. Community is the core of web3 projects, so we wanted to incorporate the perspective of Market’s community by gathering their feedback.

🎯 Goal: Gather qualitative user insights through 1:1 interviews and Discord channel discussions.
🏆 Rewards for users: Secret token drop to wallets of the top participants

Through Market’s Feedback and FAQ channels, we collected data on difficulties experienced by users while interacting with Market, particularly during onboarding and engagement with the landing page, which was paired with interactive user interviews. Additionally, we collaborated with the community manager to contribute their experience as a primary point of contact for community members.

The questions we asked in this user-listening experiment for Landing page-specific insights

‍

The data gathered from the Discord feedback and FAQ channels were analyzed and organized in a manner conducive to informing and guiding future research and design decisions.

2. Secondary Research & Analysis

Researching various DeFi landing pages was a great way to identify common design patterns. This helped us to settle on creating foundational principles we needed to consider in the design process.

‍a. Curating Inspiration‍

We started by compiling a notion document that included various DeFi platforms. We focused on not bloating our initial list with many ideas to avoid redundancy and make a solid foundation for further research.

b. Co-active Moodboard Exercise‍

We started organizing the landing pages of selected DeFi platforms on a FigJam file which served as a mood board for the design sprint. The process included curating 55+ landing page screen captures on a single Figma file which we started evaluating with Market’s founders in co-active sessions.

c. Observing Interesting Design Patterns

We noted some interesting design patterns among over 55+ landing pages in the process of gathering inspiration and picking out necessary elements. This also allowed us to figure out what could have been better regarding user experience, information architecture, or visual design.

‍

🎯 Tools Used: FigJam
⌛ Time taken: 1 week

‍Getting Down to Wireframing

Wireframing, a.k.a the skeleton of the website, is the foundation for the flow of the landing page and the visual presentation of how the information is communicated throughout the page.

To ensure that all the necessary components are included, and the user experience is optimized, it is important to have a well-thought-out information architecture. This is where we go back to basics and refer to Julian Sharpiro’s guide to designing landing Pages to determine the best placement for elements like headers, value propositions, CTAs and visuals. Here’s how we finalized the structure:

1. Navbar: Limiting navigation links to FAQs, Document links and Entering the DApp
   ‍
2. Hero: Clearly communicate what Market is by specifying how users get value from it
   ‍‍
3. Social proof: Visualizing the performance metrics of the platform
   ‍‍
4. Call-to-action (CTA): CTA for users to enter the Market DApp
   ‍‍
5. Features and objections: Highlights the key value propositions of Market
   ‍‍
6. Footer: CTAs to join Market’s community, learn more about Market and enter the DApp
   ‍

Iterating the early stage of layouts during sprints gave us the flexibility to experiment with different styles of information architecture. These wireframes were also used as a single source of truth for the copywriters.

Introducing Visual Identity Through Brand Guidelines

Next in line was creating a section-wise graphic inventory for the landing page. Here’s where we put visual principles from the brand design kit we created for Market to use. We can get into the exhaustive research and sprints that went behind it, making a total of about 103+ hours, but hey, that’s a story for another day!

Till then, here’s a list of requisites we churned graphics for:

• Performance metrics of the DApp for social proofing in the Hero section
  ‍
• Communicating the multi-chain borrowing and lending proposition of Market
  ‍
• Navigation links for users to open Market on a specific chain
  ‍
• Communicating Market’s key features like Permissionless pool creation and Supplying and borrowing assets
  ‍

Concluding the insight analysis from our immersive exercises and research, we designed, tested, tweaked and improved. Iterations are important - they allow you to make small changes and improvements until you land on the perfect design.

Design is an iterative process. One idea often builds on another. - Mark Parker

‍

The Hero Section

Market is a DApp where users can earn yield and leverage assets on their terms. In DeFi, it is usual for users to be doubtful of a new DApp, and it is a common pattern for them not to connect their wallet without doing their research. We had interviewed users about their preferences while checking a DApp before connecting their wallets, and one user mentioned:

“I look at numbers of the protocol. Their total value locked, how much can I make out of the dapp, and can I trust them with my money.”

Based on this, along with other insights from the users, we experimented extensively with the hero section because this acts as a place that first introduces Market to users. It should build user trust through performance metrics and act as a primer for the user to click the CTA. This means we need to make this section prominent enough to appear trustworthy and convince the user that the protocol ensures the safety of their funds by giving social validation.

These are the top metrics that act as social proofing for users:

• TVL of the protocol 🔑
• Number of isolated pools 🌀
• Max APY from the protocol 💹
• Partner companies and protocol support 🤝

‍

‍

Communicating the Value Propositions to Users

This section is to communicate the value proposition of the DApp while considering the user experience. On analyzing the community feedback, we realized:

💡 Users are interested in opening the DApp on a specific chain immediately rather than entering the DApp, going through various navigation links and opening Market on a specific chain.

We incorporated this feedback on the page by providing links to users to open Market on Fantom, Polygon, Avalanche or Moonriver. The section clearly displays what the user can achieve by entering the DApp and all the key features of Market.

‍

‍

Assets Supported and Product Tease

Market is a DeFi platform where users can access instant liquidity & leverage the assets they have. They aim to borrow or lend these assets and unlock the token's value with isolated pools designed for users’ holdings. The design has to communicate the opportunities users have. Our design team researched the assets they most frequently leveraged on Market, so this section could show users which assets can be borrowed or lent on Market.

Since we’ve covered the value proposition and key features, the users clearly know what they can do on Market. We added the DApp tease here with a CTA to open the DApp where they can further explore the opportunities on their assets.

‍

Roadmap & Investors Section

The Market team had a lot of exciting things lined up in their roadmap and wanted a way to showcase them on the landing page. Hence, we wanted to allow users to check what’s incoming for Market to scroll through. This helps them get familiar with the long-term goals of the platform and acts as a source of trust for time and resource investment.

As some of the users during user testing mentioned they wanted to contribute to the Market protocol when they saw the roadmap, we gave a CTA to join the team as Market was also actively hiring during that time. The fourth fold was followed by the Investors section, a horizontal scrolling component aimed at building trust with users looking to check the platform's credibility.

‍

CTAs for Users and the Footer Section

The last fold of the landing page has navigation links for users to be a part of the community across various platforms and learn more about the protocol. As we have primed the users with information and scrolled through the landing page till the footer, they have gone through sufficient information about the DeFi platform. Here we provided a CTA to open the DApp. (For which, by the way, we dug deeper into DeFi. Market DApp design story drops soon!)

Closing Thoughts

As designers embarking on the exciting frontier of web3 and DeFi, it's our responsibility to design user-centric solutions that streamline adoption and foster trust. To accomplish this, we must leverage a well-balanced combination of qualitative and quantitative research and analysis.

Our journey with Market is far from over, as we have yet to share the deep-dive insights from the 103+ hours of branding and DApp user research that went into its creation. Think of us as your DeFi tour guides, having done the heavy lifting and charting the course so you can embark on your own adventure through the DeFi rabbit hole that we dug to craft Market.