Back to selected work

SteamDeals.

Helping players decide when a game is actually worth buying.

Visit live SteamDeals
MY ROLE

Product Design · UI/UX · Front-End
Data Integration · Deployment

STACK

JavaScript · HTML/CSS
Cloudflare Pages · Workers · D1

PRODUCT

Bilingual game-deal platform
Search · Compare · Watchlists

The real SteamDeals interface showing a watchlist, filters, prices and recorded lows
Live product · Watchlist, price filters, and recorded-low comparison. Prices shown are from the supplied screenshot.
01 / The problem

A discount needs context.

A large discount percentage does not tell a player whether the current price is unusually good, how it compares with previously recorded prices, or whether waiting may be worthwhile.

Discount alone

−90%

Current price: ¥13.60

With price context

At the recorded low

Current: ¥13.60 · Recorded low: ¥13.60
Above recorded low: ¥0.00
Lowest recorded: 7 October 2026

Information comparison using values from the supplied product screenshot; not a live price feed.

Can pricing information help players make faster purchasing decisions?

SteamDeals brings current prices, site-recorded lows, price trends, game information, official news, and personal watchlists into one experience.

02 / Design decisions

Less interpretation. More clarity.

Current priceSite-recorded lowDifferenceDiscountTime
SteamDeals game detail page for The Outlast Trials with current price, recorded low, difference and previous-check comparison
The game detail view connects current pricing with the site’s recorded observations.

A watchlist as a game radar

Follow games and view pricing alongside official updates. Guest-account flows reduce the commitment required to try the product.

Lightweight comparison

Compare several games within the same interface, rather than switching between individual store pages.

03 / From interface to product

Design decisions meet real data.

Stage 01

Visual direction

A Steam-inspired concept reorganized around price comparison and purchase decisions.

Stage 02

Interactions

Search, price and discount filters, comparison, watchlists, detail views, and news.

Stage 03

Data integration

Steam information and persisted price snapshots bring the interface beyond static mockups.

Stage 04

Deployment

Cloudflare deployment, empty states, bilingual flows, account persistence, and data migration.

04 / System architecture

An interface backed by a system.

Source

Steam Store / News

Application logic

Cloudflare Worker

FetchNormalizeCache
Persistence

Cloudflare D1

Price snapshots · User preferences · Watchlists

Presentation

SteamDeals UI

Workers handle application logic. D1 provides SQLite-based persistence for historical pricing and user-related data. The interface supports Chinese and English, guest accounts, and preference persistence.

Migrated and preserved 159 existing price records during the database transition.

05 / Reflection

The UI is part of a larger system.

Decisions that looked simple in a mockup became more complicated once real data, loading states, persistence, caching, and deployment were involved.

I learned to connect interface choices to data availability, technical constraints, and user expectations—and to iterate on issues discovered during real use.

Current State & Next Steps

Current

  • Site-recorded price history
  • Persistent watchlists
  • Notification preferences
  • Chinese and English interfaces

Recorded lows reflect collected records, rather than complete historical all-time lows.

Next

  • Expand historical coverage
  • Complete external notification delivery
  • Finish end-to-end Steam authentication validation
Next project

Mr. Question Mark

What if randomness itself became a deck-building resource?

Explore the case study