♦ UI / UX Design — Case Study

ReadWave
Blog Platform

Project Type
UI/UX Case Study
Industry
Digital Media / Blogging
Role
UI/UX Designer (Solo)
Tools
Figma, Illustrator, Photoshop
Year
2025

A Platform for
Readers & Writers

ReadWave is a blog-based web platform where users can create, read, and interact with content simply and engagingly. The platform connects readers with writers across topics ranging from technology and culture to creative writing and lifestyle.

The challenge was to design an interface that feels immersive and editorial — drawing readers in with bold visual storytelling — while keeping navigation effortless and discovery intuitive. The result is a dark, high-contrast UI built around content-first design principles.

Platform purpose: Read Wave is a place to read and share blog posts. It's easy to use, helps readers find interesting content, and lets bloggers connect with others. The design focus was to build a clean and modern interface that supports easy navigation, encourages content discovery, and promotes user interaction.

♦ Final UI Screens

The Finished Design

Eight fully designed screens covering the complete user journey — from landing on the homepage to reading an article, exploring categories, logging in, and managing a writer account.

ReadWave Home Screen
Home
ReadWave Explore Screen
Explore
ReadWave Blog View
Blog View
ReadWave Blog View 2
Blog View 2
ReadWave Blog Upload
Blog Upload
ReadWave About
About Us
ReadWave Login
Login
ReadWave Writer Account
Writer Account
ReadWave Explore 2
Explore 2

♦ How It Was Built

The Design Process

A structured five-stage design methodology was followed — rooted in empathy and validated through testing — to ensure every design decision was purposeful and user-backed.

01
Empathise
User interviews and surveys were conducted to identify pain points faced by readers and bloggers on existing platforms.
02
Define
Insights were synthesised to outline core problems and translate them into actionable design objectives focused on clarity, engagement, and discoverability.
03
Ideate
Wireframes and layout concepts were generated to explore solutions for simplified browsing, personalised discovery, and built-in social interaction.
04
Prototype
Interactive prototypes were created in Figma to simulate the user journey, enabling early usability validation and refinement.
05
Test & Iterate
Based on findings, the interface and features were refined to improve clarity, interaction, and overall experience.
Design Process Diagram

♦ Wireframes

From Structure
to Screen

Before moving into high-fidelity visuals, low-fidelity wireframes were produced to map out layout, content hierarchy, and user flow — ensuring the information architecture was solid before any visual decisions were made.

Wireframe 1
Wireframe 2
Wireframe 3
Wireframe 4
Wireframe 5
User Flow

♦ User Research

Understanding the Users

User personas were developed from research insights to keep design decisions grounded in real user needs — representing both readers looking for quality content and writers wanting to grow their audience.

User Persona 1
User Persona 2

♦ Visual Identity

Colour & Typography

The visual language of ReadWave is bold and editorial — a dark navy base with electric teal and neon lime accents that give the platform energy and personality. Blinker was chosen as the primary typeface for its modern geometric character and strong screen legibility.

#07151F
#009AA8
#E9FF42
#A3ACB1
Brand Colour Palette
Typography — Blinker

♦ Key Outcomes

What This Project Demonstrates

🎯
End-to-End UX Process
From user research and personas through wireframing, prototyping, and final UI — this project demonstrates the full UX design process applied consistently across a complete product.
🖤
Editorial Dark UI
The dark, high-contrast interface paired with neon accents creates a premium editorial feel — proving that content platforms don't have to default to plain white layouts.
📖
Content-First Design
Every layout decision — from the hero article placement to the category browsing grid — puts content at the centre, reducing friction and keeping users engaged longer.
Project Overview
← Previous Project
Website Redesign
Sephora Redesign
Sephora
Next Project →
Shopify Design
Vitly Nutrition
Vitly

Want a design like this?

Whether it's a full UI/UX case study, a Shopify store, or a brand new website — I'd love to work on your project.

Start a Project
← Back to all work