Web3 · Media

StarknetNews

A media hub for the Starknet ecosystem - news, live prices, hackathons, and community updates in one place. Designed for desktop and mobile so builders and newcomers can stay informed without hunting across Discord and Twitter.

Let's Connect
Role
UI/UX Designer and Researcher
Timeline
2 weeks
Tools
Figma, ChatGPT
Platform
Web (Desktop & Mobile)

Introduction

StarknetNews turns scattered ecosystem updates into a single, trusted media destination.

From headline carousels and categorized news feeds to live price dashboards, hackathon listings, and a newsletter signup - every page is built to help readers discover, learn, and stay connected with Starknet across desktop and mobile.

Context

From fragmented updates to one trusted hub

Problem

News, prices, and events live everywhere

Starknet updates live everywhere - Twitter threads, Discord pins, blog posts, and price trackers with no shared design language. Newcomers struggle to find credible news; power users waste time jumping between tabs to track prices, events, and hackathons.

Solution

One responsive media destination

StarknetNews unifies ecosystem media into one responsive site - curated news feeds, live price tables, hackathon boards, and a newsletter CTA - with a cosmic purple visual language that feels native to Web3 without sacrificing readability.

Design Process

From research to responsive screens

A focused four-step flow - ecosystem research, structure in wireframes, polished hi-fi screens, then layouts tuned for desktop and mobile.

  1. Research

    Competitive audits, reader interviews, and content mapping across news, prices, and events.

  2. Wireframing

    Low-fi layouts for home, news, prices, hackathons, and newsletter flows before visual polish.

  3. Hi-fi design

    Full-color screens with Starknet's purple system, typography, and editorial hierarchy.

  4. Responsive layout

    Desktop grids and mobile scroll patterns so both personas can scan without friction.

User Personas

Two readers shaped the architecture

A daily ecosystem tracker and a curious newcomer - each with different scanning habits and trust signals.

Kofi Mensah

Kofi Mensah

Ecosystem Builder

  • Accra, Ghana
  • 31 years old
  • Checks news daily

Goals

  • Track STRK price and DeFi metrics daily
  • Find hackathons before registration closes
  • Share credible news with his dev community

Pain Points

  • News buried in Discord and X threads
  • Price data scattered across dashboards
  • No single source for ecosystem events
Amira Hassan

Amira Hassan

Web3 Newcomer

  • Berlin, Germany
  • 24 years old
  • Reads on mobile first

Goals

  • Learn what Starknet is without jargon overload
  • Discover beginner-friendly articles and videos
  • Join the community newsletter safely

Pain Points

  • Overwhelmed by technical Twitter discourse
  • Can't tell which sources are trustworthy
  • Mobile sites feel cluttered and hard to scan

Empathy Map

Mapping Kofi's mindset - the daily reader who needs fast, trustworthy ecosystem updates on the go.

Says

  • "I just want one place for Starknet news and prices."
  • "If I miss a hackathon deadline, that's on me - but the info should be obvious."
  • "I share links in our group chat - they need to look legit."

Thinks

  • Time is money - scanning headlines should take seconds
  • Price movements matter more than opinion pieces
  • Design quality signals whether a source is serious

Does

  • Checks crypto Twitter and Discord every morning
  • Bookmarks price dashboards and hackathon pages
  • Reads on mobile during commutes, desktop at work

Feels

  • Frustrated when ecosystem news is fragmented
  • Confident when data is visual and up to date
  • Motivated to build when the community feels active

Wireframes

Low-fidelity layouts mapped the page structure before visual design - hero blocks, content grids, and navigation patterns for every major route.

Desktop wireframe - home page layout
Home
Desktop wireframe - news feed layout
News feed
Desktop wireframe - prices page layout
Prices
Desktop wireframe - hackathons page layout
Hackathons
Desktop wireframe - newsletter page layout
Newsletter

Final Screens

Hi-fi desktop designs - news feeds, price dashboards, hackathons, and newsletter signup.

StarknetNews desktop landing page - hero and latest news
Home - landing hero, insights carousel, and latest news
StarknetNews desktop hackathons page
Hackathons - filtered cards with ongoing, upcoming, and closed tabs
StarknetNews desktop newsletter page
Newsletter - community signup CTA
StarknetNews desktop prices - key metrics
Prices - Starknet key metrics dashboard
StarknetNews desktop prices - DeFi tokens
Prices - DeFi tokens table
StarknetNews desktop prices - NFT collections
Prices - NFT collections floor data

Reflection

What I learned

  • One hub beats five tabs. Readers wanted news, prices, and events in one place - not scattered across Discord, X, and dashboards.
  • Scan patterns differ by persona. Kofi needed dense data tables; Amira needed calm editorial cards - both layouts had to coexist.
  • Purple is the brand anchor. A consistent Starknet purple system made the blog feel native to the ecosystem, not like a generic crypto news site.
  • Responsive is editorial, not shrink-to-fit. Mobile needed its own feed rhythm - not just stacked desktop columns.
Thank you for your time.

Explore more projects

← Back to top