[1] Product design[2] Data Structuring
Prologue
Back when I joined as an intern I was tasked with creating this very product page, but I was just asked to take some elements from the top competitor and slap our branding on it. I did, but just did not account for any real life constraints that come later. Ultimately resulting in having this scrappy version for the next 8 months. For context this was using the old brand system which also did not scale well :(
But once I revamped the whole brand with adding more polished elements and items which I failed to create last time, I took this product broke it down from scratch to build it. This time I started with collecting everything I need from business outcomes, target users, where would this end up being used etc. This gave me a lot of directions to explore and also to create something nobody has done in the Web3 Security Audit Market.
Overview
At QuillAudits we audit contracts/codebases for projects & orgs, this involves the auditors and project teams working with the tech team of the client and coming up with the final Audit Report for the client with fixes and best practices to follow to not get hacked. We had audited over 1500+ companies and there was a need for a platform to display all our clients and other details. All our findings are open to the public so this platform also should serve as a one stop shop serving that.
My Approach
Since I was the sole product designer, I anchored my design approach around communicating with transparency and a direct simple UX that works.
The UI involves using blocks making the whole product somewhat of a structure where blocks can be inserted. This approach helped in scaling when new features / security guidelines are put in place internally.
Audit Leaderboard Home
The purpose of this page being to showcase our own audit expertise and to build trust with transparency. This home is part of a conversion funnel to instil organic trust to the users.
Project Page
For marketing purposes once an audit is completed we would be publishing this page in our socials. This page is pivotal in sharing the clients progress since an audit done on a project is generally used to showcase to investors that the project is secure.
We introduced a set guidelines in representing client logos - icon on white background. This icon is used in the main page, table view and also as a custom OG Image to showcase when sharing in socials.
Status Bar
Designed a status bar to be placed after the main company info. There are three statuses with Verified, Not Verified and Pending states.
QuillAudits Score
The calculation uses a very complex scoring mechanism involving 4 categories. To be more transparent to our clients and users we wanted to be clear in representing it. Every piece of information has a lot of priority and if not shown correctly opens us up to questioning. The most straightforward UX approach to showcase was to use a sidebar, since the detail scoring info is calculated by a workflow which gets added to the database and gets reflected in the website.
Footnotes
As a designer when a requirement was given I went all in on visuals and how to represent it better and make it look good. But met with realities upon working with technical teams on what the product actually needs and not it wants to be there. Feasibility and being realistic on what the project requires comes first, functionality > form. This was my first 0 → 1 Product which I owned from the design front and learnt a ton. Grateful for the combined effort of the team of project managers, auditors and developers who made it great.
If you like this, you’ll also like: