Verizon Total WirelessVerizon Total Wireless
A multi-line phone cart where every line shows what it costs.回線ごとに、いくら払うのかが見えるカート。
Challenge課題
Customers adding two, three or four lines faced compounding rules — plan tier, device, AutoPay, BYOD discounts — and the cart hid what they would actually pay each month. No per-line breakdown, no visible discounts at the moment of decision. Confusion, more than price, drove abandonment.2 回線、3 回線と増やすほど、プラン、端末、AutoPay、BYOD 割引が絡み合う。なのにカートは、毎月いくら払うのかを見せていなかった。回線ごとの内訳も、割引も見えない。離脱の原因は価格より、この分からなさだった。
Solution解決
Instead of static mockups I live-coded six working prototypes, because drawers, accordions and live price updates only make sense in code. The decisive move was the line-item box: each line gets its own small card with plan, device and cost, under a persistent savings and due-today bar. The pattern shipped across desktop and mobile.静止画のモックではなく、動く試作を 6 本コードで書いた。ドロワーやアコーディオン、その場で変わる価格は、動かさないと判断できないからだ。決め手は「回線ごとの小さな箱」。回線ごとにプラン・端末・金額をまとめ、その上に割引と今日の支払額を常に出す。この型はデスクトップとモバイルで採用された。
Impactインパクト
My live-coded prototypes landed per-line pricing and a savings bar that shipped on desktop and mobile.ライブコード試作で回線別料金と割引バーを形にし、デスクトップとモバイルで採用された。
What I handled担当フェーズ
- Researchリサーチ
- Business / Strategyビジネス／戦略
- Conceptコンセプト
- UX / UIUX／UI
- Design Systemデザインシステム
- Prototypeプロトタイプ
- Build実装
- Launch / Growthローンチ／グロース
Pricing prototypes 料金まわりの試作
Six live HTML explorations on the same tokens and motion rules — toggle mobile or desktop width to see drawers, sheets and comparison layouts reflow. 同じトークンと動きのルールで書いた HTML の試作が 6 本。モバイルとデスクトップの幅を切り替えて、シートや比較表の挙動の違いを見られる。
Plan comparison table with sticky columns across three tiers.3 プランを横並べで比べる表。列を固定してスクロール。
Step-by-step configurator with live totals and a savings bar.段階式の設定画面。金額はその場で更新し、割引バーを常に表示。
Line-item cart boxes with a persistent savings and due-today bar.回線ごとの小さな箱と、割引・今日の支払額を出し続けるバー。
Simplified multi-line flow with a lighter step pattern.手順を絞った、複数回線向けの軽い流れ。
Shipped cart pattern — side panel on desktop, bottom sheet on mobile.採用後のカート。デスクトップは横パネル、モバイルは下からのシート。
Shipped checkout — stacked steps on mobile, summary column on desktop.採用後の決済。モバイルは段階を縦に、デスクトップは要約を横に。
The brand, rebuilt as a coded design system ブランドを、コードのデザインシステムとして組み直す
The brand only existed in Figma, so running-code prototypes could not use real tokens or components. I rebuilt navy, teal and action-red semantics, Galano type, and a typed shadcn/ui registry — twelve installable components with a live styleguide above. ブランドは Figma の中にしかなく、動く試作に本物のトークンや部品が使えなかった。ネイビー・ティール・アクション赤の意味トークン、Galano、型付きの shadcn/ui 部品集——12 個を 1 つずつ入れられる——と、その上の動くスタイルガイドとして組み直した。
12
registry components, typed and installable one by one部品集の部品。型付きで、1 個ずつ入れられる
2
token layers: core colours, then semantic rolesトークンの層。元の色と、意味の役割
3
styleguide sections: brand, components, guidesスタイルガイドの章。ブランド、部品、使い方
Six working prototypes, not six mockups 静止画ではなく、動く試作を 6 本
A side drawer that becomes a bottom sheet, a price that updates as you add a line, an accordion that reveals discounts only when asked — none of this can be judged in a static frame. So I mapped the one-line and two-line purchase flows in Figma, then live-coded the bets in HTML, CSS and JavaScript: a plan comparison table with sticky columns, a step-by-step React configurator with real-time totals, and cart panels that tried different ways to show a multi-line price. Each one went straight to stakeholders and engineering as a living specification. 横から出るパネルが、スマホでは下から出るシートに変わる。回線を足すたびに金額が変わる。割引は、開いたときだけ見える。こうした動きは、止まった画面では判断できない。まず Figma で 1 回線と 2 回線の購入の流れを地図にし、案はコードで書いた。列を固定したプラン比較表、React で組んだ段階式の設定画面、複数回線の金額の見せ方を変えたカートのパネル。どれも関係部署とエンジニアに直接渡し、動く仕様書として使ってもらった。
One box per line, from cart to checkout カートから決済まで、回線ごとに一つの箱
The prototype that worked gave every phone line its own small card — plan, device and monthly cost at a glance — under a persistent “Savings & Due Today” bar. The price stopped being a single number to decode and became a list you could check line by line. The line-item cart, the per-line breakdown, the savings summary and the device-pairing steps went into the shipped shopping flow on desktop and mobile. うまくいった試作では、回線ごとに小さなカードを置いた。プラン、端末、月額がひと目で分かる。その上に「割引と今日の支払額」のバーを出したままにする。金額は読み解く一つの数字ではなく、1 行ずつ確かめられる一覧になった。回線ごとのカート、内訳、割引のまとめ、端末を選ぶ手順は、デスクトップとモバイルの購入の流れに採用された。
