Case Study · Featured Project
Halcyon
Platform
Full-stack design & development engagement — from discovery to conference-day launch in 14 weeks.
Company
Halcyon Inc.
Live Site
halcyon.dev ↗Timeline
14 Weeks
Mar–Jun 2024
Services
Design · Dev · Web3
Status
LiveOverview
About the Project
Halcyon needed a complete product overhaul. Their existing platform was a patchwork of legacy tools with no cohesive design language, an inconsistent codebase, and zero user retention mechanics. We embedded as a full-stack product team — UX research, UI design, frontend & backend engineering, and a blockchain-based rewards layer.
"Working with Saif's team felt like having a co-founder who could build anything. They didn't just execute specs — they shaped the product vision."
Scope Breakdown
Tech Stack
Discovery
Requirement Analysis
Functional
- ▹OAuth 2.0 + MFA auth
- ▹Real-time dashboard
- ▹Subscription system
- ▹Plugin marketplace
- ▹On-chain token rewards
Non-Functional
- ▹<1.5s TTI target
- ▹99.9% uptime SLA
- ▹WCAG 2.1 AA
- ▹Horizontal AWS scaling
- ▹GDPR + SOC 2
Design Requirements
- ▹Dark-first language
- ▹Developer aesthetic
- ▹Unified component system
- ▹Fully responsive
- ▹Micro-interaction layer
Stakeholder / Persona Matrix
| Persona | Goal | Pain Point | Priority |
|---|---|---|---|
| Senior Dev | Fast plugin setup | Fragmented tools | High |
| Team Lead | Analytics & billing | No visibility | High |
| OSS Contributor | Earn rewards | No recognition | Medium |
Problem Space
Challenges
Legacy Architecture Lock-in
Migrating a jQuery/PHP codebase to Next.js without breaking production — like performing surgery on a live patient.
Design Inconsistency at Scale
40+ screens, no shared component library, no token system. Every feature looked like it was built by a different team.
Blockchain UX Friction
Making wallet connections and gas fees invisible to non-crypto users while keeping full transparency for power users.
14-Week Hard Deadline
A conference keynote was locked in. We ruthlessly prioritised an MVP feature set while building a clear post-launch roadmap.
Approach
Our Solutions
Strangler Fig Migration Pattern
Wrapped legacy endpoints behind a new API gateway, migrating routes one-by-one with zero downtime via feature flags.
Atomic Design System from Day 1
Figma + Tailwind token sync via a Node.js script reading the Figma API — design and code always in perfect sync.
Abstracted "Magic Wallet" Web3 Layer
Custodial wallet abstraction for regular users, full wallet connect for power users. Gas fees subsidised via meta-transaction relayer.
Agile Sprints with Hard-Deadline Buffer
2-week sprints with a mandatory 2-week QA buffer before launch. Saved us when a key API auth scheme changed in week 11.
Design System
Style Guide
▹ Typography
Display
Teko Bold
Teko · 600/700 · Headlines
Body
DM Sans Regular
The quick brown fox jumps over the lazy dog.
DM Sans · 300–600
Code / Labels
Roboto Mono 500
const x = () => ship();
0x1a2b3c4d
Roboto Mono · 300–600
▹ Color System
Navy Dark
Navy
Navy Light
Primary
Slate Lighter
▹ Brand / Logo Guideline
Primary — Dark BG
Reversed — Light BG
Don'ts
- ✕Don't stretch
- ✕Don't change accent
- ✕Min 120px wide
▹ Layout Standard
Grid System
- ▹12-col · 24px gutter
- ▹Max width: 1280px
- ▹Page padding: 24px / 48px
Spacing (8px base)
▹ Gamification System
XP Points
Earned per action
Levels 1–50
Unlocks features
NFT Badges
ERC-5192 soulbound
$HLY Tokens
Weekly airdrop
Reward Flow
Outcomes
Results & Impact
3×
User Engagement
98
Lighthouse Score
0
Downtime at Launch
14w
On-Time Delivery
"The redesign wasn't just a technical upgrade — it fundamentally changed how our users feel about the product. Churn dropped 40% in Q1 and we started seeing organic word-of-mouth for the first time."
Alex Chen
CTO · Halcyon Inc.
How We Got There
Process & Timeline
Week 1–2
Discovery & Research
Stakeholder interviews, user testing, competitive analysis, technical audit.
Week 3–4
IA & Wireframes
Information architecture, user flows, lo-fi wireframes.
Week 5–7
Visual Design & System
Hi-fi designs, design token system, component library.
Week 8–11
Development Sprint
Frontend + backend parallel, CI/CD, API integrations, blockchain layer.
Week 12–14
QA, UAT & Launch 🚀
Regression testing, UAT sessions, performance tuning, conference launch.
Key Deliverables
- Figma design system (220+ components)
- Next.js 14 frontend application
- Node.js REST API + GraphQL gateway
- ERC-20 / ERC-5192 smart contracts
- WordPress headless CMS integration
- Full brand & style guide docs
- AWS infra + CI/CD pipelines
What's next?
Got a project in mind?
Whether you need a product built from scratch or want to level up an existing one — let's make it happen.