CertiK

PROJECT
DURATION
  • 2022.03-2023.02
CATEGORY
  • Full-Time
ROLE
  • UI/UX Designer
TOOLS
  • Figma
TEAM
  • Designer: 3
  • PM: 2

Overview

About CertiK

CertiK provides the all-in-one Web3 project analysis platform with rich insights, that let user explore new projects, execute due diligence with precision, and stay up-to-date with all recent happenings in the space.

What I did

As UI/UX designer, I took main responsible for designing and updating two main parts of the platform:

Project #1
Watchlists
View >>

Watchlists provides users with a dedicated space to save, track and monitor items of interest, including projects, wallets and influences with relevant information.

Project #2
Due Diligence Tools
View >>

Suite of due diligence tools supports user to access industry research and analysis on the latest crypto trends, so that understand the insights and risks in Web3.

Watchlist

PROJECT Watchlist

Challenge

The platform provides a wealth of data-driven insights for 10,000+ crypto projects and communities, featuring real-time updates that facilitate users stay informed. Given that users often interested in various projects at once. Therefore, they have to navigate through different sources across the platform just to keep up.

Time-Consuming

User would need to manually search for each item repeatedly

Fragmented Information

Users might struggle to keep track of data scattered across multiple pages

Missed Opportunities

Users could miss timely updates, which could impact their decision-making negatively

Difficulty in Comparison

User finds it challenging to quickly compare key details across multiple items

Research

Insights

I conducted user research to understand users' need, motivation and challenges, gathering more insights that would improve the experience:

  • Which categories of content do users prefer to track?
  • Users prefer to track projects, wallets, influencers, but also social feeds. Latest news (such as technological advancements) can significantly impact the price and market sentiment. Moreover, opinions shared by by influential figures in the crypto space can sway public perception and investment behavior, prompting users to act quickly based on that.
  • What information do users most frequently view and compare?
  • Besides price and market cap, users also commonly view trust scores and audit reports. These metrics help assess a project's security, credibility and transparency, enabling users to evaluate the risks associated with their investments more effectively.
  • What real-time data would genuinely help users better understand market trends and make informed decisions?
  • Monitoring metrics (such as fluctuations in price and market cap) helps users gauge current market trends and stability of a project or cryptocurrency, enabling them to identify potential buying or selling opportunities.
  • How would users like to customize their watchlist?
  • Users can customize their watchlists based on various preferences, such as blockchain networks, project categories or asset types. For instance, users might filter their watchlists by categories like DeFi or NFTs to concentrate on areas that align with their personal interests or investment strategies.

IDEATE

Solution

After synthesizing insights and share them with team, we explored the watchlist as a design solution, because it emerged as a widely adopted approach for consolidating information into a unified view, enabling users to track and manage a wide range of items or assets simultaneously.

We then took a top-down approach to define the structure of the watchlist which consists of 3 distinct types of watchlists: projects, wallets and influencers.

Efficiency

Users want a quick way to monitor their key interests, such as crypto projects, all in one place

Customization

Users need the capability to manage and tailor their watchlist to cater to their preferences

Real-Time Updates

Users need real-time updates to stay informed and make timely decisions

Comparison

Users want to compare multiple items easily by viewing key data displayed side-by-side

User Journey

I began working on the user journey by envisioning how users would explore the platform.

  • Step ①: As users browse through information and discover projects, wallets or influencers that pique their interest, they can easily add these items to their watchlist.
  • Step ②: From there, users navigate to their watchlist, where they can track the latest updates, view essential details, and manage their favorites.
  • Step ③: They can search for new items, create custom watchlists, and organize their content to to ensure they never miss out on key information.

Design

Initial Concept

The project watchlist was designed in a card layout to provide a clear and organized way to view project information. Each card presents essential details, such as project name, metrics and statistics, allowing users to quickly scan through their watchlist.

Desktop
Navigation

Switch effortlessly among watchlist tabs to monitor different contents

Watchlists

List multiple watchlists and each displaying projects it contains, allowing users to quickly view their collections

Project Card

Present each project in a card layout, enabling users to preview key details without clicking for more

Create Watchlist

Add sub-watchlists under each category to organize items or assets effectively

Social Feeds

Explore social feeds based on the watchlist projects that require immediate attention

Mobile

Header

The header contains the watchlist title to help users identify their current page, along with icon buttons such as a menu to maintain a consistent user experience across other pages

Navigation

2 layers of scrollable segmented controls are positioned underneath, allowing users to select choose both the type of watchlist and the sub-watchlists within the selected main watchlist.

ITERATION

1.0

Feedback

I presented the initial concept with the team and gathered feedback to identify potential improvements early on.

For Desktop
  • Detailed Insights Matter Most
  • Most users are more concerned with understanding detailed information than with the number of watchlists they have.
  • Difficulty in Comparing Data
  • The card layout displays limited content and also makes it difficult to analyze data across different items
  • Clarify UI Distinction
  • The difference between the styles of tab and button is subtle and could be clarified to improve user recognition.
For Mobile
  • Streamline Header Hierarchy
  • The multiple tiers make the header feel overly complex and use more space than necessary
  • Simplify Watchlist Navigation
  • Users may need to swipe extensively to switch sub-watchlists if many are created
  • Highlight Social Feed
  • The social feed should be more prominent on mobile, as it provides valuable information.
Desktop

Improvement

Table layout can display more projects information row by row, which helps users analyze and compare data more easily.

Mobile

Improvement

Regarding the feedback, I added the general watchlist page with three tabs, each representing a different type of watchlist. Users can click on a tab to switch to the desired watchlist. The screen will then display the corresponding sub-watchlists along with the items added to them.

ITERATION

2.0

Feedback

I gathered insights from team reviews and user behavior statistics to refine the design.

Most users interact with one watchlist and infrequently switch to others.

If only create a few watchlists, general page have a lack of utility.

Adding an additional page will increase the number of steps in the process.

Final Design

  • Streamline the header by minimizing non-essential elements to enhance usability.
  • Display the default watchlist by default rather than showing the rest of the watchlists simultaneously.
  • Provide a dropdown menu for users who want to switch to a different one.

Prototype

After wrapping up the design, I meticulously crafted UI specifications and prototype, then delivered them to the dev team, aiming to help team bring the design to life with clarity and alignment.

In addition, I actively tested UIs and interactions within implementation to ensure consistency and responsiveness across various devices and platforms.

Moving Forward...

Monitoring crypto project updates is time-sensitive, but users can’t always be in front of their screens and constantly checking the platform.

While the watchlist was designed to help users track projects they’re interested in, I sought to extend its usage and came up with the idea of daily digest that notifies users via email with condensed information to prevent them from missing essential updates.

Daily Digest

I collaborated with the PM to identify the most valuable content for the email digest and narrow down to 4 main sections: price alerts, audits, recent news and overall market sentiment.

In the meantime, I strategized the email to not only include updates from watchlist projects, but also to seamlessly incorporate insights from the community. This approach encourages users to explore more and drives them back to the platform, thereby increasing conversion rates.

Price Alerts

Receive updates on significant price movements, including the top gainers/losers

Audits

Discover the newly completed security audits for projects in the watchlist

Recent News

Find out coverage of the latest news and tweets related to watchlist projects

Market Sentiment

Check out the market’s social sentiment, along with real-time alerts and top-mentioned tokens

Setting Preferences

Users can customize their preferences on the settings page. For instance, they can toggle notifications on/off and set specific thresholds.

Watchlist

Wallet Watchlist

After completing the design of the project watchlist, I shifted focus to the wallet watchlist. Leveraging the experience from the first watchlist, I followed a similar design process.

Alongside meeting product requirements, I also aimed to help users more efficiently understand and recognize uniform interfaces with familiar design elements because this reduces cognitive load, they don't have to relearn how to use the interface on different watchlists.

Design System

I collaborated with team members to update the new components introduced by the first watchlist into the design system, then applied them to the wallet watchlist to ensure consistency across all watchlists.

Next Project

CertiK•Due Diligence Tools

Suite of due diligence tools supports user to access industry research and analysis on the latest crypto trends, so that understand the insights and risks in Web3.

View >>