Responsive Web Design

Dashboard and E-Commerce Store for a Web3 Loyalty Rewards Program

The rewards dashboard and the e-commerce storefront, two of the primary pages for the new loyalty rewards program.

The Problem

A Market Downturn Called for Innovation to Stay Competitive

After launching a new product in 2022, Bored Box faced a sharp decline in the NFT market, making it challenging to sell its luxury-priced NFT gaming items.

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 intuitive user flows and responsive interfaces. My work ensured that users could easily track points, explore rewards, and make purchases—all while supporting the client’s goals of engagement and retention.

When

2023

2 Months

Client

Bored Box was a curator and seller of NFTs for Web3 games.

Team

  • Founder
  • Head of Product
  • Front-end Developer
  • Back-end Developer
  • Product Designer (myself)

Impact

  • A fivefold increase in site traffic
  • An increase in sales
  • A positive response from the community

I Started Mapping the Loyalty Program into User Flows and an Updated Site Structure

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 and integrated them into the existing site map. This step ensured team alignment and provided a clear framework for wireframing and development decisions.

On the left, notes and sketches of user flows. On the right, the site map updated with the rewards program flows.

Next, I Focused on the Design of the Dashboard

Our vision of an intuitive experience including designing a central space that would educate users about how to earn points, keep track of points, and nudge users towards additional purchases. For this nexus of user needs and business goals, I used an iterative approach to find the right balance.

Screenshots of the final dashboard on desktop and mobile devices. I followed an iterative approach to arrive at this final design.

I Followed my Typical Iterative Process—Start with Broad Strokes, then Work on Details

The process I followed in designing the dashboard is typical to an approach I use in other projects. I start by building wireframe concepts and stress-testing them against the diverse needs identified during the user flow stage. After evaluating the pros and cons, I explore alternative approaches and keep refining as needed. While much of this process is independent, I regularly check in with my team to gather their perspectives and insights. Once we identify a solution that works, I fine-tune the visual details to ensure clarity and usability.

First Iteration: Large Cards

Our design system already included cards, making them a natural starting point for displaying items that customers owned.

Pros:

  • The cards provided plenty of space to visually explain item ownership and earning points.

Cons:

  • For users that owned many items, large cards would require scrolling through content and make it difficult to view a snapshot.
  • 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.

Second Iteration: Small Cards

Pros:

  • The smaller cards allowed space for promotional content that would encourage purchases.

Cons:

  • The size of the cards did not leave us enough space for explaining the nuances of how the rewards program worked.

Third Iteration: A Table

Resolved Issues:

  • A table layout allowed for clear communication of rules, displayed both owned and unowned items, and minimized scrolling.

Encouraged Purchases: 

  • In this approach we had ample space to incorporate unowned items as well as CTAs that could easily transition users into purchase flows.

With the Direction Clear, I Explored Visual Design Details

With the team in agreement that the table was the best approach. I explored the use of iconography, typography, spacing and other styling approaches to visually communicate the connection between ownership of items and earning points.

An annotated close up of details I sought to refine during the visual design exploration phase. Click an image to view the details.

Project Outcome

We Launched the Rewards Program and Supporting Designs in February 2023

The dashboard was key to the success of the rewards program. In this space users could track their points and would be persuaded to take actions to earn more points.

Along with the Dashboard, the E-Commerce Storefront was Another Key Deliverable

The storefront is where customers could discover items that could be purchased for points. The design was also designed for responsive displays.

A Quick Purchase Feature Streamlined Revenue-Generating Actions

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.

The New Program Boosted the Business and Earned Community Praise

5x

Increase in website traffic

$$

A marked increase in sales

Ultimately, the Web3 Market Proved to be Too Unstable

In December 2023, Bored Box closed its doors due to the instability of the Web3 NFT market. While this decision marked the end of the business, the Boredom loyalty program had been a bright spot, successfully driving engagement and diversifying offerings during its time.