CASE STUDY
-
WEB3
Blockchain Summit
A Mobile-First Conference Landing Page
ROLE
UX/UI & Visual Designer
TOOLS
Figma
01 - OVERVIEW
Responsive, striking,
built to sell tickets
BlockSphere Summit is a comprehensive UI/UX test project based on a brief for a premier blockchain conference network dedicated to reshaping the future of finance. With the hypothetical event set for January 15, 2025, in Singapore - a rapidly rising global crypto hub - the brief required designing a platform to bring together leading crypto companies, entrepreneurs and industry experts.
Treating this test project with the rigor of a live product, I worked independently as the sole UX/UI Designer to take full ownership of the end-to-end process. Designed with a strict focus on mobile-first conversion rate optimization (CRO), the aim was to translate the project brief into a visually striking, responsive digital experience that processes heavy informational content into a seamless ticket-purchasing funnel for an international audience.
PRIMARY GOAL
Drive ticket purchases through information architecture, credibility-building design and mobile-optimized flows
OWNERSHIP
Sole UX/UI designer — brief through brand identity to final UI
PRIMARY GOAL
AI-assisted competitor research, mobile-first build, component-driven Figma system
02 - UX PROCESS
Design Thinking
The page answers the visitor's questions in a specific order - each section removing one more piece of friction before the ask. What is it?→When & where?→When does it start?→What topics?→Who's speaking?→Buy tickets
01
Competitor Research
Studied successful conference websites to identify best practices - what sections matter most, how to build credibility and how to structure ticket CTAs
02
Information Architecture
Planned page flow to answer user's core questions in order: What is it? → Who's speaking? → What topics? → When & where? → How to get tickets?
03
Tech-Inspired Identity
Crafted a futuristic visual identity using rich purple gradients, high-contrast dark sections, and organized grid-based layouts to communicate trust, innovation, and the technological sophistication of the Web3 ecosystem.
04
Mobile Build
Prioritized mobile experience - crucial as many attendees would browse and purchase tickets directly from their smartphones
03 - MOBILE-FIRST EXECUTION
Designing for Immediate,
On-The-Go Intent
Conference links are typically discovered on social media, in messaging apps, or in newsletter emails - meaning most visitors click through on a phone the instant they hear about the event. If the mobile experience doesn't deliver quick answers, they bounce before ever reaching a desktop.
01
INSTANTLY SCANNABLE ESSENTIALS
Date, location, speakers and the ticket CTA are readable in seconds on the smallest screens.
02
CTA's PLACED THROUGHOUT
Ticket-purchasing prompts recur strategically down the page, not just once at the top.
03
CONDENSED SCHEDULE
Heavy session information is compressed so on-the-go users can evaluate value and convert without excessive scrolling.
04 - KEY FEATURES
Every section
serves a purpose
ANCHOR
Event Details Block
Clear presentation of event date, location and schedule - helping visitors quickly find essential details without hunting through the page
URGENCY
Conversion Countdown
A prominent, FOMO-inducing countdown timer placed directly above a ticket CTA to drive immediate action.
RELEVANCE
Topics Overview
A numbered presentation of key discussion topics - like "What Does Web 3.0 Mean for Enterprises" - for instant ROI clarity.
CREDIBILITY
Featured Speakers
A clean 12-person grid of keynote speakers and industry experts to build trust and generate real interest.
04 - VISUAL DESIGN
The asthetic
A modern Web3-inspired aesthetic defined by rich purple gradients, minimalist geometry, high-contrast sections, and refined typography. The visual language feels futuristic, premium, and professional, creating a sense of innovation, anticipation, and digital sophistication.
COLOR SYSTEM
Primary
TYPOGRAPHY STRATEGY
Bold headlines, clean body
High-contrast white headings against the deep navy background ensure immediate readability. Clean sans-serif body text keeps information accessible without visual strain.
GRID & LAYOUT
Structured, precision-first
Clean grid layouts echo the precision associated with blockchain technology. Generous spacing keeps the page breathable despite information density.
05 - SCREENS
Wireframe through
every breakpoint
MOBILE SCREENS
MOBILE FIRST
Mobile-because tickets are bought on phones.
I ensured the design was fully responsive, with special attention to how content displays on mobile devices - crucial as many potential attendees would be viewing and purchasing tickets directly from their phones.
RESPONSIVE DESKTOP SCREEN
06 - TECHNICAL EXECUTION & OUTCOMES
Built for
Handoff & Scalability
DESIGN SYSTEMS & HANDOFF
Built with a robust Figma component library, variants, and Auto Layout - prepped for developer handoff and rapid iteration.
CLEAR CTA PATH
Prominently placed CTAs, striking visual contrast and a clean information hierarchy guide users toward purchase intent.
A/B TESTING MINDSET
The component-based setup allows rapid testing of hero CTA placement, color, and copy post-launch.
07 - HYPOTHETICAL OUTCOMES
What the design
achieves
Clear CTA Path
Design successfully guides users toward ticket purchase intent through clear CTAs, credible speaker profiles and a clean information hierarchy
Desktop Responsive
Fully responsive design ensures a seamless browsing and purchasing experience for the majority of attendees
Brand Cohesion
Consistent visual identity across all pages creates a professional, trustworthy conference brand that matches the prestige of the event
08 - REFELCTION
Learned &
guide, not distract
WHAT I LEARNED
Clarity, hierarchy, and competitive research sharpen every decision
This test project sharpened my ability to design with clarity and hierarchy - applying insights from competitive research to build mobile, scalable layouts tailored for an international tech and finance audience. Designing for an unfamiliar domain challenged me to communicate complex concepts simply.
WHAT I DID ADD WITH MORE TIME
Interactive speaker profiles with expandable bios, session details and social links
Motion design elements - animated hero section and scroll-triggered transitions