Challenge
The challenge was to create a social and motivating product direction without letting the interface become crowded. The experience needed to feel light, structured and easy to scan, especially on smaller screens.
Back To Projects2025
Learning Project
RunClub.
Community-first running concept with focus on clear UX, structured content and a modern responsive frontend.
Next.jsTypeScriptTailwind
Overview
Project Foundation.
RunClub was created as a learning-focused concept to explore how a community-driven product can feel both energetic and easy to use. The project focused on translating content and interactions into a clean, mobile-friendly frontend experience.
Project Details
Type
Personal / Learning project
Stack
Next.js, TypeScript, Tailwind
Process
From Challenge To Outcome.
The process started with a simple product concept and moved through layout exploration, responsive structure, interface refinement and frontend implementation. Each step focused on making the experience feel motivating without losing clarity.
Solution
I approached the project with a clear visual hierarchy, structured spacing and responsive layouts built with modern frontend tooling. The goal was to make the product feel approachable while still giving it a strong visual identity.
Outcome
The result is a polished concept project that helped me strengthen my work with responsive UI, layout systems and product-oriented frontend thinking.
What Was Used
Tools & Execution.
The project was shaped through a mix of product thinking, interface design and frontend implementation. The tools below reflect the main workflow and technologies used to bring it together.
Next.js
TypeScript
Tailwind CSS
Figma
Primary Direction
A closer look at the visual direction, layout hierarchy and interface decisions behind the project.
UX / UI
Design Direction.
The UX/UI direction focused on strong spacing, friendly visual rhythm and mobile-first clarity. The interface was shaped to feel active and modern while keeping every section easy to scan and interact with.
Design Notes
This section is intended to show visual direction, interface thinking and supporting UX/UI material such as Figma screens, flows or design explorations. Each project can reuse the same structure while still feeling relevant to its own content.