Design & Interaction

Hi, I'm Doga.

Antalya, Turkey Toronto, CA

Graphic design student exploring the space between typography, brand identity and interaction design.

Tools

Figma
Adobe Ps, Pr, Ae, Ai, Id
Cursor
Claude
Affinity

What i'm building now

Bountt Beta · V1 Launching Summer 26 Since '67 (Toronto Maple Leafs) Integrated Campaign Visugenie Product Design & Dev

selected work

7 projects

Filters: all | web | branding | product

CTRLBREAK exhibition identity branding overview

branding CTRLBREAK

RGD × Distro Disco app interface , interaction design

Product design RGD × Distro Disco

Bountt , redesigning shared expenses as shared memories

Beta

product design Bountt

Fern & Sons Cycle Co. poster campaign mockups

branding Fern & Sons Cycle Co.

Screenshot from Ideas & Images web project

web design Ideas & Images

Visugenie website redesign , AI real estate visualization

web design Visugenie

branding Boots & Hearts

About

A bit about me

I’m a graphic design student at George Brown College in Toronto, originally from Turkey. I’m drawn to the intersection of design and psychology. When I’m not pushing pixels, I’m probably playing basketball,or experimenting with creative coding.

Open to Design internship opportunities for the Summer 2026

Email copied

home

Branding & Brand-Launch Rollout

FERN & SONS CYCLE CO.

Community-rooted bicycle workshop brand identity.

Illustrator InDesign Photoshop

Branding a Three-Generation Workshop

How do you create an identity for a 75-year-old family bicycle shop that feels rooted without feeling stuck in the past?

I explored three visual directions:

Swiss precision too clinical
Bauhaus energy too playful
Organic craft | Art Nouveau-inspired just right

Movement and Heritage

The wordmark uses Awesome Serif,a display face with character and warmth. The chevron icon is modular, referencing bicycle chain links and forward motion. The fern-inspired pattern wraps around the arrow, creating texture without clutter.

The lockup is flexible enough to work on everything from business cards to bike tags. It feels handmade but not fussy, confident but not corporate.

The palette,evergreen, antique white, and night bordeaux,avoids bright sporty colors in favor of calm, trustworthy tones. These aren't trend colors. They're the colors of a shop that's been there for decades.

Brand colors

Evergreen #043222

Antique white #F6E9D9

Night bordeaux #53161D

view demo website

Community Ride Posters

The shop hosts weekly community rides every Sunday at 9AM. The poster campaign became the brand's public face.

Three poster variations use the same layout with different color treatments: yellow, green, and red. Each features bold type, grayscale photography, and the fern-chevron pattern as a graphic device. The copy is simple: "Community Ride | Sunday | 9AM."

Community ride poster variation (yellow)

System in Action

The identity needed to work across stationery, digital, print, and merchandise,every touchpoint where riders interact with the shop.

Each application uses the same core elements,logo, patterns, color palette, typography,but adapts to context. Business cards reveal the pattern on the back. Bike tags use simple messages like "Your bike is ready. Shaped with care by our hands." The website balances warmth with usability.

Tote bag mockup with Fern & Sons branding

T-shirt mockup with Fern & Sons branding

Water bottle mockup with Fern & Sons branding

A Brand That Feels Like Home

An identity that honors 75 years of skilled work without feeling stuck in the past.

The final system is warm, trustworthy, and flexible. It positions Fern & Sons as rooted in community and craft,approachable but never casual, skilled but never intimidating. The kind of shop you'd bring your bike to for decades.

Highlights

- Rooted visual language that feels local, not corporate
- Flexible system that works across all touchpoints
- Campaign-ready with posters and branded merchandise
- Approachable premium positioning

Complete Documentation

Open Full Brand Guidelines

home

Web Design

IDEAS & IMAGES

Interactive kinetic text-based collection.

p5.js HTML CSS

The Brief

This site collects a series of my course assignments, reimagined as interactive, kinetic, text-based pieces.

Each project began as a static design—posters, visual studies, or other exploratory exercises. For the final assignment, we were asked to bring together all the creative work we'd produced throughout the program, so I transformed those earlier experiments into a single collection that uses motion and interaction to push the original ideas further.

Role

Interaction & Product designer, creative coding

Tech

p5.js, HTML, CSS

check out website

The Work

Process Documentation & Reflection

Open Process Documentation PDF

home

Still in active development.

BOUNTT (PWA)

Putting people first in shared expenses.

bountt.com

Cursor Figma Tailwind CSS, React.js Lovable Supabase

The problem nobody was solving.

It started with a bad feeling, not a business idea.

I was doing self-directed research , digging into SaaS products that had lost their user base, trying to understand why people leave things they once loved. Splitwise kept coming up. A 2.3-star rating. Reddit threads full of frustration. A product used by millions of people who openly said they hated using it.

So I did what any curious person would do. I went to Reddit and asked.

Research | User Interviews

I spoke with 5 people → 3 Splitwise users I found on Reddit 2 friends who'd just come back from a group trip where splitting expenses was part of the deal. Nobody was complaining that the app was hard to use. But they were complaining that it made them feel like a bad friend.

Research | Review Mining & App Store Analysis

Then I went deep into the reviews. 200+ across all four apps. I wasn't counting stars , I was looking for the words that kept repeating.

of Splitwise reviews mentioned over-precision. Being reminded they owe $3 or being chased for $8.

mentioned reminder fatigue. The app nagging them like a landlord.

10 million people were using tools they resented because there was nothing better. That's the gap Bountt is built to fill.

Mapping the field.

Before I drew a single wireframe, I needed to understand the competitive landscape honestly.

I mapped four major players , Splitwise, Tab, SettleUp, Venmo , across two axes that I believe actually matter to users: friction to start and emotional tone. Not features. Not pricing. Just: how hard is it to get going, and how does it make you feel?

2x2 competitive landscape map , friction to start vs emotional tone

Deciding what Bountt refuses to be.

This is the part of product design nobody told me about. The features to cut. The words to ban. The interactions you make deliberately harder.

I spent more time on these four decisions than I spent on any screen.

No nagging notifications.

Bountt doesn't push "hey Kyle owes you $12" at 11pm. It notices when a tab has been sitting a while and surfaces it gently, inline, in the feed, in plain language. "Been waiting a long time for a small tab. Just settle it now?" That's a nudge, not a demand.

Debt simplification.

If you and Kyle have been going back and forth all month , you covered dinner, he covered Uber, you split groceries, Bountt collapses all of that into one net number. Instead of three settlements, it's one. The fewer transactions, the less awkward it is.

Settle when it feels right.

There's no "overdue" state. No "pressuring" into delivering donations. No guilt. The tab exists, everyone can see it, and when someone's ready to settle they just do. "I sent it / mark settled." One tap.

The language matters.

"You're all square 🤝" vs "Balance: $0.00." Same information, completely different feeling. Bountt treats settlement as a moment of relief, not a transaction confirmation.

Splitwise , Cost-Logging UI

Clinical. Ledger-first. Every interaction reinforces mathematics. Debt equality over anything.

Bountt , Cost-Logging UI

People-first. Quick, fast and reliable. All you need in order to track & split costs.

Wireframes & Concepts

I gave myself one constraint before opening Figma: every screen has to be completable with one thumb, in under 10 seconds, while holding a grocery bag.

That constraint killed about a third of my early ideas immediately.

(cost detail view) settlement flow

(cost detail view) user selected

(cost detail view) cost settled

initial rough-prototype for testing on users

Initial rough prototype for user testing

lofi-wireframes & exploration (messy because archived)

Marketing page for bountt's validation.

The landing page was treated as a sub-product of the main app. It had one job: communicate to someone who lands cold that this app is for friends, not accountants. And see if it converts.

bountt.com

home

Marketing Website Redesign

VISUGENIE

Brand Identity & Website Development , AI real estate visualization for agencies.

Visit Visugenie

HTML, CSS, JS Figma Cursor

The Challenge

Visugenie is an AI-powered real estate visualization platform that helps agencies like RE/MAX and Century 21 transform property listings with AI-generated staging and renovations. The original website failed to communicate the product's value clearly, resulting in high bounce rates and low conversion.

Unclear messaging , visitors confused about what the product does
Weak visual hierarchy , key features buried
Cluttered layout , distracted from the core value proposition

Problem statement: Real estate agencies need to understand Visugenie's capabilities within 10 seconds of landing on the site, but the existing design made them work too hard to find answers.

Our research showed that 68% of visitors left without scrolling past the hero section.

Business goals

Reduce bounce rate by 40%
Increase demo requests by 25%
Improve time-on-site metrics

User goals

Understand value in <10 seconds
See real before/after examples
Find pricing & contact quickly

Research & Discovery

I analyzed user behavior data and conducted interviews with 5 real estate agents, testing the current landing page through to the product and first image generation.

Users scan, they don't read.

Agents are time-starved and need to evaluate tools quickly. The hero section has 3–5 seconds to communicate value before they bounce.

No onboarding caused confusion.

When users signed up, they weren't onboarded and were straight up dropped into the product with all the modes served to them, which overwhelmed them.

Design Strategy

Information architecture , I restructured the site to answer the user's mental model in order:

What is this? , Hero with clear value prop.
Does it actually work? , Before/after gallery.
Who uses it? , Client logos + testimonials.
How does it work? , Feature breakdown.
What's next? , CTA: Book demo / sign up.

Visual design

Clean, not sterile,generous white space, bold typography, restrained palette (off-white, dark grey, soft gold accent).
Image-first hierarchy: before/after comparisons became the visual anchor.
Interactive sliders let users explore transformations themselves.

Before & After

Before: Old Marketing Page

After: New Marketing Page

Results & Impact

The redesign launched 3 weeks after kickoff. Here's what happened:

52%

Bounce Rate Reduction

38%

Increase in Hero CTA Clicks

3.2×

Average Time on Site

Based on limited visitor data over 3 weeks (<1,000 users). Metrics tracked via Google Analytics over 30-day period post-launch.

Visit Visugenie.com

What's Next

Intent-Based Onboarding
Redesigning the onboarding experience with what I call "intent-based onboarding",users answer a few quick questions about their use case, and we serve only the modes relevant to them. A realtor sees staging and renovation tools. An interior designer sees furniture and decor modes. Clean, focused, zero overwhelm.
Personalized Product Experience
Once onboarding is fixed, users land in a product that feels built for them,not a generic dashboard crammed with every feature. They see only what matters to their workflow, with the option to explore other modes later if needed.
Image History Redesign
Shipping fixes to the image history section,better organization, faster access to previous generations, and clearer version tracking.
Brand Consistency
Aligning the product interface with the marketing page's visual language. Same typography, same color palette, same voice. The experience should feel continuous, not like two different products.

home

Branding

CTRL BREAK

Exhibition identity for a Neville Brody retrospective.

Illustrator Figma InDesign

Breaking the rules, on purpose.

How do you design an identity for a designer who spent his career dismantling everyone else's rules?

Challenge: It wasn't about copying his work, that's the easy way out. The real challenge was tapping into his mindset. You can't break the rules if you don't actually understand them first.

Influence & Intent

Influence

Controlled Chaos
Brody's layouts felt chaotic but were meticulously controlled. Every violation was intentional. I wanted CTRL+BREAK to work the same way.

The Grid

Structure Built to Break
Built a rigid modular grid, then designed the identity to deliberately violate it. Logos shift. Type runs off edges. But every break follows logic.

Typography

Punk Meets Precision
Industrial typography, hard angles, stencil cuts,visual languages from protest posters. Raw energy with technical rigor.

Pitchbook

home

RGD | Distro Disco

Some screenshots may be outdated as our work continues to evolve.

Try prototype

Figma Cursor Framer Motion CSS Spring Physics

About me.

I'm a graphic design student at George Brown College in Toronto, working at the intersection of UX, interaction design, and front-end development.

I think good design solves systemic problems before it solves visual ones.

This project is where those two things came together for the first time at a real scale, with a real client, and real stakes.

About the project.

Distro Disco runs a mobile free store out of a converted bus, distributing essentials to unhoused neighbours across Vancouver every week. They are volunteer-run, community-funded, and explicitly anti-capitalist.

Distro Disco organizers coordinating over messages and sheets

Google Sheets and documents used in Distro Disco operations

Instagram and social posts about Distro Disco

Their operations ran across WhatsApp threads, Discord, Google Sheets, Instagram posts, and a handful of public documents. There was no single place to go. Volunteers didn't know where to sign up. Donors didn't know what was needed. Events were announced in one place, logistics coordinated in another.

Distro Disco community distribution setup

Close-up details from the Distro Disco app

Try the prototype

Discovery & research.

I started by talking to Ren, an active volunteer and organizer at Distro Disco.

We spoke about what DD is, what it wants to become, and how the organization actually operates week to week , not how it describes itself publicly, but how it actually runs. That conversation gave me something no document could: a sense of the organization's tone, its values, and the specific friction points that made coordination hard.

From there I went deep into everything DD had made public. Their material contribution guides, item needs lists, drop-off location sheets, volunteer application forms, financial transparency documents, and social media content. I read all of it. Not to extract features , to understand how DD communicates with its community and what language they use when they're being themselves.

A few things became clear quickly.

Finding 01

Urgency Drives Priority

DD communicates supply needs by urgency, not category. The most critical items are always named first. This directly shaped how the item donation feed is ordered , tents and sleeping bags at the top, not alphabetically sorted.

Finding 02

Specificity Prevents Waste

DD is specific about what they need and why. Baby wipes must be non-antibacterial. Rope must be cut to 20-foot lengths with burnt ends. These aren't fine print , they're operational knowledge that prevents wasted donations.

Finding 03

Voice Builds Trust

DD's tone is warm and a little scrappy. They end their donation guides with "teamwork makes the dream work :)". That voice had to exist somewhere in the product , as a genuine expression of what the organization is.

Distro Disco source documents: contribution guide, volunteer form, item list

Exploration.

Early explorations leaned into a clean, premium aesthetic. High contrast, structured layouts, polished components. It looked good. It didn't look like Distro Disco.

DD writes "teamwork makes the dream work :)" at the bottom of their donation guides. They host contribution drives in parks. Their palette is warm cream, deep navy, and burnt orange. A sleek startup aesthetic was a fundamental mismatch.

What the team landed on was DIY sleek , warmer materials, more human layouts, interactions that feel hand-crafted , but still meeting the bar of what a mobile app needs to feel trustworthy and usable.

Early slick, minimal Distro Disco direction — Direction A

Final warm DIY sleek Distro Disco direction — Direction B

Figma exploration frames and iterations for Distro Disco

Additional exploration visual for Distro Disco

Decisions.

Every major design choice in this project came from organizational understanding, not convention. Here's what drove the ones that mattered most.

Items ordered by urgency, not category.

DD's own contribution guide communicates this way , tents before toothbrushes. The app mirrors that. Unavailable items appear dimmed at the bottom, not hidden. Honesty prevents wasted trips.

Prep instructions are inline.

Rope must be cut to 20-foot lengths. Baby wipes must be non-antibacterial. Men's deodorant moves faster. These details prevent wasted donations. They live as small chips beneath each item , always visible, never buried.

Confirmation is a promise, not a receipt.

When someone confirms an item donation they haven't donated anything yet. "Pending drop-off" not "confirmed." The real completion is dropping items off. That's the moment worth celebrating.

Volunteer page reflects real roles.

Six real roles, real requirements. Bus Driver needs a Class 5 license. Supply Runner needs vehicle access twice a month. Coordinator role explicitly asks people not to apply unless they can commit. The app says all of this.

Forum is a pinboard, not a feed.

Posts have slight rotations, a tack at the top, warm paper-like backgrounds. The digital space should feel like somewhere DD would actually gather.

Community Update Next run is Saturday. We need sleeping bags urgently , if you have extras, please bring them. Teamwork makes the dream work :)

Donation Note Picked up 40 pairs of socks from the drive on Main St. Dropping them at the bus tonight. Thanks everyone!

Volunteer Reminder Saturday slots still open for distribution. Sign up through the app , we'd love to see you there.

Micro-interactions Library

Two reasons for the interaction system: trust and identity. A product that feels physically real is one people trust to do real things. And DD needed something with enough character to feel like theirs.

Every element uses the same spring system , one stiffness value, one damping constant, one timing token. When something moves in this app, it moves the same way every time.

Motion System · Spring cubic-bezier(0.16, 1, 0.3, 1)

450ms · fast out , eased in

transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1)

Slide-to-confirm

The primary donation CTA uses real spring physics , stiffness, damping, velocity tracking , not a CSS transition. The fill lerps from navy to orange as you drag. Sparks trail behind the thumb above 40% progress. On confirmation, two circle floods animate through the fill , orange then green , before the page transitions. The interaction is physical and earned.

Slide to confirm

Confirmed ✓

Drag right to confirm

.di-bs-slide-track {
  height: 54px;
  border-radius: 12px;
  background: var(--input-bg);
  overflow: hidden;
  touch-action: none;
}
.di-bs-slide-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--orange);
  will-change: width;
}
.di-bs-slide-thumb {
  position: absolute;
  top: 5px; left: 6px;
  width: 50px; height: 50px;
  border-radius: 50%;
  will-change: left, transform;
}
.di-bs-slide-spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

<div class="di-bs-slide-cta">
  <div class="di-bs-slide-track">
    <div class="di-bs-slide-fill"></div>
    <div class="di-bs-slide-label">
      Slide to confirm
    </div>
    <div class="di-bs-slide-done">
      Confirmed ✓
    </div>
    <div class="di-bs-slide-thumb">
      <!-- chevron SVG -->
    </div>
  </div>
</div>

// Spring constants
const K    = 220;  // stiffness
const D    = 26;   // damping
const SNAP = 0.82; // confirm threshold

function springTo(target) {
  (function tick() {
    const f = -K*(pos-target) - D*vel;
    vel += f / 60;
    pos += vel / 60;
    applyPos(pos);
    if (!settled)
      requestAnimationFrame(tick);
  })();
}

// Spawn sparks at 40%+ progress
if (pct >= 0.40 && Math.random() <
    (pct - 0.40) * 0.55) {
  spawnSparks(thumbCenterX);
}

Spring bounce system

On tap, every interactive element across the app , buttons, cards, nav items, role cards , compresses to 0.93 scale and springs back past resting with a slight overshoot before settling. One shared easing constant. One motion language.

Button

Rain jackets

5 available

Card

:root {
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-bounce:  0.55s;
}

.el.spring-bounce {
  animation: spring-press var(--dur-bounce)
              var(--ease-spring);
}

@keyframes spring-press {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.88); }
  60%  { transform: scale(1.12); }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

function springBounce(el) {
  el.classList.remove('spring-bounce');
  void el.offsetWidth; // force reflow , restarts animation
  el.classList.add('spring-bounce');
}

btn.addEventListener('pointerdown', function() {
  springBounce(this);
});
card.addEventListener('pointerdown', function() {
  springBounce(this);
});

Bottom nav icons

Five icons, five distinct spring animations on activation. The home icon bounces elastically, the calendar header slides in, forum bubbles expand with staggered dots, the volunteer bags toss and settle independently. One shared timing.

Home

Events

Donate

Volunteer

Forums

Tap each icon

/* Home , elastic bounce */
.icon-home.active {
  animation: home-bounce 0.55s
    cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes home-bounce {
  40%  { transform: scale(0.85) translateY(3px); }
  70%  { transform: scale(1.1) translateY(-4px); }
  100% { transform: scale(1) translateY(0); }
}

/* Calendar , header slides in */
.icon-calendar.active .cal-header {
  animation: cal-slide 0.45s ease-out;
  transform-origin: left center;
}
@keyframes cal-slide {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Bag , toss (main) + settle (secondary) */
.icon-items.active .items-bag-main {
  animation: bag-toss 0.4s ease-out;
  transform-origin: 68% 45%; /* pivot at handle */
}
.icon-items.active .items-bag-secondary {
  animation: bag-settle 0.35s 0.38s ease-in-out both;
}
@keyframes bag-toss {
  30% { transform: rotate(-14deg); }
  70% { transform: rotate(8deg); }
}

function activate(item) {
  // deactivate all, activate tapped
  nav.querySelectorAll('.nav-item')
    .forEach(function(i) {
      i.classList.remove('active');
    });
  item.classList.add('active');

  // restart icon animation via reflow trick
  var svg = item.querySelector('.nav-icon');
  svg.classList.remove('active');
  void svg.offsetWidth; // force reflow
  svg.classList.add('active');
}

nav.querySelectorAll('.nav-item')
  .forEach(function(item) {
    item.addEventListener('click',
      function() { activate(this); });
  });

UI snapshots

Prototype delivery.

Shipped in two days. One day designing pages that had no prior designs, one day building them in code. Presented to RGD stakeholders as part of a formal team pitch.

Tested with five users across different backgrounds. Testing surfaced unintuitive navigation, copy that implied completion before drop-off, and interaction states that needed clearer feedback. Each was iterated and improved.

visit project in detail

Photo from RGD Distro Disco pitch presentation

Test final design

Hi, I'm Doga.

selected work

A bit about me

Branding a Three-Generation Workshop

Movement and Heritage

Community Ride Posters

System in Action

A Brand That Feels Like Home

Complete Documentation

The Brief

The Work

Process Documentation & Reflection

The Brief

The Work

Brand Concept Book

The problem nobody was solving.

Mapping the field.

Deciding what Bountt refuses to be.

No nagging notifications.

Debt simplification.

Settle when it feels right.

The language matters.

Wireframes & Concepts

Marketing page for bountt's validation.

The Challenge

Business goals

User goals

Research & Discovery

Users scan, they don't read.

No onboarding caused confusion.

Design Strategy

Before & After

Results & Impact

What's Next

Breaking the rules, on purpose.

Influence & Intent

Pitchbook

About me.

About the project.

Discovery & research.

Urgency Drives Priority

Specificity Prevents Waste

Voice Builds Trust

Exploration.

Decisions.

Items ordered by urgency, not category.

Prep instructions are inline.

Confirmation is a promise, not a receipt.

Volunteer page reflects real roles.

Forum is a pinboard, not a feed.

Micro-interactions Library

Prototype delivery.