CertiK

PROJECT
DURATION
  • 2022.03-2023.02
CATEGORY
  • Full Time
ROLE
  • UI/UX Designer
TOOLS
  • Figma
Team
  • Designer: 3
  • Product Manager: 2

Overview

About CertiK

CertiK provides the all-in-one Web3 project analysis platform with a wealth of data-driven 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 key parts of the platform:

Task #1: Watchlists (Project & Wallet)

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

Task #2: Due Diligence Tools (Wallet Analyzer & Project Overlap)

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.

Task #1.1: Watchlists

Project Watchlist

The platform provides three distinct types of watchlists, including projects, wallets and influencers, to help users track and manage a wide range of items or assets. Each type of watchlist allows users to add and customize sub-watchlists to cater to their specific preferences.

Requirement

Add and organize multiple sub-watchlists under each type of watchlist to categorize your items or assets effectively.

Easily switch between sub-watchlists to monitor different contents without hassle.

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

Desktop
Design
Initial Concept
  • List multiple watchlists on the page, each displaying the added projects. This helps users easily see how many watchlists they have and which projects are included in each one.
  • Each project displays its corresponding information in a card layout, enabling users to preview key information before clicking for more details.

Feedback

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

Most users are more concerned with understanding detailed information than with the number of watchlists they have.

The card layout displays limited content and also makes it difficult to analyze data across different items.

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

Design

The primary design challenge is determining how to effectively display all three tiers of watchlists on a mobile device, given the constraints of its smaller screen.

Initial Concept

  • The header contains icon buttons, such as a menu, to maintain consistency with other pages.
  • Below that, the title of the watchlist is displayed to help users identify their current page.
  • Two 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.

Feedback

I shared the initial idea with the team to incorporate their feedback into the design from the outset.

The multiple tiers make the header feel overly complex and use more space than necessary.

Users may need to swipe extensively to switch sub-watchlists if many are created.

The social feed should be more prominent on mobile, as it provides valuable information.

Iteration

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.

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 users create only a few watchlists, general page potentially 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.

Task #1.2: Watchlists

Wallet Watchlist

After completing the design of the project watchlist, I shifted focus to the wallet watchlist.

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.

Users can more efficiently understand and recognize uniform interfaces with familiar design elements because this reduces cognitive load, so they don't have to relearn how to use the interface on different pages.

Task #2.1: Due Diligence Tools

Wallet Analyzer Tool

After completing the design of the wallet watchlist, I continued to reflect more deeply about the user's journey.

Even through watchlists provide a streamlined view of users' interests by displaying key information in one place, what if they want to dive deeper? What kind of details could truly guide them in making more informed decisions? These questions drove me to explore the possibility of incorporating more useful tools, such as wallet analyzer, in the next phase of the design process.

Workflow

Communicated with PMs and designers, it facilitated me obtaining an understanding of the initial product requirements, workflow, as well as potential features that users might need.

There are two main entry points of wallet analyzer page:

  • One is searching through the wallet analyzer tool, the wallet analyzer page will be displayed as a search result,
  • The other is selecting an added wallet from the watchlist.
Desktop
Design
General Information
  • Understanding the total value of assets and the types of tokens held helps users quickly gather relevant insights about their financial standing within the wallet.
Token Portfolio
  • Knowing the value and composition of holdings enables users to make informed decisions about buying, selling, or holding assets.
Wallet Relationship
  • Knowing which other wallets frequently interact with the wallet allows users to analyze these connections and explore potentially related wallets, providing insights into potential risks or opportunities.
Token Trading Analysis
  • Understanding the historical performance of tokens allows users to see how their investments have grown or declined over time, helping them make strategic investment decisions based on market trends.
Recent Token Transfers
  • Tracking recent transactions helps users understand their activities and assess their investment performance.
Mobile

Design

To minimize excessive scrolling on a mobile phone, add a top navigation bar to help users quickly reach the desired section and display each section on a single screen for a better reading experience.

Task #2.2: Due Diligence Tools

Project Overlap Tool

Another tool is called project overlap tool for users to compare 2 crypto projects, if they need to evaluate a range of factors between 2 projects (including token price, market cap, etc.) to make well-considered choices.

Requirement

I began competitive research and discussed the findings with the PM to ensure that both user needs and product goals were incorporated into the design decisions. There are several aspects users might want to compare:

Basic

Knowing the basic info, such as token price, market cap etc., users can assess the investment potential and value stability of each project.

Ecosystem

A growing ecosystem indicates a project's popularity and support. This can signal robust user engagement and potential for future growth.

Security

Understanding a project's security helps users evaluate compliance risks and trustworthiness, thereby protecting their investment.

Desktop
Design

Wireframe

  • Use a two-column layout, with each column displaying data vertically for each project, to facilitate side-by-side comparisons.

Feedback

I conducted design reviews & usability testing, and synthesized the feedback to refine the design.

Users are more interested in analyzing historical trends because this helps them understand and predict project's performance, rather than merely viewing static data.

Listing many matrices vertically results in an excessively long page, making it harder to locate specific items quickly.

Final Design

Through multiple attempts and careful consideration of feedback,I transformed the initial two-column layout to chart-based design. The reason is that charts are better equipped to illustrate fluctuations dynamically, helping users make more informed comparisons between the two projects.

Basic
  • Reorganize static data into a dedicated section (including ecosystem, badge, trust score)
Holder Overlap
  • Knowing the amount of holder overlap can help identify correlations between 2 projects.
Market Performance &
On-Chain Comparison
  • Display only one matrix at a time helps prevent users from feeling overwhelmed by excessive information. Users can switch different matrix by selecting the corresponding tabs.
  • Show the trends of two items using distinct red and blue colors on a line chart to make it easier for users to compare and distinguish between data points.
Mobile

Design

Concentrate information on mobile to enhance usability, sticking the search box at the top supports users easily modify search criteria of 2 projects at any time.