Bored Box was a curator and seller of NFTs for Web3 games.
A market downturn at the launch of a new product in late 2022 required a quick shift in strategy. The client devised a loyalty rewards program, titled Boredom, that would allow the brand to sell products at a wider range of price points. Our challenge was to design, build, and launch the front and backend infrastructure to support the program within two months.
The program was launched in February 2023. It generated:
As the sole Designer I worked closely with the team to interpret the loyalty rewards concept into a site map, user flows, and low to high-fidelity designs for all of the front-end touchpoints.
2 months
Customers earn Boredom points by purchasing a Bored Box or cartridge—or by linking their email address to their boredbox.io account. Points accumulate via weekly rates that vary by product. Customers use points to purchase other NFT game items from the store.
An important distinction is that only Bored Boxes that have been opened would earn points. A goal of this program was to encourage customers to open a box.
A Bored Box is an NFT with five NFT game items inside that could be used for play within Web3 games. Boxes are closed upon initial purchase and customers must open a box to access the items.
The Genesis, the first Bored Box product released in early 2022 and sold for approximately 1K.
The Head of Product provided a thorough overview of the loyalty rewards program.
I translated the concept into user task flows and made note of how we would need to amend the existing site architecture for the program operate smoothly.
My notes on the loyalty rewards program and sketches of user flows and the updated site map. These notes served as reminders of important information that informed later phases of the design process.
I translated my notes into a site map, and used this document to ensure alignment with the team.
The site map also provided context of the overarching user journey, which guided the work of building wireframes.
The dashboard would act as the primary hub of the rewards system, making it an important interface of the project. We had the following goals for the dashboard design:
In this concept, I used cards to display individual items and their earn rates.
Pros:
The cards had plenty of space to illustrate the concept of owning an item and earning points.
Cons:
If a user owned multiples of a single item, displaying each on a single card would require scrolling through a significant amount of information. We encouraged ownership of multiple items and didn't want this behavior to create a negative dashboard experience.
The size of cards limited our ability to include sections that would encourage buying behavior. For example, space to display items available for purchase in the store.
In this iteration, I explored smaller cards in a carousel in order to leave space for other content.
Pros:
Plenty of space for content leading customers to purchase items.
Cons:
The smaller size of the cards did not provide enough space to explain the nuanced rules of earning points.
The limited space leant itself to display one card per item owned, which again, could create a lengthy scrolling experience.
This iteration uses a classic table pattern, and resolved the issues encountered in the first two concepts.
The layout would allow us to:
Better explain the nuanced details of item ownership and earning points.
Display content that would encourage purchases on the remaining space of the page.
Specifically, I considered:
A sampling of initial explorations of typography, iconography, color, and other visual elements. I generated many variations to find the best approach for achieving visual communication of the rewards system.
Through iteration and discussion with the team, we decided that items currently owned and items not yet owned should both appear within the table.
The proximity of item types offered big benefits:
Myself and the team liked the thin angular outline surrounding the dashboard in the exploration. However, this detail would not work for responsive design.
Through discussion and additional iteration, we found a way to incorporate the angular outline detail that would work for a responsive layout.
On the left, the original angular line concept. On the right, our method to apply this styling to portions of the interface.
On February 1st, 2023, we launched the dashboard and loyalty rewards program. The final design and supporting interfaces are featured below.
As with the default state, the empty state nudges users to complete actions that would lead to purchases. As stated, the designs were constructed with responsive design in mind.
The empty state for desktop and the active and empty states for mobile.
The storefront, this project's second main deliverable, allows users to redeem their loyalty rewards points for NFT game items. It was designed with responsiveness in mind, ensuring a seamless experience across devices.
A community member on X scrolling through the mobile version of the storefront page.
Simplifying revenue-generating actions was an overarching goal of this project. One of the advantages of blockchain e-commerce is that website visitors connect a wallet, which is readily available to make a purchase. Taking advantage of this, we designed and built a dynamic card that contained all of the necessary actions for purchasing an NFT from the store.
Demonstration from the live site of the dynamic card design. Here users could complete the blockchain equivalent of "Add to Cart" and confirm purchase without leaving their initial screen.
A favorite X post of mine with a customer appreciating the easy of the purchase process.
As we hoped for, the loyalty rewards program attracted a large number of our community members on Discord. Along with the increased traffic came increased sales.
A post on X referring to the number of points spent speaks to the level of activity on the website in the initial month and half after launch.
Posts on X about the new rewards system.
What I most enjoyed about this project was the opportunity to utilize my knowledge of semantics, visual design, and usability to create an interactive and responsive interface.
Another aspect that I enjoyed was the cross-functional collaboration with this tight-knit team. The iterative sessions with the Front-End Developer were some of the larger learning moments for me, and deepened my knowledge of HTML and CSS. All around, this was an enjoyable project and I hope to tackle similar challenges in the future.