Redesign: DC NFT Comics
--
DC comics has launched the sale of comics through NFT technology.
BRIEF
Analyze and identify strong and weak points of a digital product. In addition to offering some personal solution that supposes an improvement to this one.
Web chosen: DC NFT Comics, desktop & mobile.
Product focus: Drop comic; Batman & The Joker, The deadly duo #1.
KICK OFF
DC Comics + Palm Studios have jumped into the world of NFTs together. It offers different collectible elements of DC superheroes. (Check it out DC NFT News) It will be saved in your profile, to display or sell them. In this case, the focus is on the purchase of comics, which is done through limited edition drops. If you are already a user, they will inform you of the next drops via mail and if you are a user with a bat cowl you can access to the pre-sale, in case you do not get to buy in a drop, you have the option to buy from users who resell, obviously at prices higher.
This project started as a personal challenge. It is made without knowledge of real metrics and current business needs, which I am aware would change in many aspects.
I have make an audit based on the principles of usability, design and the improvement of the shopping experience.
DESK RESEARCH
I opted for DC NFT, since it seemed like a very interesting product to analyze, DC launching into the blockchain world. It will also serve to introduce me to this unknown world so far. Through the desk research I discovered an infinite amount of information in addition to answering many questions that I had so far.
In this case I divided my investigation into several points:
Product, users, environment.
About the product
NFT, what is this everyone is talking about?
A non-fungible token or non-fungible token is an encrypted digital asset. It is a special type of cryptographic token that represents something unique. Non-fungible tokens are therefore not identically tradable, and what is this? A work of art, for example, is a good that is not consumed when it is used and cannot be replaced by another equal one. One work of art is not equivalent to another, it is unique, for example, think of Picasso’s Gernica, it is unique, as well as having great added value due to a series of characteristics.
Through the new DC website dedicated to its NFTs and the many articles that there are dedicated to the product (due to the fame of the brand) I discovered its functions, although I have focused on selling comics:
- Bat Cowl Collection first launch to the NFT world together with Palm NFT Studio, where different batman skins were launched that had a great acceptance. Having one of these facilitates and offers many advantages in the community.
- There are different collections of other characters besides the batcowl, Harley Quinn surprise boxes, charms, comic covers, movie posters…
- Currently they have focused on the weekly comics drop, limited — classic editions with different levels of rarity. A single unit per user. In addition, whoever owns a batcowl accesses the resale before any other user. And they are notifying already registered users of the weekly releases.
- Users have all the collections in their profile, where they can read their comics, collect and sell them.
“We want to take the physical, real world experience of collecting comics that so many of our readers have loved over the years and expand that into a new digital community,” said DC Senior Vice President and General Manager Anne DePies. “We want to build that community aspect that everyone has been so proud to be a part of, in our digital ecosystem to make comic collecting more available and accessible than ever before.”
DC Comics
About the environment
There is quite a speculative atmosphere since different products have come out, something that DC fans have taken quite badly.
Through online platforms, I was able to access different analytics in which they tell us that January 2020 was when the highest peaks occurred until March 2021, which was when it stabilized until now.
You can see the great “NFT boom” on those dates, where many people speculated with an infinity of them as the Bored Ape among many.
Currently in comic sales and with the first drop of Superman (1939–2011) #1, the same thing happened. Where they sold for $9.99 and resold for 100 times as much.
In some drops they have had problems due to the number of users, but they have turned out quite well.
About users
I verified that there are two types of users, “DC fans” and “speculators”, but finally the fans are the ones that are there over time and they are the ones to focus on, without forgetting that the speculators will be coming and going.
DC NFT users are quite active in social networks, so my work and research towards them focused more on netnography through Instagram, Youtube, Twitter and Discord, the latter are where they are quite active and you can interact and get to know them a little more, in addition to having the opportunity to carry out surveys and interviews.
PROTO PERSONA
Through all the data collected from users and products I was able to realize my proto persona and discover great insights. Taken from the conversations collected on the DC discord channel.
BENCHMARK
Study on the direct and indirect competition of; Blockparty, OpenSea, NBA Top Shot and UNXD Dolce & Gabbana.
Blockparty:
What does it consist of?
It is an NFT marketplace. Where you can buy or create your own NFT store.
What do they bring to the user?
- Allows you to create or buy NFT
- FIAT purchases.
- They have APP
- The look of the web in general is quite attractive but less usable.
- The arrangement of elements on the product detail page is confusing, too much space, the buy button does not convert.
OpenSea:
What does it consist of?
It is the largest marketplace and one of the best valued within the world of NFT.
You can buy and sell. Wide range of different NFTs.
What do they bring to the user?
- Allows you to create or buy NFT
- They have APP
- Highly valued by the long list of most trending NFTs.
- Brands like Nike, Adidas, as well as Bored Ape, CryptoPunk, etc.
- Offers NFT analytics/statistics.
- Verified collections, to avoid scams within this marketplace.
- Direct + minimal + usable web.
- Detail + ranking in each product as properties of that NFT as perception of the value of each piece.
- Intuitive detail page, with filters by different types.
- Product landing, ordered and directed.
NBA Top Shot:
What does it consist of?
NBA foray into the world of NFTs.
Offers collectible digital video trading cards of iconic moments in the NBA.
They can be saved in a digital portfolio, displayed or sold.
The purchase is made through limited edition drops that arrive by mail with a waiting list or purchase from users who resell.
What do they bring to the user?
- They can be saved in a digital portfolio, displayed or sold.
-The purchase is made through limited edition drops that arrive by mail with a waiting list or purchase from users who resell.
- Target: NBA fans + speculation.
- Attractive, clean and direct website.
UNXD X D&G
What does it consist of?
It is a market place dedicated to the sale of Dolce & Gabbana NFTs and others in fashion, the product works by specific launches of drops and it is purchased through bids.
Focused more on the fashion NFT market.
What do they bring to the user?
- Offers exclusivity, only one piece in each drop.
- Dolce & Gabbana product.
- The digital NFT offers an added value: the physical piece and attending brand events.
- Target: fashion collectors.
- Simple and direct website, where the product is well worked and is the protagonist. You see the information quickly.
AUDITORIA — ANALYSIS
After carrying out the previous study and obtaining all the data, in order to continue analyzing the product, a heuristic analysis of the page itself was necessary, in order to also be able to verify its usability. I drew the following conclusions:
Screens chosen to improve:
- Landing Page
- Market Place
- My collection
To highlight, excellence:
- Use of NFT technology for the sale of comics.
- The user experience in digital reading of the comic.
🛬 LANDING PAGE
Problems I have found:
- Hero Banner. Release day does not include the most important drop.
- About the product. Too much text, the user doesn´t read, give a better reading option.
- Access to collections. Summary of collections difficult or boring to read.
- Comic collections. Inconsistency, Batman & The Joker appears when it is not on sale yet, because the drop has not been released, you must indicate it. There isn´t information to the user, it does not indicate prices, or current quantities in the marketplace. Change the way of show the comics.
- Create, Connect and Collect. Lost information.
Solutions:
- General visual design for the entire web: Change to gradients, backgrounds, colors...
- Main colors for conversion and highlighting texts.
- High contrast to stimulate the focus and visibility of elements without using pure black.
- Real-life materials to improve the experience + glassmorphism style in some elements, for a more immersive experience. Recreating the user’s nostalgic feeling. More valuable product. - Hero banner, keep the focus on a launch add reminders via email, at the time of the launch only the CTA that leads to the collection will appear. More sliders can be added. In addition to adding a countdown to keep more informed and create expectation for the user.
- Re-organization of elements through transitions, parallax effect and animations to keep the user curious and involved, so that they do not give up, to be able to show and explain the product.
- Product. Tags + product information in hover status, about the products that are for sale.
- New filters are added according to character in the collections.
- Access to support, with iconography that was understood and smaller direct to chat.
🏪 MARKETPLACE
Problems:
- Cards too big, flat, outdated design, I don’t think it has a good conversion, there is no effect or CTA that encourages clicking and opening the product.
- Poor filtering option since there are many different types of products as it is a marketplace.
Solutions:
- Cards: visual design giving importance to the product, name information + price and Hover status with info + button + favorites. Color differentiation when it is a Legendary & Epic product, to improve conversion.
- Title + text to optimize SEO.
- Badges: Direct filtering by character.
- Importance to filters:
- Shortcuts according to character
- Option to show or not filters. appear on the left
- Seeker
- Short by
- Filter by collection, traits, type, rarity. - Product shown in interchangeable grid and list format, the latter to show characteristics when there is a lot of product and it is intended to look for comparison or add new characteristics in the future.
🃏 MY COLLECTION
Problems :
- Ready to reveal. When revealing the comic that you have, it lacks more strength and improves the experience for users, they deserve something more. Being DC it could have created a “Wow effect” with all graphics they own and produced.
- My collection, also lacks strength and a better experience.
*Note: the actual digital reading experience of the comic is excellent, I don’t know why the visual style of the entire web in general has not been given that strength, since they have many resources for it.
Solutions:
- My collection: Imitation of real-life materials to improve the experience + glassmorphism style in some elements, for a more immersive experience of viewing your collection. Playing with the imitation of real materials and giving that extra value to the product, along with the collector’s nostalgia.
- Ready to reveal: I have added more strength visually since in my opinion it lacked the surprise effect or more aimed at the “wow” effect when a user has obtained their product, in the end we are talking about DC, I was missing “show”. The moment to reveal the comic along with a video and music until the moment that reveals the comic that has touched you.
WIREFRAMES LOW + HIGH FI
The following wireframes were made prior to the final design, with all the ideas collected in the analysis / audit of the page.
Thanks for your time 😃 I hope you enjoyed it as much as I did when I did it.
⬇️⬇️⬇️⬇️⬇️⬇️ Prototype in better quality + complete here ⬇️⬇️⬇️⬇️⬇️⬇️
