OPEN BOUNTY
This is a web3 bug bounty platform that provides a secure and efficient way for developers to identify and fix vulnerabilities in their decentralized applications, smart contracts, blockchain, and infrastructure.
In 4 months
300+
registered users
200+
Findings
-10
Touchpoint
Role
Tool
Duration
Product Designer
Figma
01/2023 ~ 04/2023
Our parent company, which is actively involved in the web3 sphere with auditing as its core service, has decided to expand its industry footprint by launching a bug bounty program specifically for the web3 world. This initiative aims to leverage the community's expertise in identifying and addressing security vulnerabilities, thus enhancing the security framework of web3 projects. This strategic move not only enriches our company's service offerings but also strengthens the overall security and reliability of the web3 ecosystem.
- Understanding The Challenge -
OpenBounty, as a pivotal product on the Shentu Chain, serves as a decentralized platform facilitating bounty-based bug hunting and improvements for blockchain projects. The challenge at the outset was to transform this platform to not only improve usability but also enhance the overall user experience to attract and retain top-tier developers.
Initial Insights
The original OpenBounty interface presented significant usability challenges that severely hindered user adoption and satisfaction. Users reported a highly cumbersome and frustrating experience with the platform, to the extent that many were disinclined to use it at all. Key issues included:
Severe Performance Issues:
The platform was notoriously slow, with every interaction burdened by lengthy loading times and frequent crashes. This tested the users' patience and disrupted workflow, making finding and claiming bounties unnecessarily difficult.
Complex and Confusing UI:
The user interface was overly complex and non-intuitive, causing significant confusion even among experienced users. Essential tasks required navigating multiple confusing layers, discouraging users from engaging with the platform.​
​Lack of User Guidance:
There was an evident lack of onboarding processes and contextual help, leaving users to figure out complex processes independently. This lack of guidance made the learning curve steep and the user experience unfriendly.
- Research -
In this particular case, formal user research was not conducted prior to the redesign. The severe usability issues of OpenBounty were evident through our internal use and feedback from the development team, who are also users of the platform. This direct experience highlighted an immediate need for significant improvements.
-
Direct Feedback from Internal Use: As product designers and developers tried to use the platform, they encountered numerous barriers that made even basic functionalities cumbersome.
-
Consensus on Usability Issues: There was unanimous agreement within the team about the critical flaws in the design and functionality, which made the platform nearly inoperable for intended tasks.
Immediate Goals
Given the dire state of the platform, our immediate goal was straightforward: transform an unusable product into a functional one. This involved:
-
Prioritizing Core Functionalities: Focusing on the most critical aspects of the platform that needed urgent redesign to ensure basic operational capabilities.
-
Streamlining User Interactions: Simplifying processes and interactions to reduce the complexity and improve the platform's reliability.
-
Enhancing Stability and Performance: Addressing the severe performance issues that hindered user engagement and satisfaction.
This approach underscores a practical and focused response to severe usability challenges, leveraging internal expertise to quickly identify and address fundamental issues without the delay of extensive external research.
Strategic Redesign Goals
-
Enhance Performance and Stability: Prioritize performance optimization as a primary goal of the redesign, focusing on reducing loading times, enhancing response speeds, and improving overall system stability.
-
Simplify User Interface: Emphasize the importance of simplifying the interface, including reducing unnecessary steps, optimizing user flows, and guiding users with clearer visual elements to make the platform user-friendly, even for beginners.
-
Increase User Guidance and Support: Considering the lack of adequate guidance and support experienced by users, measures should be taken to enhance user education and guidance in the redesign goals. For example, provide dynamic help documentation, instructional videos, and a real-time feedback support system.
-
Improve Usability and Accessibility: Enhance the interface's accessibility to broaden the user base and ensure that the new design is accessible to highly skilled users and less tech-savvy individuals.
-
Sustainability and Scalability: Incorporate considerations for the platform’s sustainability and future scalability in the design objectives, ensuring that the solutions meet current needs and are adaptable to potential future developments and expansions.
- Design -
When I joined the project, OpenBounty was a product born out of necessity rather than meticulous planning. It was essentially a “premature” product, launched in just two months before my arrival. This rapid development led to a platform that was functional but rough around the edges, both in its backend construction and frontend design.
Visual Redesign
We undertook a comprehensive visual redesign, retaining only the original primary color. All other colors were updated to create a more modern and cohesive look. This included enhancing contrast, updating typography, and ensuring the overall color scheme aligned with contemporary design standards, improving readability and user engagement.
-
Discuss the scheme
Because it is designed for programmers, I have made some attempts in this regard.
-
Change theme colors and fonts
The original design had a fatal problem: the main color, yellow, failed the visibility test on a white background, so I made a new and reasonable color match for the theme.
Old design
Redesign
Consistent Design Elements
Ensuring consistency is key. We standardized design elements such as buttons, icons, and forms across the platform, providing users with a cohesive and predictable experience.
Optimized Page Layouts and Enhanced Usability
We focused on rationalizing page layouts and improving display formats to enhance user experience. We created a cleaner, more intuitive user interface by logically grouping tasks, reducing unnecessary steps, and eliminating redundancies. These changes significantly improved users' ability to submit findings and review programs efficiently. A feature-by-feature comparison showcases the improvements in user flow and functionality.
-
White-hats part
OpenBounty is a dual-sided platform designed to connect White-hats and project owners. White-hats submit findings on potential vulnerabilities, while project owners review and reward these findings. After evaluating priorities, we decided first to enhance the user experience for White-hats. We have made the following adjustments.
-
Submit Findings
Streamlining the Submission Process: I simplified the process for submitting findings, reducing it from at least three steps to a single page. This page also displays information about the program associated with each finding. This streamlines the process and helps white hats confirm their context within the program, ensuring accuracy and relevance in their submissions. Additionally, processes such as wallet integration have been moved to the registration phase, which I will discuss further later.
-
My Submissions
Enhancing the 'My Submissions' Page: I consolidated two separate operations into a single step on the 'My Submissions' page. Drawing inspiration from email interfaces, I differentiated between read and unread submissions using color and font-weight. Additionally, I introduced tabs to categorize submissions by their status, making it easier for white hats to track their progress. To further enhance clarity and navigation, I transformed the content layout into a message board format with a timeline. This allows for a more organized and transparent review process.
_edited.jpg)
Noteworthy Addition of a Sidebar: I integrated a sidebar into the interface, which provides space for future informational additions and features a crucial element—on-chain tracking. This option is a distinctive aspect of our web3 bug bounty platform, emphasizing our unique capabilities within the blockchain ecosystem.
-
All Bounties
Revamping the Display of Bounties: The final adjustment I made for the white hats was the transformation of the bounties display from a list format to a card format. This new approach enhances visual appeal and allows for easier navigation and quicker access to key information, making the overall presentation of information more efficient and user-friendly.
-
Project Owner Part
.jpg)
In the Project Owner part of the platform, many design elements were carried over from the white hat improvements. However, the most significant change was transforming the program display from a list format to a segmented block layout. This new approach offers enhanced visual hierarchy, making it easier for project owners to locate and understand key information quickly. By organizing content into distinct sections, the design improves readability and reduces cognitive load, allowing users to process information more efficiently. The more structured and visually appealing format also increases user engagement and satisfaction, providing a more intuitive and streamlined experience. These changes enable project owners to manage their programs more effectively, track submissions effortlessly, and interact with the platform more meaningfully.
- Userflow -
Next, we move on to the user flow section, which we will explain in two parts. First, the system has five levels. Whitehats can submit their findings to the project owner based on the level they believe is appropriate. After reviewing, the project owner will rate the findings based on their assessment. If both parties agree on the rating, the project owner will make the final payment corresponding to the agreed value.
During the negotiation process, both parties follow the workflow shown in the diagram. However, this workflow was not reflected in the first version of the design. The challenge lies in gradually guiding both users through the entire process to completion.
Here is the entire process. If you're interested, you can click the link to view it: https://www.figma.com/board/BQYDDAVCWhoq71DHzmozPb/Userflow?node-id=0-1&t=FTGchEI6pSvGFcg8-1
Step 1: Draft and Submission
Step 2: Verification
Step 2: Verification
Step 3: Update and Confirmation
Step 4: Payment
