Tenamint (formerly known as BallStreet) is a token-based online marketplace that makes it easy to purchase hard-to-find and sought-after trading cards. By splitting the ownership of a card into shares, buyers benefit by having the chance to own a piece of a card they might not have been able to own before, while sellers benefit by continuously earning income on cards that might be sitting around their collection.
After being hired onto Tenamint as a full-time UX/UI Designer and their UI Lead, I continued to work on their web app to create a fully fleshed-out product. As the team's primary creative person, I also designed all graphic design elements on the web app, website, blog, and on many social media posts.
Since we had primarily focused on redesigning the UI when creating BallStreet's MVP web app, the main problem for the Tenamint web app was the functionality. My job for this project was to design the primary and secondary marketplace functionalities for beta launch.
With a fresh start comes the need for a fresh perspective. After we had designed the initial BallStreet web app, we recognized that we had based too many decisions off of assumptions since we didn't have the proper resources to conduct UX research. As a result, we were lacking a thorough understanding of who our users really were. It was time to learn about our users so that we could create the best possible card-collecting experience for them.
We created a list of questions to ask six people that fit into the three sectors of our target market: trading card collectors, crypto buffs, and people who are interested in finance. By talking with the three types of people who would use Tenamint, we were able to gain a better understanding of who we were designing for so we'd be able to design a product without our own assumptions clouding our judgement.
These user interviews were eye-opening and we were able to pull many insights that would shape how we would design the experience. Some key takeaways from these interviews were:
While some of our users would inherently be interested in and open to the idea of investing in digitized trading cards, most traditional card collectors would need to feel extra comfortable before investing. As I progressed in the design process, I wanted to create something that felt natural and authentic for all collectors.
These insights allowed me to create personas that were more accurate representations of our users. It was important for us to consider all three personas for all design decisions.
A new company name needs a new identity. Since the web app was in its first few months, the co-founders were looking to improve upon the branding left over from their BallStreet days in order to transition the app from BallStreet to the new-and-improved Tenamint.
As the team's UI Lead (and thus, the startup's graphic designer), I decided that the best way to begin the branding redesign was to develop a deep understanding of Tenamint through a company-wide branding workshop.
I designed and ran a 4-hour workshop with the entire company. Together in our team of seven, we discussed what we envisioned for the brand through a series of prompts in Google Jamboard. For each prompt, everyone wrote down their own individual ideas on post-it notes and was encouraged to write as many as they could. From here, we dot-voted on ideas that we agreed with the most before talking through our thought processes and opinions. Some prompts included:
In this highly collaborative environment, we were able to bounce ideas off each other to be as creative as possible. In the end, we decided upon a series of colours and font faces that represented the Tenamint brand.
A big takeaway from the branding workshop was that we needed to combine the modern with the vintage to appeal to all of our personas, from crypto buffs to traditional trading card collectors. We wanted everyone to feel like they belonged on our site.
By keeping parts of the vintage aesthetic we had established at BallStreet, we would appeal to experienced collectors while differentiating ourselves from other web3 e-commerce platforms.
After the branding workshop, we did some further research on the two different vibes we wanted to give off. We looked at our competitors to see which UI elements, colours, fonts, and visuals contributed to their sleek, technological look. Then we looked at old-school sports cards and vintage posters to determine how we might implement those retro aesthetics into a modern web app.
Utilizing my research and the ideas from the branding workshop, I created new and improved branding guidelines. The result is a clean combination of modern and vintage that encapsulates what Tenamint is all about.
I realized that a huge problem with the MVP was that it really wasn't "minimum" at all. Actually, it was trying to do way too much for an MVP. Not only did it act as the web app, it also served as the marketing website. The navigation bar was a mess of marketing pages and web app pages. As a result, the site was cluttered and its purpose wasn't clear to the user.
To correct this, we divided the MVP into two separate websites: the web app and the marketing website. Each of these websites had their own separate structure and design systems while sticking to the same branding. This way, each site had its own purpose while remaining cohesive.
Below are the site maps of both the web app and the marketing website.
To further differentiate the marketing website from the web app, we implemented two distinctly different navigation bars. While the marketing website has a horizontal navigation bar on the top of the page, the web app has a vertical navigation bar on the left.
The MVP marketplace's purpose was solely to purchase newly "dropped" tokens. The main focus for the beta launch was to implement a secondary marketplace so that users could sell their tokens and purchase tokens from other users. This way, the value of the tokens would change over time and become a true investment.
Since the development team would be using an API called Stripe for the checkout flow, it was important for our UX team to collaborate closely with the development team to ensure we were designing something that could be developed successfully. From daily stand-ups, to weekly tech syncs, to messaging in Discord, our teams were in constant communication.
We outlined flows of the Drop List (primary marketplace) and the Marketplace (secondary marketplace).
Our collaboration with the development team was extremely helpful when developing these flows since we were able to quickly validate the feasibility our designs. For example, we had initially designed the cart as a separate page. However, we learned from one of the developers that Stripe already had a cart feature that could be displayed as an overlay over any page. This allowed us to design a cart overlay that would be simple for the developers to code, as well as improved the usability of the buying process.
I designed UI cards for listings on the drop list (primary marketplace) and the marketplace. Each one required a different design to account for their content and to differentiate the interfaces from one another.
The Drop List cards take up the full width to bring attention to each individual drop. This highlights each drop and makes them seem more important. On the other hand, the marketplace cards are formatted as a three-column grid so that users can easily compare multiple cards at one glance.
Tenamint's web app is live! Users are now able to buy and sell tokens. Feel free to check it out and try it out for yourself.
Working on this project was extremely rewarding in a number of ways. As the UI Lead and primary creative person, I loved pushing my creative limits by being able to design branding guidelines and design systems. I feel like I've really grown in my visual design skills as a result of this project.
Being a part of a small and highly collaborative team allowed me to work closely with everyone from developers to CEOs. This was the first time I had ever experienced collaboration at this level, and I loved every part of it. We were able to rapidly iterate, creatively problem solve, and come up with solutions that would create the best possible product for our users, whether they're crypto buffs or trading card collectors.
