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.
As UI/UX designer, I took main responsible for designing and updating two main parts of the platform:
Watchlists provides users with a dedicated space to save, track and monitor items of interest, including projects, wallets and influences with relevant information.
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.
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.
User would need to manually search for each item repeatedly
Users might struggle to keep track of data scattered across multiple pages
Users could miss timely updates, which could impact their decision-making negatively
User finds it challenging to quickly compare key details across multiple items
I conducted user research to understand users' need, motivation and challenges, gathering more insights that would improve the experience:
After synthesizing insights and share them with team, we explore potential design solutions and decide a watchlist would be the most appropriate option, 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. Each type of watchlist allows users to add and customize sub-watchlists to cater to their specific preferences.
Users want a quick way to monitor their key interests, such as crypto projects, all in one place
Users need the capability to manage and tailor their watchlist to fit their preferences
Users need real-time updates to stay informed and make timely decisions
Users want to compare multiple items easily by viewing key data displayed side-by-side
With the general direction in place, I continued to shape more specific requirements that would steer me in creating a watchlist that empowers users to track and navigate their interests seamlessly.
Add and organize multiple sub-watchlists under each type of watchlist to categorize 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.
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.
After completing the desktop design, I shifted my focus to designing for mobile. 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.
Rather than simply adapting the desktop layout, I focused on crafting an optimal mobile experience that ensures users can seamlessly navigate through their watchlists with ease and clarity. To achieve this, I proposed two options: table VS card layout.
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.
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.
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.
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.
Monitoring crypto project updates is highly 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 considered how to further extend its usage to prevent them from missing essential updates.
With this in mind, I collaborated with PM and came up with the idea of daily digest that notifies users via email with condensed information, if the projects in their watchlist occur significant changes. This way, even when users are offline, they can always stay informed and respond promptly when necessary.
I collaborated with the PM to identify the most valuable content for the email digest. Through our discussions, we narrowed down to a curated email structure with four main sections: price alerts, audits, recent news and overall market sentiment.
In the meantime, I gained a comprehensive understanding of the business requirements. 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.
Receive updates on significant price movements, including the top gainers/losers
Discover the newly completed security audits for projects in the watchlist
Find out coverage of the latest news and tweets related to watchlist projects
Check out the market’s social sentiment, along with real-time alerts and top-mentioned tokens
Users can customize their preferences on the settings page. For instance, they can toggle notifications on/off and set specific thresholds.
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.
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.
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:
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.
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.
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:
Knowing the basic info, such as token price, market cap etc., users can assess the investment potential and value stability of each project.
A growing ecosystem indicates a project's popularity and support. This can signal robust user engagement and potential for future growth.
Understanding a project's security helps users evaluate compliance risks and trustworthiness, thereby protecting their investment.
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.
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.
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.
