Next project
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

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 assets for Boots & Hearts
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
Doga , candid
Doga , portrait
home
Branding & Brand-Launch Rollout
FERN & SONS CYCLE CO.

Community-rooted bicycle workshop brand identity.

Illustrator InDesign Photoshop
01

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
02

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
Fern & Sons Cycle Co. brand image with fern-chevron pattern overlay
03

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."

04

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.

05

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.

Fern & Sons Cycle Co. brand overview
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

06

Complete Documentation

home
Web Design
IDEAS & IMAGES

Interactive kinetic text-based collection.

p5.js HTML CSS
01

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
02

The Work

Process Documentation & Reflection

home
Branding
BOOTS & HEARTS

Festival branding for Canada's largest country music festival.

Brand kit Poster series Web & app mockups
01

The Brief

An entry to the world of branding and digital design, developed as a concept for the Boots and Hearts brand.

The aim is to establish a cohesive visual identity that reflects the festival's core themes of community, music, and country culture, while also driving ticket sales and strengthening online engagement.

Role

Brand design, digital design

Deliverables

Brand kit, poster series, web & app mockups

02

The Work

Boots and Hearts branding overview

Brand Concept Book

home

Still in active development.

BOUNTT (PWA)

Putting people first in shared expenses.

bountt.com

Cursor Figma Tailwind CSS, React.js Lovable Supabase
01

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.

0%

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

0

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.
02

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
03

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
Splitwise cost-add UI , ledger-first

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

Bountt , Cost-Logging UI
Bountt cost-add UI , people-first

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

04

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-logging flow wireframe 1
(cost detail view) user selected
Cost-logging flow wireframe 2
(cost detail view) cost settled
Cost-logging flow wireframe 3
initial rough-prototype for testing on users Initial rough prototype for user testing
lofi-wireframes & exploration (messy because archived) Lofi wireframes and exploration sandbox

Bountt is a work in progress. What exists today: medium to high-fidelity wireframes and a private working demo with google-auth. Final product screens will live here when the V1 is launched. Spring 2026 is the target.

06

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.

home
Marketing Website Redesign
VISUGENIE

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

Visit Visugenie

HTML, CSS, JS Figma Cursor
01

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
02

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.

03

Design Strategy

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

  1. What is this? , Hero with clear value prop.
  2. Does it actually work? , Before/after gallery.
  3. Who uses it? , Client logos + testimonials.
  4. How does it work? , Feature breakdown.
  5. 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.
04

Before & After

Old homepage hero design

Before: Old Marketing Page

New homepage hero design

After: New Marketing Page

05

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

06

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
01

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.

02

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.

CTRLBREAK letter texture
CTRLBREAK t-shirt mockup
CTRLBREAK wall mockup
03

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
01

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.

02

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 bus and volunteers Distro Disco community distribution setup Close-up details from the Distro Disco app
03

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
04

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.

Direction A
Early slick, minimal Distro Disco direction
Direction B
Final warm DIY sleek Distro Disco direction
Figma exploration frames and iterations for Distro Disco
Additional exploration visual for Distro Disco
05

Decisions.

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

01

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.

02

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.

03

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.

04

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.

05

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.

Next run is Saturday. We need sleeping bags urgently , if you have extras, please bring them. Teamwork makes the dream work :)
Picked up 40 pairs of socks from the drive on Main St. Dropping them at the bus tonight. Thanks everyone!
Saturday slots still open for distribution. Sign up through the app , we'd love to see you there.
Item donation feed screen
Donation confirmation screen
Volunteer roles screen
Forum pinboard screen
06

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

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.

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
Home screen UI snapshot
Donation items screen UI snapshot
Volunteer screen UI snapshot
Forum screen UI snapshot
Confirmation screen UI snapshot
Profile screen UI snapshot
07

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.

Photo from RGD Distro Disco pitch presentation