K-Block
A block explorer for Kadena
A Tech Fleet product in partnership with Morgan Denner
Overview
Project scope
NFT analytics
K-block is a tool for exploring the Kadena blockchain. Whether you want to track the value of KDA, dive into transaction histories, or browse NFT, K-block is your starting point.
Phase 1 of the project centered on a suite of crypto analytics tools with a focus on granular data. With these tools crypto traders can dig into block height, gas fees and trading volume across hours or days. They can also easily understand their wallet holdings at a glance and check the status of their transactions.
For phase 2 our brief was to integrate features central to tracking, managing and exploring NFT. To that end this phase included an NFT calendar, a discovery table and a collection page. Floor prices, market cap and trading volume are easily accessed to enable understanding of an NFTs trajectory at a glance. New and upcoming collections are browsable, and users can drill down into the specifics of a collection or single NFT.
My role
-
As a Design Lead for the UXD team I coordinated efforts of our designers and aligned our team with UXR, Content and Strategy. My responsibilities included sprint planning, defining final deliverables, and meeting with our stakeholder for updates and design reviews.
I strove to support and give feedback to our designers. My management experience was invaluable to balance their needs with the goals of the project. I set team communication and participation guidelines, maintained our UXD slack channel and maintained an open and inclusive environment for their ideas to flourish.
Morgan Denner is a web3 evangelist and one of the founders of Tech Fleet. He’s deeply invested in the success of the Kadena blockchain and wants to grow community engagement through better tools.
Product goals
-
The world of tokens and web3 can be cryptic and riddled with insider jargon. Competitive analysis confirmed this statement; terms like hash, gas fee and market cap make sense to the insider, but are obscure to a new user.
Our stakeholder made it clear that K-Block should be easy to understand and engage with. We aimed to welcome people to the platform by simplifying and defining specific language.
NFT are a tangible, shop-able asset created on the blockchain. Phase 2 incorporates tools that allow the user to view and quickly parse the value of their NFT. A calendar feature lets the user see which NFT are about to drop.
Landing page
NFT features
Large, clear copy sets the tone and is supported by high level stats as well as a large format NFT collection card. Users can dive right into popular collections and check a release calendar.
Where the user can browse their NFT holdings, scan high level analytics and explore other collections on Kadena.
Definitions for terminology are called out with tool tips and written in plain english.
Sort and filter NFT collections by highest trading volume or by popularity. View collection performance with granular temporal filters and see which collections are the newest.
Collections page
Headline numbers let you know how a collection is performing at a glance, as well as how many holders are in the community.
Filtering and sorting functions are familiar from online retail experiences , yet customized for the unique details of each collection.
Cards and filtering
Salient details of individual NFT are listed in each card. Prices shown in KDA and USD eliminate guesswork. The heart CTA gives you a read on popularity and makes bookmarking easy.
Tracing design development from ideation sketches through mid-fi wireframes. As NFT features were added to Kblock we took measures to ensure they would visually integrate with work from phase 1 of design.
Ideation sketches
Initial sketches focused on how best to display rows and columns of data
Hover effects show how a user might pull a row of data up for a closer view, reducing eye strain
Design development
Experimentation with large format, bold copy proudly introduce NFT funtionality has arrived to K-Block.
Individual NFT or collections called out with cards just below the header. Enticing users with different ways to browse or view groups of collections.
At this stage of development we're still incorporating ideas from competitive analysis. These include groupings of collections defined by what's trending, creator popularity and new releases.
Wireframing
Blocking out the largest elements and defining information hierarchy for the page. A large header, as featured in ideation sketches, remains.
As we progressed our feature priorities shifted. In the process some features migrated to the NFT landing page. This left us free to focus on what a single collection page would look like.
We benchmarked elements of extant competitors while retaining our less information-dense principles.