Dashboard and E-Commerce Store for a Web3 Loyalty Rewards Program
Dashboard and E-Commerce Store for a Web3 Loyalty Rewards Program
Dashboard and E-Commerce Store for a Web3 Loyalty Rewards Program
Dashboard and E-Commerce Store for a Web3 Loyalty Rewards Program
Dashboard and E-Commerce Store for a Web3 Loyalty Rewards Program
Overview
The Problem
A market downturn called for innovation to stay competitive
After launching a new product in 2022, Bored Box struggled to sell its luxury-priced NFT gaming items due to a sharp downturn in the NFT market.
What's at Stake
Without action, revenue would decline
To remain competitive in the market downturn, the team introduced Boredom, a loyalty rewards program designed to diversify product offerings, attract new customers, and retain the existing community by offering products at varied price points.
My Role
I designed an end-to-end experience to support a loyalty rewards program
As the sole designer, I transformed the Boredom concept to reality within just two months. Collaborating closely with the Founder, Head of Product, and development team, I designed user flows and responsive interfaces. My work ensured that users could easily track points, explore rewards, and make purchases while supporting the client’s goals of engagement and retention.
A Project For
Bored Box
Bored Box was a curator and seller of NFTs for Web3 games. I completed this project while at Geletka Plus, a creative agency in Chicago. I was the sole designer embedded on the Bored Box team.
Overview
The Problem
A market downturn called for innovation to stay competitive
After launching a new product in 2022, Bored Box struggled to sell its luxury-priced NFT gaming items due to a sharp downturn in the NFT market.
What's at Stake
Without action, revenue would decline
To remain competitive in the market downturn, the team introduced Boredom, a loyalty rewards program designed to diversify product offerings, attract new customers, and retain the existing community by offering products at varied price points.
My Role
I designed an end-to-end experience to support a loyalty rewards program
As the sole designer, I transformed the Boredom concept to reality within just two months. Collaborating closely with the Founder, Head of Product, and development team, I designed user flows and responsive interfaces. My work ensured that users could easily track points, explore rewards, and make purchases while supporting the client’s goals of engagement and retention.
A Project For
Bored Box
Bored Box was a curator and seller of NFTs for Web3 games. I completed this project while at Geletka Plus, a creative agency in Chicago. I was the sole designer embedded on the Bored Box team.
Overview
The Problem
A market downturn called for innovation to stay competitive
After launching a new product in 2022, Bored Box struggled to sell its luxury-priced NFT gaming items due to a sharp downturn in the NFT market.
What's at Stake
Without action, revenue would decline
To remain competitive in the market downturn, the team introduced Boredom, a loyalty rewards program designed to diversify product offerings, attract new customers, and retain the existing community by offering products at varied price points.
My Role
I designed an end-to-end experience to support a loyalty rewards program
As the sole designer, I transformed the Boredom concept to reality within just two months. Collaborating closely with the Founder, Head of Product, and development team, I designed user flows and responsive interfaces. My work ensured that users could easily track points, explore rewards, and make purchases while supporting the client’s goals of engagement and retention.
A Project For
Bored Box
Bored Box was a curator and seller of NFTs for Web3 games. I completed this project while at Geletka Plus, a creative agency in Chicago. I was the sole designer embedded on the Bored Box team.
Project Impact
Project Impact
Project Impact
We launched the rewards program on time and boosted the business
We launched the rewards program on time and boosted the business
We launched the rewards program on time and boosted the business
Quick 2 month turnaround:
From concept to code, we launched this project in a short timeline
Quick 2 month turnaround:
From concept to code, we launched this project in a short timeline
Quick 2 month turnaround:
From concept to code, we launched this project in a short timeline
5x increase in website traffic and sales.
5x increase in website traffic and sales.
5x increase in website traffic and sales.
And we received praise from the community
A few examples of community praise on X, formerly Twitter.
A few examples of community praise on X, formerly Twitter.
A few examples of community praise on X, formerly Twitter.
A few examples of community praise on X, formerly Twitter.
Discovery
Discovery
Discovery
I began by understanding the loyalty concept
Users could earn points by purchasing Bored Box NFTs or creating a boredbox.io user account, which could then be used to buy Web3 game items. I mapped these actions into user flows.
The concept for the new rewards program. Select Bored Box products earned points that could be redeemed for web3 game items.
I began by understanding the loyalty concept
Users could earn points by purchasing Bored Box NFTs or creating a boredbox.io user account, which could then be used to buy Web3 game items. I mapped these actions into user flows.
The concept for the new rewards program. Select Bored Box products earned points that could be redeemed for web3 game items.
I began by understanding the loyalty concept
Users could earn points by purchasing Bored Box NFTs or creating a boredbox.io user account, which could then be used to buy Web3 game items. I mapped these actions into user flows.
The concept for the new rewards program. Select Bored Box products earned points that could be redeemed for web3 game items.
Next, I updated the site map to create alignment with the team
I integrated the user flows into the existing site map. This step ensured team alignment and provided a clear framework for wireframing and development decisions.
An abridged site map showing the existing pages of the website (shown in dark grey) and the new pages needed for the loyalty concept (here in green).
Next, I updated the site map to create alignment with the team
I integrated the user flows into the existing site map. This step ensured team alignment and provided a clear framework for wireframing and development decisions.
An abridged site map showing the existing pages of the website (shown in dark grey) and the new pages needed for the loyalty concept (here in green).
Next, I updated the site map to create alignment with the team
I integrated the user flows into the existing site map. This step ensured team alignment and provided a clear framework for wireframing and development decisions.
An abridged site map showing the existing pages of the website (shown in dark grey) and the new pages needed for the loyalty concept (here in green).
I mapped the key user flows to support the new concept
A user flow outlining the intended steps for creating a profile on the website. This was one of many key user flows to creating the loyalty concept.
I mapped the key user flows to support the new concept
A user flow outlining the intended steps for creating a profile on the website. This was one of many key user flows to creating the loyalty concept.
I mapped the key user flows to support the new concept
A user flow outlining the intended steps for creating a profile on the website. This was one of many key user flows to creating the loyalty concept.
Iterative Design
Iterative Design
Iterative Design
With the concept clear, I focused on the design of the dashboard
Our vision of an intuitive experience included designing a central space that would educate users about how to earn and keep track of points, as well as nudge users towards additional purchases. For this nexus of user needs and business goals, I used an iterative approach to find the right balance.
A sketch of the dashboard concept. The main challenge to resolve was how to communicate which owned products would earn points.
With the concept clear, I focused on the design of the dashboard
Our vision of an intuitive experience included designing a central space that would educate users about how to earn and keep track of points, as well as nudge users towards additional purchases. For this nexus of user needs and business goals, I used an iterative approach to find the right balance.
A sketch of the dashboard concept. The main challenge to resolve was how to communicate which owned products would earn points.
With the concept clear, I focused on the design of the dashboard
Our vision of an intuitive experience included designing a central space that would educate users about how to earn and keep track of points, as well as nudge users towards additional purchases. For this nexus of user needs and business goals, I used an iterative approach to find the right balance.
A sketch of the dashboard concept. The main challenge to resolve was how to communicate which owned products would earn points.
I iterated multiple layout approaches that could compliment the existing design system
I started with wireframes, testing them against the project requirements. After weighing pros and cons, I explored alternatives and refined the design. While much of this work was independent, I regularly checked in with my team for feedback. Once we landed on a strong solution, I fine-tuned the visuals for clarity and usability.
I iterated multiple layout approaches that could compliment the existing design system
I started with wireframes, testing them against the project requirements. After weighing pros and cons, I explored alternatives and refined the design. While much of this work was independent, I regularly checked in with my team for feedback. Once we landed on a strong solution, I fine-tuned the visuals for clarity and usability.
I iterated multiple layout approaches that could compliment the existing design system
I started with wireframes, testing them against the project requirements. After weighing pros and cons, I explored alternatives and refined the design. While much of this work was independent, I regularly checked in with my team for feedback. Once we landed on a strong solution, I fine-tuned the visuals for clarity and usability.
Large cards
Large cards limited the amount of other content we could display on the page.
Large cards
Large cards limited the amount of other content we could display on the page.
Large cards
Large cards limited the amount of other content we could display on the page.
Small cards
Small cards did not provide enough space for product details.
Small cards
Small cards did not provide enough space for product details.
Small cards
Small cards did not provide enough space for product details.
A table
A table provided enough space for product details and content needs.
A table
A table provided enough space for product details and content needs.
A table
A table provided enough space for product details and content needs.
The table layout had the greatest potential, so I explored visual styling that would sit within the existing system
With the team in agreement that the table was the best approach. I explored the use of iconography, typography, spacing, and other styling details to visually communicate the connection between ownership of items and earning points.
I generated many visual design variations. This step aided the task of narrowing down to the most efficient approach.
The table layout had the greatest potential, so I explored visual styling that would sit within the existing system
With the team in agreement that the table was the best approach. I explored the use of iconography, typography, spacing, and other styling details to visually communicate the connection between ownership of items and earning points.
I generated many visual design variations. This step aided the task of narrowing down to the most efficient approach.
The table layout had the greatest potential, so I explored visual styling that would sit within the existing system
With the team in agreement that the table was the best approach. I explored the use of iconography, typography, spacing, and other styling details to visually communicate the connection between ownership of items and earning points.
I generated many visual design variations. This step aided the task of narrowing down to the most efficient approach.
A close up of the details I explored
A close up of the details I explored
A close up of the details I explored
This exploration uses color to denote which owned items are earning points. The B64, outlined in green is earning points. The Genesis, outlined in red, is not earning points.
This exploration uses color to denote which owned items are earning points. The B64, outlined in green is earning points. The Genesis, outlined in red, is not earning points.
This exploration uses color to denote which owned items are earning points. The B64, outlined in green is earning points. The Genesis, outlined in red, is not earning points.
This exploration uses color to highlight items that earn points while also applying Gestalt principles. The B64 at the bottom is visually separated from the other items, indicating that it does not earn points.
This exploration uses color to highlight items that earn points while also applying Gestalt principles. The B64 at the bottom is visually separated from the other items, indicating that it does not earn points.
This exploration uses color to highlight items that earn points while also applying Gestalt principles. The B64 at the bottom is visually separated from the other items, indicating that it does not earn points.
Launch
Launch
Launch
The final dashboard was launched in February 2023
The dashboard was key to the success of the rewards program. In this space users could track their points and access CTAs that would lead to earning more points.
The dashboard was designed and built to be responsive. Shown here are the final desktop and mobile versions of the design.
The final dashboard was launched in February 2023
The dashboard was key to the success of the rewards program. In this space users could track their points and access CTAs that would lead to earning more points.
The dashboard was designed and built to be responsive. Shown here are the final desktop and mobile versions of the design.
The final dashboard was launched in February 2023
The dashboard was key to the success of the rewards program. In this space users could track their points and access CTAs that would lead to earning more points.
The dashboard was designed and built to be responsive. Shown here are the final desktop and mobile versions of the design.
Along with the dashboard, the e-commerce storefront was another key deliverable
The storefront allowed customers to discover items they could use their points to purchase. The design was optimized for responsive displays.
A community member on X scrolling through the mobile version of the storefront.
Along with the dashboard, the e-commerce storefront was another key deliverable
The storefront allowed customers to discover items they could use their points to purchase. The design was optimized for responsive displays.
A community member on X scrolling through the mobile version of the storefront.
Along with the dashboard, the e-commerce storefront was another key deliverable
The storefront allowed customers to discover items they could use their points to purchase. The design was optimized for responsive displays.
A community member on X scrolling through the mobile version of the storefront.
A quick purchase feature streamlined revenue-generating actions
An advantage 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.
A video from the live site of the dynamic card design. Here users could complete the blockchain equivalent of adding an item to a cart and confirming a purchase while remaining on the same screen.
A quick purchase feature streamlined revenue-generating actions
An advantage 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.
A video from the live site of the dynamic card design. Here users could complete the blockchain equivalent of adding an item to a cart and confirming a purchase while remaining on the same screen.
A quick purchase feature streamlined revenue-generating actions
An advantage 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.
A video from the live site of the dynamic card design. Here users could complete the blockchain equivalent of adding an item to a cart and confirming a purchase while remaining on the same screen.
Lessons Learned
Lessons Learned
Lessons Learned
Cross-functional collaboration was essential for meeting our tight deadline
Clear alignment was crucial for success on a project with such a tight timeline. Strong leadership from the Product Manager, daily stand-ups, and iterative working sessions are what kept us moving forward.
Cross-functional collaboration was essential for meeting our tight deadline
Clear alignment was crucial for success on a project with such a tight timeline. Strong leadership from the Product Manager, daily stand-ups, and iterative working sessions are what kept us moving forward.
Cross-functional collaboration was essential for meeting our tight deadline
Clear alignment was crucial for success on a project with such a tight timeline. Strong leadership from the Product Manager, daily stand-ups, and iterative working sessions are what kept us moving forward.
If I were to start this project today, I would incorporate testing into the process
Throughout the process, I relied on my teammates’ perspectives to evaluate whether the designs effectively conveyed interactivity and the reward program’s rules. In hindsight, incorporating A/B and preference testing would have provided valuable insights from our fanbase—both strengthening their connection to the product and validating our approach. Fortunately, our dashboard design had a meaningful impact on the business and was well received by the community. I believe this success is a testament to the Founder’s deep understanding of the web3 gaming industry and their fanbase.
If I were to start this project today, I would incorporate testing into the process
Throughout the process, I relied on my teammates’ perspectives to evaluate whether the designs effectively conveyed interactivity and the reward program’s rules. In hindsight, incorporating A/B and preference testing would have provided valuable insights from our fanbase—both strengthening their connection to the product and validating our approach. Fortunately, our dashboard design had a meaningful impact on the business and was well received by the community. I believe this success is a testament to the Founder’s deep understanding of the web3 gaming industry and their fanbase.
If I were to start this project today, I would incorporate testing into the process
Throughout the process, I relied on my teammates’ perspectives to evaluate whether the designs effectively conveyed interactivity and the reward program’s rules. In hindsight, incorporating A/B and preference testing would have provided valuable insights from our fanbase—both strengthening their connection to the product and validating our approach. Fortunately, our dashboard design had a meaningful impact on the business and was well received by the community. I believe this success is a testament to the Founder’s deep understanding of the web3 gaming industry and their fanbase.
Contents
My Role
Product Design Lead
Information Architecture
User Flows
Design System
The Team
Founder
Head of Product
Front-end Developer
Back-end Developer
Duration and date
4 Months
2022
My Role
Product Design Lead
Information Architecture
User Flows
Design System
The Team
Founder
Head of Product
Front-end Developer
Back-end Developer
Duration and date
4 Months
2022
My Role
Product Design Lead
Information Architecture
User Flows
Design System
The Team
Founder
Head of Product
Front-end Developer
Back-end Developer
Duration and date
4 Months
2022
View more of my work
View more of my work
View more of my work
Let's Connect
I am open to impactful product design opportunities, expanding my network, and mentoring others. Say hello through email or LinkedIn.
catjanky@gmail.com
Let's Connect
I am open to impactful product design opportunities, expanding my network, and mentoring others. Say hello through email or LinkedIn.
catjanky@gmail.com
Let's Connect
I am open to impactful product design opportunities, expanding my network, and mentoring others. Say hello through email or LinkedIn.
catjanky@gmail.com