DE
Christian Fillies

Christian Fillies

Consulting & Coaching · Sr. UX/UI Designer · Sr. Front-End Developer

Hamburg, Germany

Minimal · Intuitive · Elegant. Three principles for the work.

For 20+ years I have worked as a designer and a front-end developer — the two disciplines fused, not handed off. Today that feeds directly into consulting and coaching: helping startups and established teams figure out what to build, then making sure it is made well — from design thinking through pixel-perfect prototypes, on to production.

I take on clients' goals as if they were my own. Down-to-earth in approach, relentless about finding the right answer.

I have worked on projects for Oracle, Elaine, Der Feinschmecker, Pixa, IDEO, and more. Work I helped shape has won Webby Awards and IDSA recognition.

Selected clients & collaborators

Pixa.com Handytick CyberPlus Group dbo.io IDEO Oracle Spark Camera Ducati Santa Barbara Sage Der Feinschmecker Gold Medal Wine Club HP LightScribe Highstreet Media Hub ELAINE (formerly Artegic) Deutsche Welthungerhilfe e. V. MorningStar Entertainment Toad the Wet Sprocket Merian Germanwatch Gigbox Manoto, LLC Mortgage Center Motion TM PRINZ.de Colibri Entertainment SEG Network GmbH Pear | Share with Pear ChitChat

Get in touch

contact@christianfillies.com

github.com/copperdesign
linkedin.com/in/christian-fillies

Selected work

  • Cocoa

    Concept · UI/UX · Front-End Development
    Cocoa creator profile in the browser — @userName badge at top, a vintage Zeiss Ikon camera as the centre video with title and copy below, and a Highlights sidebar on the right with stacked image cards.
    Cocoa iOS feed — a hand-and-light video at the top of the scroll, with the Highlights row beginning underneath. Cocoa iOS feed — second pass showing a footprint-in-sand Highlights card with descriptive copy expanded.

    Concept and prototype for a creator-focused startup.

    A 2022 contracted design and prototype for Cocoa, a startup in the creator and vlogger space. Worked across iOS and web — visual system, interaction model, and a working prototype on both surfaces. The product is paused for now; further detail is intentionally held back at the team's request.

    Year
    2022
    Client
    Cocoa

  • Pixelcut Discover

    UI/UX · Front-End Development
    Pixelcut Discover landing page — gradient headline 'Explore thousands of designs made by creators like you' above a search bar, category chips (Profile, Shopify, Youtube Cover, Foodie, Pets), and a masonry grid of community-made templates.
    Same gallery filtered by a 'Shoes' search — sneaker, runner, and dress-shoe layouts surface from the community catalog. Detail view of a single template — a Curology skincare set on lavender — paired with a 'Scan with your phone to edit in Pixelcut' QR code that hands off to the iOS app.

    Web home for the templates the Pixelcut community makes inside the iOS app.

    A direct freelance engagement with Pixelcut, designed and built end-to-end — concept, visual system, and the production Next.js / React / SASS code. Gradient hero typography, column-count masonry of community-made templates, live search against the Pixelcut API, and a detail view that hands off to the iOS app via QR code: scan, jump, keep editing. The job was to make the catalog SEO-discoverable on the open web while staying a thin doorway back into the mobile editor.

    Year
    2021
    Client
    Pixelcut, Inc.

  • Cocoon

    Front-End Development
    Cocoon v1 marketing site, desktop — dark canvas with the Cocoon serif wordmark, nav (Why Cocoon? / Pricing / About Us) and a green Get Started pill. Headline: 'Some of these threads are not like the others.' Below, a stack of message-thread cards — a CBD-oil spam, a security verification code, a burrito-ready notification — the kinds of threads that bury the people who matter most.
    Cocoon's watercolor brand illustration — four silhouetted figures on a soft green hill (one seated), butterflies in flight, the Cocoon wordmark set in serif above. Marketing collage pitching the kinds of close-knit moments Cocoon is for — tiles of architecture and travel photos paired with bold message-bubble icons on blue, red, green and teal, the app's home feed peeking in from a phone on the right. Floating activity tiles from the family feed — '35 min of exercise today', 72 BPM, 'Nikki completed a 12 min walk', 'Everyone is at home', a Weekly Report card, '22 min of mindfulness', and a step-count bar chart showing 115,235 steps this week. Cocoon's live-talk feature on two iPhones — left phone shows a 'Talking Now' card with friend avatars and a green Join button; right phone shows the lock-screen alert 'Home Team — Katie, Rui and Sara are talking live in Cocoon right now. Tap to connect.'

    Marketing site for the private messaging app pitched to your closest few.

    A freelance front-end engagement with Glasswing, Inc., paired with designer Alex Cornell — he designed, I built. Cocoon was a private messaging app for family-scale groups, pitched against the noise of generic SMS and iMessage, where the people who matter most get buried under verification codes and spam. I built both versions of the marketing site at cocoon.com. The startup didn't pick up — the cocoon.com domain has since been taken over by an unrelated company.

    Year
    2019–2020
    Client
    Glasswing, Inc.

  • ORACLE Vendor Portal

    UI/UX · Front-End Development
    Oracle Preferred Marketing Partners — desktop Innovation Showcase view with cards for Lionbridge, IDEO, and Manolab YARP, each with star rating, body copy, and a View Showcase Gallery link.
    Mobile responsive Innovation Showcase view — Hartmann strategy.design.production banner and Lionbridge card stacked vertically. IDEO partner detail page on tablet — Disney Concert Hall hero photo, Design Firm star rating, contact panel with Carsen Callister. Desktop Featured Partners grid — IDEO Design Firm, Manolab YARP, Lionbridge, Sandwich Video, Longitude Research cards. IDC partner detail page — forest hero, market intelligence services description, Send Request CTA and contact panel.

    Official internal Preferred Marketing Partners website for Oracle.

    Internal Oracle portal that connected the company's marketing teams to its roster of vetted Preferred Marketing Partners — design firms, video studios, research houses, content shops. Partner profile cards with star ratings, contact panels and send-request CTAs, project showcase galleries, and a rotating Innovation Showcase across the top. Designed and built responsive end-to-end so account managers could browse partners from the desk or the road.

    oracle.com has since adopted echoes of the portal's design language — the search-led home pattern resembles the interface I built, and the simple "O" I introduced as the wordmark's mobile/app-icon scale-down has become familiar Oracle iconography. The "O" almost didn't survive corporate review — it didn't match the official Oracle CD — but the argument carried: the live site at the time was a convoluted mess of wrong-red hex values, false logo usages, and sub-pages that didn't agree with each other on what "Oracle" looked like. The CD was honored in the breach more than the observance; clearing the floor and rebuilding from one consistent system was the easier defense than patching the old one.

    Year
    2016
    Client
    Oracle

  • PRINZ Magazin

    Concept · UI/UX · Visual Design
    PRINZ Magazin city portal — red wordmark, weather and date row, primary nav (Meine Stadt · Gastro · Musik · Giveaways · Leben & Shoppen · Nightlife), and a search-and-filter hero with theme-area checkboxes, a two-month calendar, and a Hamburg map with a 250 m radius marker.
    Same PRINZ Magazin hero in the full-page concept — search-and-filter band over editorial tiles below the fold (Suspended Coffee feature, Yoga und Pilates, Finbury Fury party). Another scroll region of the concept — large editorial tiles laid out in PRINZ's two-column rhythm, with ad slots interspersed in the right rail.

    City-portal redesign for PRINZ Magazin — search-first, calendar-driven, location-aware.

    A 2015 concept for the PRINZ.de city portals — PRINZ Magazin ran local editions across many German cities (Hamburg, Berlin, Munich, Cologne and more), and the brief was the shared portal system, shown here with Hamburg as the working example. A search-and-filter hero pairs theme-area toggles (Top Listen, Artikel, Events, Locations, Giveaways) with a two-month calendar and a live map showing the surrounding radius. Below the fold, the editorial layer kept PRINZ's two-column rhythm but tightened the tile system around photography and category chips. The site is still live a decade later — the design has drifted, but the search-first hero, theme-area framing, and the typographic pairing of the PRINZ wordmark with a workmanlike grotesque all trace back to this concept.

    Year
    2015
    Client
    intosite (Ganske Verlagsgruppe)

  • Spark Camera

    Concept · UI/UX · Front-End Development · Icon Design
    A hand holding an iPhone framing a sunlit lake with a hot-air balloon — Spark Camera's gesture-led recording UI overlaid on the scene.
    Spark Camera featured on the iPhone App Store next to XCOM and Levels. Circular dial UI with a dragonfly illustration — drag to set the music starting point. In-app scene from a sailing video titled RIO with overlay controls. Hand tapping a row of large circular share-target icons over a video frame.

    App for shooting and editing short creative videos.

    Built with IDEO around a single idea — making a phone-shot video feel like something you would be proud to share. The gesture model leaned on the phone's physicality, not menu chrome: circular dials, drag-to-set music starting point, tap-to-set transitions. Apple featured it as App of the Week and in Best of 2013.

    Year
    2013
    Client
    IDEO Play Lab · Dayworks, LLC
    URL
    sparkcamera.com
    Recognition
    Apple App of the Week · Apple Best of 2013 · IDSA IDEA award 2014

  • ELAINE Six Campaign Designer

    Concept · UI/UX · Front-End Development · Icon Design
    ELAINE SIX Campaign Designer canvas in dark mode — a flowchart of E-Mail, Open, Bounce and Filter nodes connected by green hot-path lines, with a contextual menu open over a Filter card.
    Light-mode variant of the Campaign Designer canvas with an Email Delivery node and an Add-Branch contextual menu. Additional UI panels — compact left rail of step types and a Script step with inline code editor. Per-tenant menu-edit dialog used by a German telecom (EWE) on the ELAINE platform. Detail of the dark-mode Campaign Designer canvas — Script node with code editor, hot-path connectors, heatmap step colouring.

    Flow-chart designer for complex email campaigns.

    A 2013 redesign of artegic's flagship marketing-automation surface — turning a dense flowchart tool into a draggable dark-canvas editor with heatmap step colouring, hot-path connectors marking the highest-traffic route, an inline statistics view, and a compact left rail of step types. The visual and interaction layer defined here still ships in production today as ELAINE — more than a decade later.

    Year
    2013
    Client
    artegic AG (now ELAINE technologies GmbH)
    Recognition
    Trusted Solution 2019 (Statista & Computerbild) · still in production after 13+ years

  • Pear

    Concept · UI/UX · Front-End Development
    A hand holding a white iPhone 5 showing Pear's photo grid (a tight mosaic of personal photos), with a black iPhone laid next to it showing the contact-share view (Me, Benjamin, Raphael, Christian).
    sharewithpear.com landing page in a browser — header video banner of friends walking in nature, the Pear app icon and 'Private Photo & Video Sharing' headline, App Store badge, and an iPhone mockup with the photo grid. iTunes Preview page for Pear v1.0.4 (Sept 2012) — ‘Pear is a simple, intuitive, and elegant app that lets you share photos in your gallery…’ with three iPhone screenshots showing the photo grid and activity feed. Pear iPhone photo grid — full-screen mosaic of personal photos with a blue + button on each, ready to tap and share with the people you pick. Pear iPhone activity feed showing the contacts you share with (Christian 3s, Nima 14m, Andre 2h, Jesse 9h, Elika 2d) with a thumbnail of their latest shared photo on the right.

    Private photo & video sharing.

    A 2012 iOS app and marketing site for Pear — a private photo and video sharing app pitched against the noisy public feeds of the time. Photos already in your gallery get a + button; tap, pick the few people you want to share with, and that’s it. Free in the App Store, iOS 5+, ~6 MB. The app is currently no longer in distribution.

    Year
    2012
    Client
    Pear (a 3 Points product)

  • Eidamo Webshop

    Concept · UI/UX · Visual Design · Corporate Identity
    Eidamo platform template page — Apple-products demo storefront with left-rail category tree, a product grid (iPad, iPhone, Mac), best-sellers panel, and the account / cart rail on the right; the master CSS template that every tenant shop inherits from.
    medicare Vital storefront — pharma and supplements, blue brand palette, Sport & Fitness category landing with a featured article and product list. De Breuyn Kindermöbel storefront — children's furniture, yellow / purple brand palette, featured product grid (cot, lamp, drawing table, jewellery boxes). Haus der Edelsteine storefront — gemstones and collector goods, green pastoral hero photo, dense left-rail catalog tree (Bernstein, Achat, Citrin …). X-Toner storefront — printer cartridges and B2B office supply, blue Brother-branded header, Xerox paper product cards with cross-sell rail.

    CSS-template-based e-commerce platform running dozens of independent webshops on one engine.

    Eidamo was SEG Network's white-label webshop platform — a single template architecture that powered storefronts across very different verticals: pharma supplements (medicare Vital), kids' furniture (De Breuyn), gemstones (Haus der Edelsteine), printer cartridges (X-Toner). Each shop is the same engine wearing a different identity; the design system, navigation patterns, and shopping flow underneath are shared. Worked end-to-end as concept, identity, UI/UX, and the production HTML5/CSS3 template layer over 2010–11. The platform was a CSS-template integration layer for Sage Software ERPs — sales, stock, and orders flowed straight through.

    Year
    2011
    Client
    SEG Network GmbH

  • Sage MAS 500 Online

    Concept · UI/UX · Visual Design
    Sage MAS 500 Online dashboard — Sage green wordmark, Tasks and Search bars in the diamond task-bar, a Recent Activity feed (Received, Opened, Saved, Edited, Logged In timestamps linked to Invoices and Reports), Bookmarks and To Do List panels on the left, and a News from Sage Software panel on the right with an incoming message from Joshua Kirk; corporate vine motif curling along the right edge.
    Maintain Recurring Voucher form — two-column field grid (Vendor, Remit to, Purchase from, Contact, Addresses, Ship Via, F.O.B. … Status, Cycle, Invoice Number, Bank Account, Separate Check, Currency, Payment Terms, Billing Starting Date), every input paired with an eye-icon detail toggle. Process Voucher form with an open Department autocomplete dropdown (Accounts Payable, Accounting Services, Account Receivables); Batch Number, Description, Options (Private / On Hold / Rapid Entry), Hold Reason, Status, Control Amount, Batch Total — the dense vocabulary of accounting paperwork. Lookup modal overlay floating over the Process Voucher screen — Voucher Batch list filtered by Batch Number, Batch Type, Status, Original User and Post Date, with three rows (45, 46, 15 — all Balanced, all Admin); Cancel and Choose actions at the bottom. Search Results for ‘Vendor’ — a clean list of every related task in the system (Add Vendor, Maintain Vendors, Maintain Vendor Classes, Explore Vendors, Age Vendor Accounts, Vendor Payment Activity, Vendor Purchase Analysis, Vendor List, Vendor Class List, Vendor 1099 Activity Report, Vendor 1099 History) with task-type icons.

    Sage's MAS 500 accounting and ERP system, brought to the browser.

    A 2010 concept commissioned by Sage to move MAS 500 — their flagship accounting and ERP product — off the desktop and onto the web. Defined the diamond task-bar with paired Tasks and global Search, the Recent Activity timeline as the dashboard's primary surface, the modeless Lookup overlay for picking records mid-form, and the two-column form grid that kept the data density of a desktop accounting tool while gaining web-native search, autocomplete, and dropdowns. Sage's green wordmark, the muted task-type icon set, and the corporate vine motif curling along the right edge held the brand inside the new form-and-list system.

    Year
    2010
    Client
    Sage

Personal Fun Projects