dibbs 24 / 7 Fractional
Trading Marketplace
UX design, visual design, prototyping, user RESearch, native mobile
The first 24/7 fractional sports card trading NFT marketplace. Collectibles stored in physical vault for online ownership, transfers and physical redemption. App available for IoS and Android.
Frac Packs are packs of fractional card assets. Think of opening a pack of baseball cards and not knowing what you’re going to get. Same concept, but instead of whole cards it’s different fractional amounts of cards. 1% of this card, 2% of that card, etc. We had been using them as a promotion for new users. Sign up and deposit as a new user, you get a Frac Pack.
Something that had come up in talking to users was that they really liked the concept of Frac Packs and they wanted more ways to get them.One of the KPIs on our product roadmap was increasing recurring deposits week over week by 20%.
We decided allowing customers to buy Frac Packs would be a good path to achieving this goal. Customers had already asked for this, and chance mechanics (aka “unboxing”) has been a proven engagement and monetization mechanic on other apps and video games, we all agreed as a product team that this was something we wanted to explore.
Frac Packs
These designs were already in place when I arrived at Dibbs and were definitely on my list of pages I wanted to improve. The biggest issue is that there’s no explanation of what a Frac Pack is. In previous user testing we found that users didn’t know how Frac Packs worked until they went through the pack opening process. That is not a good UX and I wanted to change that.
There’s a ton of unused space on these pages that could be used to make the card larger or add more info about each card. Also all the fonts are the same size and font weight so there is no heirarchy of information. In summary, there is a lot of room for improvement.
Existing User Flow
I worked with our Project Manager to figure out what changes to the current user flow we would need to account for since users will be buying these packs instead of just getting them after depositing. We A/B tested which app page customers would click on the Frac pack banner most. We put the newly designed banner on the home, drops, and wallet mobile app screens, and hooked that up to the existing get free frac pack design flow, to see which location got the most clicks.
Updating the User Flow
After letting the free frac pack test run for a week, we found that the home page was the page with the most clicks, so I started updating the existing user flow to launch from the home page.
In addition to the purchasing flow, we wanted to add the ability for users to have the choice to sell their new cards instantly after viewing them. Since our data showed users often sell some or all of the frac pack cards directly after opening them, we wanted to make that process easier for them.
Lastly, I had to figure out a solution for the user to choose whether to keep their cards or instantly sell them. I decided to just make a minimized version of the previous card pages since all of that information would still be relevant in making the decision whether to keep or sell it.
Next was addressing all the empty space on the card pages. I made the card image much larger since users had been mentioning they want to see more detail of the cards. I also reformatted the ownership and value info to be more easily read, and added in the total card value to give more context.
After looking a long look at the issues I wanted fix on the current designs and the updated user flows, I began wireframing. The first thing I wanted to tackle was explaining what a Frac Pack was and making it crystal clear what the user was going to get when they purchased one. This needed to include an explanation of what would be in the pack, what the chance mechanics would be and what the best possible card could be.
wireframes
Before I started high fidelity designs there one was thing I had to do, design some new Frac Packs. The old design looked more like a bag of chips than a pack of cards so it needed an update.
pack redesign
New Pack Design
Original Pack Design
New Pack Variations
I found a blank card pack template that was in line with what I had invisioned
Then I removed the line down the center and added a green gradient to match our brand colors.
I explored and played around with different texture graphics until I found one that I thought was a good fit.
Lastly I added the label and logo with a drop shadow to make it stand out against the background.
After redesigning the pack I was ready to start on high fidelity designs. I used the colors, spacing, buttons, etc. that I had created in the Dibbs design system to keep it consistent with the rest of our platform. These screens are in order of how a user would go through the flow.
design & build
On the first screen I added a section for the most valuable card that was possible to get in the pack. This was based on user feedback from the wireframes. Another issue that came up was when you get to the first card in the pack, it felt very empty with just the card on the screen. I decided to use a design pattern from our drops page by putting an enlarged version of the card with lower opacity in the background. This was the missing piece I was looking for and it filled in the page nicely.
While working on the last two pages in the flow, I realized that in the wireframes I had used a mix of bottom popup modals in the beginning of the flow and page centered modals at the end. We use a mix of these at Dibbs for different scenarios but since we use the bottom popup modals more for transactions and page centered modals more for information I decided to use the bottom popup modals across the board here since it’s such a transactional flow.
One thing that we set out to do at the beginning of this project was give the opening of the Frac Pack a feeling of, “unboxing”. Going through the flow of the high fidelity designs it didn’t really have that feeling. What we were missing was an animation of the pack opening. A colleague of mine reached out to a rockstar animator Eric Funk, who was thankfully available for some freelance work. I sent him over some sketches and we collaborated on a few different drafts over the course of a week and we landed on a short animation which included the pack opening at the top, then growing to the point where it explodes, then fades out to the first card.
adding video
After all these steps we handed it off to the developers and 2 weeks later we were ready to launch. The marketing team was very confident that they could hype this release up, create a lot of excitement about it and thought we would sell out the packs quickly. So we added a new KPI which was selling out the initial 200 Frac Packs in less than 5 minutes based on the of interest that was building up in our communities.
To achieve this we hyped this launch up on social media, engaged with our Discord and Twitter community and people were very excited to be able to finally buy Frac Packs. We were all in a Zoom meeting for waiting for the clock to strike the release time of 10am to see how fast they would sell out, with predictions ranging from 30 seconds on the confident side and 1 hour on the less confident side.
10am struck and by 10:01:30am they were sold out. It only took 90 seconds, and no issues came up. Cheers rang out and everyone on the Zoom call was ecstatic. It was without a doubt the most exciting day we’ve had as a start-up. I’m proud of what we designed and accomplished with this project, far exceeding the goals we set out to achieve.
results
KPI'S
Actual Results
Sell out 200 Frac Packs in less than 5 minutes.
02.
Increase in recurring deposits by 20% week over week.
01.
Sold out 200 Frac Packs in 90 seconds.
02.
Increased recurring deposits by 48% week over week
(4 weeks).
01.
Dibbs fractional asset market had not been doing the volume of trades that was expected and while the marketing team was doing their part to get more users on the platform, the product team was tasked with adding whole assets to the platform to increase the size of the transaction fees and therefore increase revenue.
Dibbs revenue model is based on transaction fees of 2.5%. so by adding whole assets ranging anywhere fron $500 – $10,000, that transaction fee would be drastically higher than the average fractional transaction of $50. We didn’t want our customers who were already on our platform for fractional assets to have to go competitors like Alt, OpenSea, Rarible, etc. if they wanted to purchase whole assets.
To compete with those other platforms, we decided to give the marketplace a design refresh and give it more of an NFT marketplace feel than a sports card marketplace feel since we would be adding NFTs as well as other non-sports related assets.
whole asset marketplace
I looked at the competitors in the whole asset marketplace space to see what they were doing differently than us, take a look at existing patterns and best practices in the space. I wanted to research two different pages, the page where you discover the asset, which we call markets, and the page when you click on a particular asset, which we call the asset details page.
Competitive Research
At first glance it was clear to me that the imagery of the NFT was much more prominent on our competitors sites and apps than on ours. The common elements in all of these are an asset tile with name and price, filter and sorting options
markets
OpenSea
Rarible
Coinbase NFT
On the asset details pages, they all had a large asset image on the left and the data on the right, which told me they want the user to focus on the image first then look at the data. A well definied pattern that you see a lot of online..
asset details
OpenSea
Rarible
Coinbase NFT
Before starting wireframes, I worked with our Project Manager to figure out what the user flow on the asset details page would be so we could determine what information needed to be displayed on the screens. We had two starting points that we had to start from, users that own assets and users that don’t.
Updating the User Flow
After taking a long look at the user flows, the competitive research and talking to some of our frequent users Tommy and I determined that the main sections on the asset details page that would be most impactful to our users would be the asset image, properties, asset name, offers and price activity. After trying out some different designs I decided to make the left and right sides of the page equal width which allowed us to make the asset image really prominent on the page but still have the data be prominent as well. Our previous design had the image column much smaller and we wanted to get away from that.
wireframes
asset details
markets
For the markets page, we decided to have tabs at the top of the page to have a clear separation between whole and fractional assets. Then we decided to use a classic design pattern in ecommerce of having filters on the left and page sorting in the top right. It’s a pattern that users are already familiar with, making it more of a frictionless experience when browsing pages because their eyes already know where to look for things on the page.
After we added the asset image and filled in the data, I had the designs reviewed internally to get aligned on what we wanted to show our users and everyone thought it looked great. Almost everyone, one of the founders of Dibbs said something didn’t feel right, he said it looked messy but that he couldn’t put his finger on why. I had a feeling it was the font and the multiple font weights and sizes. I didn’t want to change those things in past projects because it would have increased the dev work significantly, but since this was a design refresh and we had to update almost everything across the platform anyway, I thought this would be a good opportunity for that.
I switched the font from Montserrat to Avenir Next. I also reduced the amount of font sizes and weights which made it look much cleaner. After I made those changes I showed it to the founders again and got a lot of postitive feedback. No one said it was messy anymore, which told me I had made the right choices.
On the app, I iterated on a few different design changes to try to differentiate the initial mobile view from our previous design and landed on making the image full screen and centering the main asset info. Also I was asked by our Head of Product to add a section on the bottom of the page to upsell related assets, which would hopefully get users to make more transactions. I made those changes, did another round of internal review, got rave reviews and the got the green light to start user testing.
For the markets page, we decided to have tabs at the top of the page to have a clear separation between whole and fractional assets. Then we decided to use a classic design pattern in e-commerce of having filters on the left and page sorting in the top right. It’s a pattern that users are already familiar with, making it more of a frictionless experience when browsing pages because their eyes already know where to look for things on the page.
High Fidelity Designs
asset details
markets
Markets - Before/After
OpenSea
asset details - Before/After
To better understand how users interact with the updated platform and what questions they had, we had 10 existing users look at the new designs and give feedback. Our hypothesis was that users would like the new images, understand the offer system vs. buying now and would like the option to buy whole assets in addition to fractional assets.
10/10 loved the new larger image. I was not surprised by this since wanting more emphasis on the image had come up in previous user testing.
10/10 users understood the offer system and said it’s very similar to making a limit order for a fractional asset which is already on the platform.
8/10 users said they would most likely make an offer rather than buy now and try to get a better price if they can. The other 2 users said they would prefer to buy assets now, but they would have to find an asset that they really liked to pay for the whole asset instead of a fraction of it.
6/10 users said that they would buy the whole assets over the fractional but would prefer assets under $2,000. We passed this on to our inventory team to try and get more assets in this price range. The other four still preferred fractional becuase they preferred less equity in more assets than having it all in one asset. This was fine by us becuase we still wanted the fractional market to have a lot of active users.
Bonus Data. We didn’t ask this question but an uninteded piece of data we got was that 3 users said they prefer the properties section having more of the asset data to the long asset title we previously used. For example, a previous long title we had was “2016 Bowman Chrome Green Refractor Juan Soto ROOKIE RC AUTO /99 BGS 9.5 GEM MINT.” Way too long. In the new format it would just be, “2016 Bowman Chrome”.
User Testing
Results
I’m extremely happy with how this project turned out. Looking at the before and after shows a huge improvement to the visibility of the image and information hierarchy. Our two goals, modifying these pages to accommodate whole assets as well as fractional and giving it a fresh new look were both achieved. Users were very pleased with the outcome as well and are looking forward to it being released. This is currently being worked on by our developers and will hopefully be launched in the next few months. I’m hopeful that this will achieve our overarching goal of increasing revenue by increasing the size of transaction fees and will update this case study when we have that data.
Dibbs daily active users were few and far between on the native mobile and web applications. There was little incentive for customers to return to the platform on a consistent basis beyond marketplace purchases and trades.
Dibbs rewards is meant to allow collectors to check in every day. When they do so, they earn Dibbs Gems. Using the gems, they can redeem Frac Packs, where they can digitally rip a pack and see which cards are inside. All packs contain multiple cards with fractional ownership percentages that collectors can either keep or sell.
Another way to earn gems is by completing specific actions essential to trading collectibles on the rewards page, such as making a deposit, placing a limit order, etc.
Dibbs Rewards
After taking a long look at the user flows, the competitive research and talking to some of our frequent users, DJ and I determined that the main actions to earn Gem Rewards would be Complete Trading Account, Make Your First Deposit & Invite a Friend. After trying out some different designs I decided to make each action have its own individual cell, with the gem being about half the height of each.
wireframes
We decided daily check in would live at the top of the page because it’s the first action the user should take to earn gems each day. Having it front and center with different states for complete vs. disabled is a classic design pattern so the user knows to come back the next day to earn more gems.
Once we decided on the main actions that a user would take to earn gems, how many check in days we would provide, and the number of gems earned per action, I started on the high fidelity designs. I used components I had created in the Dibbs design system to keep it consistent with the rest of our platform.
design & build
KPI'S
Actual Results
Positive feedback from our customers.
02.
Increase daily active users.
01.
"I love getting something back from the app, and that’s rare to find. " - Dibbs Discord community member
02.
In the first week, we saw a 10% increase in daily active users.
01.