Responsive Cover Uploader
↓ 58%
Time to publish cover (7.5 min → 3.2 min)
Time to publish cover (7.5 min → 3.2 min)
↓ 64%
Re-uploads per article
Re-uploads per article
↓ 72%
Crop issues caught in QA
Crop issues caught in QA
↓ 48%
Image-related support tickets
Image-related support tickets
4.6/5
Editor satisfaction (internal survey)
Editor satisfaction (internal survey)
Overview
Designed and implemented a responsive file uploader component based on the IBM Design System. The uploader supports drag-and-drop, multi-file upload, real-time progress indicators, and error handling. It automatically adapts to desktop, tablet, and mobile screens, ensuring accessibility and consistency across breakpoints. The solution became a reusable pattern within the design system, reducing implementation time for new products.
[Client]
Kizuna Labs.
[Industry]
SaaS / Enterprise Software
[Role]
|
[Year]
2024
Context & Challenge
Editors had to upload separate files, guess auto-crops, and use inconsistent tools. No per-breakpoint control, no reliable previews, and no optimized outputs.
The goal
A CMS-embedded uploader that accepts one/many images, supports crop per breakpoint (desktop/tablet/mobile), shows live previews, and generates optimized URLs (e.g., /mobile_large.webp, /desktop_large.webp).
Constraints (tech)
Chunked async uploads (100 KB–1 MB), temp secure URLs (10–30 min), backend resize/optimize, and real-time processing states.
Design Process
Early sketches
There quickly were explored core ideas:
→ Choosing one or multiple images
→ Cropping by breakpoint
→ Showing upload & processing statusto, the AI suggests what’s in the meal, and shows the estimated kcal count.
Design System Foundation
I used IBM’s Carbon Design System to ensure:
→ Accessibility and responsiveness
→ Unified styling for components like buttons, dropdowns, and progress bars
→ A seamless experience within the larger CMS ecosystem
This choice saved us significant design & development time, and guaranteed long-term scalability.
Wireflows & Logic
Flow A — Upload & Validate
Flow B — Several images path (precise control)
Purpose: separate assets for desktop & vertical/mobile.
Wireframe: Article Editor — Async Media Queue
Inline article editor with a non-blocking image-optimization queue in the right sidebar. Authors keep writing while images upload, get optimized for the web, and update the preview automatically. Autosave + explicit Draft / Preview / Publish actions.
Learnings
Uploading is deceptively complex; editors need real-time feedback and trustworthy previews. Using IBM Carbon accelerated delivery, ensured accessibility, and kept the CMS UI consistent and scalable.
Context & Challenge
Editors had to upload separate files, guess auto-crops, and use inconsistent tools. No per-breakpoint control, no reliable previews, and no optimized outputs.
The goal
A CMS-embedded uploader that accepts one/many images, supports crop per breakpoint (desktop/tablet/mobile), shows live previews, and generates optimized URLs (e.g., /mobile_large.webp, /desktop_large.webp).
Constraints (tech)
Chunked async uploads (100 KB–1 MB), temp secure URLs (10–30 min), backend resize/optimize, and real-time processing states.
Design Process
Early sketches
There quickly were explored core ideas:
→ Choosing one or multiple images
→ Cropping by breakpoint
→ Showing upload & processing statusto, the AI suggests what’s in the meal, and shows the estimated kcal count.
Design System Foundation
I used IBM’s Carbon Design System to ensure:
→ Accessibility and responsiveness
→ Unified styling for components like buttons, dropdowns, and progress bars
→ A seamless experience within the larger CMS ecosystem
This choice saved us significant design & development time, and guaranteed long-term scalability.
Wireflows & Logic
Flow A — Upload & Validate
Flow B — Several images path (precise control)
Purpose: separate assets for desktop & vertical/mobile.
Wireframe: Article Editor — Async Media Queue
Inline article editor with a non-blocking image-optimization queue in the right sidebar. Authors keep writing while images upload, get optimized for the web, and update the preview automatically. Autosave + explicit Draft / Preview / Publish actions.
Learnings
Uploading is deceptively complex; editors need real-time feedback and trustworthy previews. Using IBM Carbon accelerated delivery, ensured accessibility, and kept the CMS UI consistent and scalable.
Next Project
Next Project
Next Project
Let's Connect
If you’re looking for a designer to join your team or lead your next product initiative, I’m open to new opportunities. Whether it’s a full-time role, freelance collaboration, or just a conversation about how I can help, I’d love to hear from you.
Let's Connect
If you’re looking for a designer to join your team or lead your next product initiative, I’m open to new opportunities. Whether it’s a full-time role, freelance collaboration, or just a conversation about how I can help, I’d love to hear from you.
Let's Connect
If you’re looking for a designer to join your team or lead your next product initiative, I’m open to new opportunities. Whether it’s a full-time role, freelance collaboration, or just a conversation about how I can help, I’d love to hear from you.