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.
BallStreet's founders had previously had their website designed by a UX designer who was able to provide them with a solid base for the structure of their website. However, they wanted to apply the BallStreet brand to the interfaces. We were tasked with applying their brand book to the wireframes, as well as creating additional interfaces to take this idea to an MVP launch.
During our first few calls with the client, we talked through their goals for the website, as well as their PDR and their brand book. I was able to develop a thorough understanding of their current product, and their vision of what the product could be. With this knowledge, we began planning out our roadmap to get this product to MVP.
Our UX team had the opportunity to see our users in action when we tagged along with BallStreet at Toronto's Sport Card Expo, where we pitched the concept to card collectors in hopes that they would sign up. This three-day event was a fantastic learning experience, as not only were we surrounded by trading card culture, we also had conversations with people in our target audience.
On the first day of the convention, we pitched BallStreet the way that we saw it: an e-commerce website where people can purchase NFTs of trading cards. However, the more conversations we had with collectors, the more we learned about their perspective on BallStreet's concept. Although the product addresses common pain points that collectors have, many people were against the idea of bringing trading cards to NFTs. At the end of the day, trading card collectors love to own real, physical trading cards, and the concept of NFTs makes many people uncomfortable.
By the third day of the convention, we began pitching BallStreet without using buzzwords and instead focused on how it benefits card collectors. BallStreet wasn't supposed to be a substitute for collecting trading cards—it was an accessible way for people to own rare and expensive cards, no matter their budget.
The insights we learned at the Card Expo helped us in all aspects of the design process moving forward, from the verbiage we used to the format in which we displayed card images. We wanted to imitate the experience of owning a collection of real, physical cards.
BallStreet's branding is retro and sleek, appealing to nostalgic card collectors. The colour palette of faded blues and an off-white cream gives BallStreet's branding that vintage sports feel, while the bright orange makes important elements pop off the screen.
It was important for us to internalize this so that we could stay true to the client's branding throughout the redesign.
After we imported the current wireframes into Figma, we were able to go in and apply the branding across the website, page-by-page.
The key here was constant communication and collaboration with the client. We had weekly meetings with the founders, where we were able to validate our designs and ensure that they aligned with the client's vision. We also used Slack between weekly meetings to efficiently validate small changes. With all this communication, we were able to get valuable feedback on all our designs and apply that feedback to the wireframes.
We also worked closely with the development team who confirmed that our designs were able to be developed successfully and helped us modify any ideas that weren't possible.
At the start of the redesign process, we stuck very close with the guidelines outlined in the brand book. However, throughout this process, the client encouraged us to get bolder, bigger, and louder with our designs. We were given space to let our imaginations go wild, and as a result, we added elements to the original brand book. For instance, I implemented oversized header text and navy-tinted images to add boldness, without breaking the branding. Our additions still fit the original brand values while elevating them to the next level.
I am of the belief that branding depends heavily on its use case. It's important to see art the way its meant to be seen. Sometimes, you may pick a brand colour before applying it to a button and noticing the contrast is too low. And that's okay. The key is to be adaptable.
Now that we had redesigned the existing wireframes and established an aesthetic, it was time to create new pages and flows that were missing.
Katrina, a UX designer on our team, created the initial low-medium fidelity designs for the List Your Card flow. She referenced competitors like StockX to create a flow that users would already be familiar with using, making the process of listing a card as intuitive as possible.
As the team's UI Lead, I redesigned these screens with the website's new branding. The dark background behind the image makes the trading card pop without making the interfaces too busy.
I ran these designs by the client during our weekly meetings where I gathered some great feedback to improve my designs:
This feedback allowed me to transform my designs into a clean, simple, and intuitive experience.
I designed pages like the About Us, How It Works, and landing pages with the mindset of bolder, bigger, and louder design. As someone who struggles with designing outside of my comfort zone, this was equal parts educational and exhilarating, and I grew my UI design skills in a challenging way.
By communicating constantly with the client, I was able to create impactful designs that fit the rest of the website.
The trading card widgets had countless iterations throughout their creation. They started off with the client's illustration of how they pictured them functioning, and from there, the three of us ideated potential designs.
We A/B tested our designs during a few weekly meetings with the client, gathering their opinions and applying them to the next batch of iterations. Some of these ideas included:
I created a final widget with this feedback, and also used neumorphic design by making selected buttons appear to be pressed in.
The MVP website has been launched! Now we're onto some fun, post-MVP goodness.
Here are the next steps.
