Top
ChainSafer Website
My Role: UI/Visual Designer
The goal of the ChainSafer website is for persent how ChainSafer protects users from blockchain fraud. And serve as a strategic product portal and bridge to partners.
We need to serve multiple audiences at the same time, including users, potential customers, and partners looking for anti-fraud information. We needed to transfer traffic from the old anti-fraud website to the new one and expand the functionality of the website. Thought share educational content through blog articles, building trust and awareness of security risks. Support partnerships, such as integration with SecuX cold wallets.
Timeline
2022 - 2023
Industry
Blockchain, Cybersecurity
Company size
5,000+
Tools
Figma, Fig Jam, Photoshop, Illustrator, Jira, Teams
Challenge
ff
Results
After launching the first version of the website, we used Google Tag Manager to track user behavior, including scroll depth, click events, and traffic flow.
The data revealed that visitors were not engaging with deeper security education sections, and most interactions focused on the address input area.
To improve clarity and conversion, I restructured the homepage layout to bring key CTAs and product benefits higher in the fold, and added visual trust indicators like platform usage count and partner logos.
As a result, the daily pageviews stabilized at 200+, and bounce rate dropped significantly (based on GA). Marketing also reported better conversion quality from website traffic.
My Role
I was responsible for the website's UI and visual design, including information architecture, navigation design, page design, visual style, and responsive design. Later, I also took on some of the PM's work, responsible for data tracking, demand coordination, and communication with outsourced teams.
My goal is to create a website that meets user needs while achieving business goals. This requires me to consider user experience, brand image, as well as marketing and business development needs at the same time.
Initial Planning: Information Architecture & Research
I divided the website's information structure into five main sections: product introduction, blog, about us, multilingual, and free tools. This architecture is based on analyzing user needs and considering the traffic of the old website. We found that blog content was the most popular, so we placed it in a more prominent position.
Due to resource limitations, I did not conduct independent user research. But I analyzed the traffic data of the old website and referred to the design of similar product websites to formulate the IA and design direction of the website.
Design Process: From Wireframes to Mockups
For the visual design, I used ChainSafer’s brand identity to ensure consistency. I adopted a simple and modern style and used blue and purple as the main colors to convey a safe and professional image. At the same time, I also pay attention to the readability and ease of use of information, so that users can easily find the information they need.
My design process starts with wireframes and progresses to high-fidelity mockups. During the design process, I maintained close communication with the team and continuously adjusted the design based on feedback.
After two rounds of discussions, we finalized the structure and moved on to high-fidelity mockups while simultaneously building the design component library.
To ensure consistency and scalability, I developed a design system that included reusable components, style guides, and interaction patterns. This system streamlined the development process and made it easier to maintain the website in the future.
Development Collaboration: Handoff & Review Process
Working with an external development vendor introduced platform limitations due to Joomla CMS—such as rigid layout blocks, restricted styling flexibility, and limited responsive behavior.
To ensure smooth handoff, I proactively adjusted my design files to match these constraints by:
Simplifying layout hierarchy to fit Joomla’s grid structure
Providing fallback visuals for unsupported interactions
Preparing cutting specs, annotated prototypes, and component-level assets
Creating responsive mockups across screen sizes to communicate spacing and behavior
We also aligned early on implementation feasibility and delivery timelines, reducing ambiguity and back-and-forth during development.
By designing within limitations, I ensured that the final output preserved the brand’s identity and delivered a coherent experience—even under tight platform constraints.
See the Website in Action! - Homepage to AntiScam product page
ChainSafer product page
Analytics & Improvement via GTM
To understand user behavior, I set up GTM to track page views, bounce rate, click-through rate, and user interactions on the website. I found that blog posts received much more traffic than product pages, which means users were more interested in educational content.
However, the traffic to the product page has been low, which may be because the product has not yet been officially launched. Despite this, I still tried to guide users to the product page by adjusting the blog content and CTA, but the effect was limited.
Due to my lack of relevant experience, I took 1-2 weeks of my free time to learning the settings of GTM. Eventually, I managed to set up tracking for multiple languages and multiple pages, which gave me a deeper understanding of data analysis.
Impact & Business Value
Although the overall traffic to the website is good, the traffic to the product pages is still on the low side. However, the website successfully established ChainSafer as a reliable source of information and played an important role in partnering with cold wallet providers.
I learned that the success of a design depends not only on its visual presentation, but also on whether it can achieve business goals. I also learned that data analysis is critical to design decisions.
Before the project ended, the website achieved the 500-600 daily visitors most of them staying in blog area, and the blog articles consistently attracted the highest traffic, while product pages and other sections maintained steady engagement, averaging a few dozen visits per week.
Conclusion
This project was a major turning point for me. I have grown from a UI designer to a designer who can think about products and user experience more comprehensively.
I learned how to respond to challenges, learn from failures, and apply those experiences to future design work. Through this project, I learned how to use GTM data from a marketing perspective to improve UX design. I’ve understood that even the smallest design changes can have a meaningful impact. I believe that through continuous learning and growth, I can create more valuable and effective user designs.
View All Case Studies