I had the privilege of building a ground-up design system, component Library, online NFT Marketplace, and contribute to slew of crypto-game features for NEON MACHINE’s first AAA Game.
www.shrapnel.com
EARLY COMPONENT DESIGN SYSTEM CONCEPTS
I wanted to make our modest team of 10 feel like 100. Efficient production and scalability was a top priority when establishing the framework for the web and supporting in-game screens. The developers were supplied with component library concepts early on, so we could road-map the releases in coordination with Game Features. These concept sketches gave the blockchain team an early understanding of potential dependencies on data-models and the subsequent APIs required to feed the Marketplace and associated web experiences.
RESPONSIVE UI LEVERAGING MUI VARIABLES
SDS (Shrapnel Design System) is supported by STORYBOOK and SHRAPNEL Developers leverage a version of MUI as a starting point for variables that SDS provides. Having available values in MUI reflected in the Figma library allows for cascading changes to the system. Basic values like color, spacing and font-attributes can then contain more extensive variables for specific pages, sections or breakpoints. Having nested variables ensures that text reflows correctly, and that content-blocks & images stack properly at different breakpoints. Story book makes it easy for me QA any component ‘live’ in isolation from the site, which helps me see development from their perspective.
periences.
NESTED COMPONENTS AND STATES
Due to the fast-paced-nature of a startup I had to make sure components were not only responsive to content & composition, but also simple enough to buid, and accessible enough for partners and designers of all levels to quickly mock. Some of the ways I shave development and mock time is by balancing vision with pragmatism. By using whole numbers, width & hieght defaults, predetermined spacing increments (XL, L, M, S, XS...), and pulling from a set of sections I can focus on the whole user-journey. This approach helps me get more of what I want built, even if it means I can’t have the that perfect 13 pixel-subhead spacing, or -3% kerning that satisfies my OCD.
(Web Desktop, below)
TYPOGRAPHY
Selecting the appropriate fonts for SHRAPNEL’s Design system took months. I wanted a system that would feel like a SCI-FI game, but I also needed SHRAPNEL to feel a little like a bank so it would be taken seriously by the Crypto crowd.
SHRAPNEL’s lore is deeply rooted in, and inspired by the CYBERPUNK movement of the late 70s and 80s Japan, while the actual game is modern in feel, and the player economy is powered by block-chain. It was tempting to slap some trendy geometric sans onto a black-background with a neon Miami-Vice brush scrip, but then we would just be like everyone else.
After MONTHS of searching for the nichest of the niche, Eurostil’e Extended was the display-face winner, while Blender-pro became the primary data and body-copy font. Uerostile EXT. Bold had 90% of vintage 70s /cyber-punk /sci-fi charm of Microgramma (an early favorite) but Eurostile is much more established and accessible with it’s many weights and robust character-set. For the secondary, I picked Blender-Pro. Although Blender is widely established in modern sci-fi gaming, it’s use is almost exclusively for large display headers. When reduced to body-copy however, it looses much of it’s trendiness while retaining just enough character. At 19px the font was surprisingly legible, light and technical, like a shrewd accountant in the field.
(Type-reference below)
ICONOGRAPHY
SHRAPNEL the GAME leverages complex pictograms and wholly original icons for things like SIGMA STORMS and MEF Operators. For the MARKETPLACE, however, I wanted to leverage widely established concepts and language from modern e-commerce. I needed things to make sense, be clear while inspiring trust and confidence in blockchain as a technology. I went with a simple, modern, monoline style because it’s primary purpose was to get along with body-copy. Monoline icons are also easy to make and they retain legibility well at small sizes.
ZUSHRAPNEL the GAME leverages complex pictograms and wholly original icons for things like SIGMA STORMS and MEF Operators. For the MARKETPLACE, however, I wanted to leverage widely established concepts and language from modern e-commerce. I needed things to make sense, be clear while inspiring trust and confidence in blockchain as a technology. I went with a simple, modern, monoline style because it’s primary purpose was to get along with body-copy. Monoline icons are also easy to make and they retain legibility well at small sizes.
E STABLISHED E-COMMERCE CONCEPTS POWERED BY BLOCK-CHAIN
The concept of owning in-game content is as equally powerful to some as it is intimidating to others. Users needed to have the benefits of a complex technology (blockchain) while having an experience that was simple and comfortable. My experience with traditional web commerce, combined with SHRPANEL’s deep wealth of GAME knowledge, helped us navigate the tricky stigmas of crypto. I applied standard commerce models for product display, merchandising, filtering, sorting, purchasing and search. I took familiar iconography, patterns & affordances, while avoiding techie language. I felt that crypto features like transfers, transaction history, supply and wallet linking could be made more accessible by borrowing patterns from banking, data entry and online-shopping. Lastly, my font and layout and color choices helped integrate cross-platform features like inventory, missions, player-profile, leaderboards in a way that make the web-experience feel like a sibling of the game.
RESPONSIVE LAYOUTS FOR FEATURE (BELOW) & ITEM DETAIL
1920, 1520, 1020 & 420 Breakpoints were created for all core flows of SHRPNEL.COM/MARKTPLACE.
ITEM DETAIL (Above and below)
Because SHRAPNEL’s Marketplace is on-chain, an item’s detail page needs to house additional information.
• SELLER: in the example below, the item is for sale directly from SHRAPNEL official, but the item can also be purchased and listed for sale by any player with the requisite funds.
• ITEM HISTORY: each item in the ecosystem has a story, after its creation, the item can traded, lost, won, purchased and even burned out of existence.
• RARITY: each item in the ecosystem has an associated rarity (Common, Uncommon, Rare, Epic and Legendary), the item’s rarity directly impacts it’s value and purchase price, resale-value and overall demand.
• SUPPLY: in order for sellers and buyers to gauge the demand for an item, they must know how many exist in the ecosystem.
• PRICE: price is currently displayed in SHRAP, however, many marketplaces choose to also display price in other currencies (USD for example). Note: the item-detail layout needs to leave room for additional data like the BUY-NOW price and current highest bid in the case of an AUCTION.
• TAGS: metadata associated with the item.
• DESCRIPTION: usually displaying supplementary information like an item’s lore, or a custom description for UGC (User Generated Content).
• ADDITIONAL MODULES: like any good commerce site, any item can have an assortment of associated item types, applied in a variety of presentations (like the SIMILAR ITEMS/ SAME ITEMS carousel module in the example below).
• IMAGES: fun-fact, when you own an NFT, you own it’s entitlements and, potentially, the IMAGE associated with it. This relationship adds a layer of complexity regarding the display, updating and management of NFT images (when compared with traditional currency-base commerce).
INVENTORY
Inventory is an ecosystem-level layer that sits on-top of game, web and Marketplace. Marketplace Inventory houses MY-ITEMS (NFTs), transaction history, and My Listings experiences.
My Items uses the same basic Grid and Drawer structure as Marketplace uses for product browsing and purchase.
Unlike a traditional commerce site’s data points for purchase, redeem, or sold; a block-chain-game’s data set Transaction history has more event types such as transfer, air-drop, won, lost, created, burned, and extracted. Additionally, because the MARKETPLACE has thousands of sellers, dozens of partners AND SHRAPNEL official items, there is additional data associated with each items’ from___ to___ history.
(Web Desktop, below)
SIGMA IN-GAME-LEADERBOARD
(Web Desktop, below)
(Web Desktop, below)
F