Arillo Projekte

Projekt Index

Ruin some perfectly good Sneakers

Sneaker Designer

Als Teil einer zeitlich be­grenz­ten Brand Activation, entstand dieser 3D Sneaker Designer. Die inter­aktive Web App bietet eine Reihe kreativer Gestal­tungs­mög­lich­keiten, um ein iko­nisches Sneaker Design zu indi­­vi­du­ali­sieren.

Unser 360° Editor ermög­licht eine spie­le­r­ische und intuitive User Ex­perience. Die knalligen Sticker können von allen Seiten direkt auf dem 3D Sneaker platziert und frei kom­bi­niert werden. Für ambi­tionierte Künstler stehen Mal­werk­zeuge mit ver­schie­denen Pinsel­spitzen und ein Freitext-Tool zur Ver­fügung. Mit wenigen Klicks entsteht ein einzig­artiges Schuh Design.&nbsp;

Intuitive Tools

Damit die Nutzer ihre Krea­tivität unge­bremst aus­leben können, baut der Sneaker Designer auf einer robusten tech­nischen Grund­lage auf. Moderne Web Tech­no­logien wie React, Redux, WebGL mit Three.js und GraphQL Server API sorgen für die nötige Flexi­bilität und Per­for­mance.

Low poly, high performance

Eine Verlosung im Rahmen der ange­knüpf­ten Brand Acti­vation bedeu­tete für einige glück­liche Ge­win­ner die Ver­wirk­lichung ihrer Designs. In minu­tiöser Hand­arbeit wurden die digi­tialen Vor­lagen durch lokale Künstler als echte Uni­kate realisiert.

Spin it to win it

Konzept, UI/UX Design, Art Direction, Web App, React Development, WebGL

Lead Agentur und Keyvisual: BOLD, Illustrationen: Matthias Zimmermann, 3D modeling: Severin Brodmann

Leistungen

Partner

Konsumgüter & Handel

Design

Development

Digitaler Hub für bildungspolitische Macher

k-hf.ch Website

Die K-HF repräsentiert die Höheren Fach­schulen in der Schweiz. Als poli­ti­scher Dach­verband sorgt sie unermüdlich dafür, dass die Interessen ihrer mehr als 150 Mitglieder in Politik, Verwaltung, Wirtschaft und Öffentlich­keit wahr­ge­nom­men werden. Der neue Aufritt dient als Infor­mations-Hub und macht die politische Schlag­kraft der Orga­nisation spürbar.

Die Zielgruppen der K-HF verbindet das Bedürfnis, Infor­mationen in möglichst kurzer Zeit erfassen zu können. Bei der Infor­mations­archi­tektur wurde des­we­gen auf kurze Wege geachtet, Inhalte wurden radikal reduziert. Das mini­ma­lis­tische Design sorgt für visu­elle Klarheit, die dem Nutzer hilft sich auf Wesen­t­liches zu kon­zen­trieren. Und die Lade­zeiten? Natürlich eben­falls minimal.

Keine Zeit? Kein Problem.

Das Team der Geschäfts­stelle sah den Relaunch als passende Gelegen­heit, auch die internen Abläufe zu opti­mie­ren. Herz­stück der neuen Webseite ist daher die integrierte Mitglieder­ver­wal­tung mit Login-Bereich. Alle rele­van­ten Daten können an einem einzigen Ort in digi­taler Form erfasst und verarbeitet werden. Aus­ufernde Excel-Listen gehören der Ver­gangen­heit an.

Wo wir schon dabei sind…

«Super Job und perfekte Zusammenarbeit: Vielen herzlichen Dank ans ganze Arillo-Team!»

Corporate Design: <a href="https://obrist-partner.ch/" rel="noopener noreferrer" target="_blank">Obrist und Partner</a> Das Team der K-HF Geschäftsstelle

UX/UI Design, Development, SilverStripe CMS, Mailchimp Newsletter

Corporate Design: <a href="https://obrist-partner.ch" rel="noopener noreferrer" target="_blank">Obrist und Partner</a>

Service Public & Tourismus

Entdeckerticket für das Berner Oberland

Regional-Pass Berner Oberland

Rund 65 Partnerbahnen bieten mit dem Regional-Pass eine günstige Methode um das Berner Oberland zu entdecken. Touristen aus dem In- und Ausland können mit dem Spar­ticket flexibel den öffentlichen Verkehr nutzen und dabei von Rabat­ten und Ver­güns­ti­gungen bei zahl­reichen Partnern profitieren. Unsere lang­jährige Zusammen­arbeit mit dem Kunden, konnten wir beim Relaunch der Web­seite um ein neues Kapitel ergänzen.

Das ambi­tionierte Team hinter dem RPBO sucht kontinuierlich nach Opti­mierungs-Möglich­keiten für das Pro­dukt und die inter­nationale Ver­mark­tung. Ein gesteigerter Fokus auf den digitalen Werbe­markt mit gezielten SEO- und SEA-Mass­nahmen, verstärkt die Bedeutung der Webseite als Ziel­medium. In enger Koope­ration schufen wir ein Konzept für eine klare User Journey und neue Inter­aktions­möglich­keiten, die das Angebot abrunden.

Auf der neuen Webseite lernen Be­su­cher mühelos die Vorteile des Ange­bots kennen und finden alle nötigen Infor­ma­tionen zu Kauf und Ver­wen­dung des Tickets. Zugleich wird hier eine nützliche Inspira­tions­quelle für Ausflugs­ziele geboten: Eine inter­aktive Karte mit thema­tischen Filtern, macht es leicht die zahl­reichen Aus­flugs- und Rabatt­partner zu erfor­schen.

Noch ein nützlicher Service für alle Rei­senden sind die vorgefertigten Tages­touren. Ein interaktives Planungs­tool hilft dem RPBO-Team dabei, Ausflugs-Routen mit mehreren Sta­tio­nen direkt im Backend zu ge­stal­ten. Durch die Anbindung an eine Verkehrs-API, werden Reise­dauer und Ver­kehrs­mittel im ÖV automatisch ermittelt.

«Herzlichen Dank für die super Online-Schulung und nochmals grosses Kompliment an dich und dein Team. Es macht Spass mit euch zusammen­zuarbeiten.»

Damit ungeliebte Über­raschungen ver­mieden werden, erhalten Reisende tages­aktuelle Infor­mationen zur Wetter­lage an den Aus­flugs­orten. Unsere eigens kreierten Icons zeigen das Wetter in all seinen Facetten: Vom strahlenden Sonnen­schein bis zum Gewitter. Natürlich ist das Berner Ober­land bei jedem Wetter einen Besuch wert. Für den Fall der Fälle finden sich auf der Webseite einige ausgewählte <a href="https://www.regionalpass-berneroberland.ch/de/ausflugtipps/7-schlechtwettertipps-fuer-familien/" rel="noopener noreferrer" target="_blank">Schlechtwettertipps</a>.

Konzeption, UX/UI Design, Backend Entwicklung, Frontend Entwicklung

Lead Agentur: Formeldrei SEO/SEA: Corinne von Ballmoos

Innovation made in Switzerland

Creative Hub Website

Creative Hub unterstützt seit 2013 Schweizer Krea­tive bei der Kommerz­iali­sierung inno­vativer Produkt- und Dienst­leistungs-Ideen. Das engagierte Team rund um die Förder­plattform leistet dadurch einen wertvollen Bei­trag für die Start-Up Szene in der Schweiz.&nbsp;Wir wurden be­auf­tragt einen Web­auf­tritt zu ent­wickeln, der die inno­vative Natur des Creative Hub in allen As­pek­ten spiegelt.

Images

In enger Zusammenarbeit mit dem Kunden entstand eine komplett über­holte Web­seite, die nicht nur Infor­ma­tion übermittelt, sondern – durch den ge­ziel­ten Einsatz von Ge­stal­tungs­ele­menten und Ani­mation – auch die Werte und Mission des Creative Hub auf emo­tion­aler Ebene für den User erleb­bar macht.

Brand new

Corporate Design: Büro DestructArt Direction: Sebastian Hirn

Konzeption, UI/UX Design, Animationen, Frontend Entwicklung, Backend Entwicklung

Credits

Creative Hub unterstützt seit 2013 Schweizer Kreative bei der Kommerzialisierung innovativer Produkt- und Dienstleistungs-Ideen. Das engagierte Team rund um die Förderplattform leistet dadurch einen wertvollen Beitrag für die Start-Up Szene in der Schweiz. 

Wir wurden beauftragt einen Webauftritt zu entwickeln, der die innovative Natur des Creative Hub in allen Aspekten spiegelt.

Non-Profit

Ein schwarz-gelber Traum wird wahr

BSC Young Boys Website

Unser persönliches Wunder von Bern passierte, als die BSC Young Boys uns für das Redesign ihrer Website enga­­gier­ten. Als grosse Fussball-Fans, war es uns eine Herzens­angelegenheit, dem grössten Verein in der Region zu einem angemes­senen Auftritt zu ver­hel­fen. Wir beglei­teten den gesam­tem Design Prozess von der Konzeption bis hin zum inter­aktiven Proto­typen.

Fussball ist ein Sport, der von grossen Emo­tionen geprägt ist. Der Verein ver­fügt über einen riesigen Fundus an Bildern und Videos, die den Betrachter direkt in das Geschehen hinein ziehen. Die Website räumt diesen Momenten viel Platz ein, um auch den letzten Be­sucher mit dem Fuss­ball­fieber anzu­stecken.

Hopp YB!

Ob langjähriger Anhänger, Fan-Nach­wuchs oder Busi­ness­partner, die Website eines grossen Fuss­ball­clubs muss eine Vielzahl von Inhalten für ver­schiedenste Zielgruppen orga­ni­sieren. Um die Besucher effizient zu führen, entwickelten wir in enger Zusam­men­arbeit mit dem Verein eine user-zen­trierte Seiten­struktur. Als zentrales Gestaltungs­element führten wir eine Sidebar-Navigation ein, die jederzeit Orientie­rung bietet.

Eine Website für alle Fans

Absoluter Höhepunkt jeder Woche ist für YB Fans der Match­tag – auch auf der Web­seite. Egal ob am Com­puter oder auf dem Smart­phone: Der Match Day Modus bietet alle Infor­ma­tionen zum nächsten Spiel und steigert die Vor­freude mit dem Count­down. Ab dem Anpfiff versorgt das Match­center von News­room alle daheim ge­blie­be­nen mit Live-Radio, einem Ticker und Fotos direkt aus dem Stadion. Spiel­berichte und Bilder­galerien lassen im Nach­gang die besten Momente noch­mals auf­leben. Es ist schön Fan zu sein!

It's a Matchday!

Als Fussball-Nerd will man es immer ganz genau wis­sen. Wie viele Assists hat Kevin Mbabu in der letzten Saison gespielt? Wie gross ist Steve von Bergen? Wie viele Spiele bis zur Meister­schaft? Auf der Young Boys Website finden sich Spiel­pläne, Sta­tis­tiken, Kader-Infos und vieles mehr. Da kommen sogar Fuss­ball-Historiker auf ihre Kosten.

Informations­überfluss erwünscht

Wir möchten, dass alle YB Fans sich vertragen. Wenn beim nächsten Fuss­ball Stamm­tisch wieder darüber gestritten wird, wer 1986 im Meister­cup das Tor gegen Real Madrid ge­schossen hat: <a href="https://www.bscyb.ch/yb-international" rel="noopener noreferrer" target="_blank">Hier gibt es die Antwort</a>.

Hätten Sie's gewusst?

Informationsarchitektur, Workshops, UX/UI Design, Prototyping, Newsletter

Art Direction: Sebastian Hirn, Entwicklung: Extern

Events & Kultur

Drag & Drop it like it’s hot

Casino Remix Website

Das Casino Bern ist seit der Eröff­nung im Jahre 1909 ein wichtiger ge­sell­schaft­licher und kultureller Treff­­punkt der Region Bern. Im Rahmen einer umfang­­reichen Reno­­vierung wurden 30 der popu­­lärsten Berner Musiker eingeladen auf der Gross­­bau­­stelle zu performen. Arillo und Formeldrei wurden beauftragt ein Konzept zu entwickeln, das die Per­for­­mances online erlebbar macht und die Ver­brei­tung auf sozialen Netz­­werken fördert.

Wir entwickelten eine inter­aktive Musik-Mixer Web-App, die es den Usern ermöglicht eigene Musik-Clips zu erstellen und zu teilen. Die Kom­po­si­tionen lassen sich durch eine ein­fache Drag &amp; Drop Mechanik aus kurzen Videos der Per­for­mances zusam­men­stellen. Jeder Mix ist eine einzig­artige Kre­ation, die indi­vi­duell auf sozialen Netz­werken geteilt werden kann.

Hier spielt die Musik

Eine besondere Heraus­forderung be­stand darin das Mixer Interface sowohl auf mobilen als auch auf Desk­top-Endgeräten gleicher­massen nutzer­freundlich zu halten. Wir wählten daher moderne Technologien wie React, MobX und GSAP. Sie ermö­g­lichen eine ein­fache und spie­lerische User Experience, in der User ihrer Kreativität freien Lauf lassen können.

Die passenden Instrumente

Auch wir haben den Mixer angeworfen und <a href="https://www.casinoremix.ch/play/c8c3e555-56e6-419d-9b08-e6dfaeb2d737" rel="noopener noreferrer" target="_blank">unser eigenes Meisterwerk kreiert</a>. Anfragen für Live-Auftritte und Plattenverträge bitte an <a href="mailto:hello@arillo.ch" rel="noopener noreferrer">hello@arillo.ch</a>.

Unser Remix

Konzeption, Interaction Design, Animationen, Frontend Entwicklung, Backend Entwicklung&nbsp;

Lead Agentur: BOLD Nik Leuenberger, Casino Bern Lukas Iselin, Alle Töne Fabian Steiner, Fabust Film Roman Tschäppeler, Guzo

Kleine Nerven­sägen kommen gross raus

Verfora App

Die Progtagonisten in dieser cross­medialen Kam­pagne für VERFORA sehen zwar lustig aus, sind aber ganz schön fies. Sie heissen Kopfus Klopfus, Schnupfus Maximus, Pollus Juckus oder auch Fiebrus Plagus und ihre Namen sind Pro­gramm. Mit Hilfe der Augmented Reality App und der Kam­pagnen-Web­seiten, machen die Quäl­­geister auch den digitalen Raum unsicher.

Die Quälgeister haben in Windes­eile die Schweizer Kinder­zimmer erobert. Ermöglicht haben das die VERFORA Memory Karten zum sammeln und die dazu gehörige App für iOS und Android. Der Augmented Reality Scanner er­weckt die Fieslinge auf den Karten mit lustigen 3D Ani­mationen zum Leben. Jeder neue Scan schaltet zusätz­liche Inhalte in der App frei, z.B. neue Sticker für das Selfie Feature. User Experience und Fun Factor der App wurden früh­zeitig in User Tests über­prüft.

Nervensägen in 3D

Die Website zur Kampagne stellt die Quäl­geister und die asso­ziierten VERFORA Produkte vor. Ein ziemlich vorlauter Charakter namens Schnupfus Maximus kommentiert dabei jeden Klick. Wer das Augmented Reality Memory für zuhause haben will, dem hilft die POS-Suchmaschine eine teil­nehmende Apotheke oder Drogerie in der Um­gebung zu finden. Für Eilige gibt es auf der Webseite auch eine browser­basierte Version vom Memory Spiel: Wer deckt am schnell­sten alle Paare auf?

Microsite für Mikromonster

Ein be­glei­ten­der Foto-Wett­be­werb stiftet zusätz­lichen Anreiz zur Inter­aktion mit den Quäl­geistern. Wer die Selfie Funk­tion der App nutzt und über die Micro­site einen Schnapp­schuss hochlädt, hat die Chance einen Reise­gut­schein zu gewinnen.

Selfie stick optional

Konzeption, UI/UX Design, Art Direction, User Testing, Frontend Entwicklung, Backend Entwicklung

Lead Agentur: Formeldrei, 3D Animationen: Boutiq, User Testing: Pascal Geronimi, Text: Regina Münstermann

Wie sagt man «Präzisions­schleifen» auf Koreanisch?

United Grinding Design System

Die «United Grinding Group» mit Sitz in Bern ist die wel­tweite Dach­marke für eine Reihe von Unter­nehm­ungen, die auf die Ent­wick­lung und Pro­duk­tion von industriellen Bohr- und Schleif­maschinen spezial­isiert sind. Arillo wurde mit der Ent­wicklung eines digi­talen Design Sys­tems beauf­tragt, um eine einheit­liche User Experience für Website Besucher auf der ganzen Welt zu erreichen.

Ein zentraler Bestand­teil des Pro­jektes war die Neu­kon­zep­tion und -Gestal­tung von elf unter­schied­lichen Sparten-Webseiten unter dem United Grinding Brand. Jede Webseite ist jeweils in mehreren Sprachen ver­füg­bar, darunter nicht-lateinische wie Russisch, Koreanisch und Mandarin.

Die Gestaltung einer modu­laren Pattern Library auf Basis der Atomic Design Prinzipien, war der Garant für einen reibungs­losen Ent­wick­lungs­prozess. Dank der Flexi­bilität, die das neue System mit sich brachte, war der tech­nische Partner des Kunden in der Lage, schnell auf neue Anfor­derungen zu rea­gieren und mit den vor­handenen Bau­steinen selbst­ständig neue Temp­lates herzu­stellen.

Entstanden ist ein mo­der­nes, funk­tio­nales und kon­sistentes Design System, das alle Brands im digi­talen Raum einheit­lich reprä­sentiert. Das Unter­nehmen entschied, unsere Ideen in die Corporate Identity Guide­lines auf­zu­nehmen und ging dazu über, das System auch auf andere Inter­faces aus­zu­weiten.

Digital Branding, Information architecture, UX/UI Design, Pattern library

Lead Agentur: Formeldrei Entwicklung: Bitmotion

Industrie & Produktion

Aus alt mach nice

Rework

Rework sucht nach span­nenden Vin­tage-Textilien, die mit neuen Schnitten zu trendigen Unikaten um­ge­ar­beitet werden. Dabei gewinnen alle: Die Umwelt wird geschont, Mit­ar­beiter welt­weit erhalten faire Löhne, der Kunde bekommt tolle Einzel­­stücke und wir durften Corporate Design und Online Shop bei­steuern. Rework zeigt, wie man Nach­­haltig­­keit auf ele­gante Weise mit Fashion in Ein­klang bringen kann.

Um den Start von Rework gebührend zu feiern, wurde in enger Kooperation mit dem Fizzen-Team eine Sonder­aus­gabe vom haus­eigenen Fizzen Magazin #6 entwickelt. Neben den obli­gato­rischen Mode­­­strecken, erhält der Leser Einblick in die noch junge Geschichte der Marke, die zugrunde liegende Philosophie und die Pro­duk­tions­­­abläufe. Mitarbeiter­portraits an den Standorten in Bangkok, Indien und der Schweiz zeigen die Menschen hinter den Kulissen. Sympathisches Aushänge­­schild der Ausgabe ist die beliebte Schweizer Moderatorin und Journalistin Gülsha.

Die Story hinter der Marke

Wer nicht das Glück hat, in der Nähe einer Rework Filiale zu wohnen, kann die Einzelstücke auch online bestellen. Wir haben den Web Shop mit Shopify realisiert und mit einem Custom Theme im Brand Look ausgestattet. Diese Lösung bietet dem Rework Team grösstmögliche Autonomie und Flexibilität bei der Weiterentwicklung des Online Geschäfts.

Web Shop für neue Lieblingsstücke

Branding, Editorial Design, UI/UX Design, Shopify Entwicklung

Business Platform für richtungs­weisenden Jour­nalismus

NZZ Mediengruppe Website

Die NZZ-Mediengruppe mit Sitz in Zürich ist eines der grössten privaten Medien­unter­nehmen der Schweiz. Ihr Portfolio umfasst viele Publikationen mit hoher journalistischer und äs­the­tischer Kom­pe­tenz, darunter eine Reihe grosser Tages- und Wochen-Zeitungen, Magazine, Radio Sender und Online Portale. Für einen an­spruchs­vollen Kunden, haben wir erfol­greich mit den Word­­Press-Spe­zia­listen von Comotive zusammen gearbeitet.

Die Mediengruppe ist Heraus­geberin der «Neuen Zürcher Zeitung», der ältesten noch erschein­enden Zeitung in der Schweiz. Als anerkanntes Leit­medium, steht die NZZ für Kompetenz, Sachlich­keit und genaue Recherche. Dieser alles bestim­mende An­spruch findet seine visuelle Über­setzung im präzisen Layout der Webseite. Klarheit, hoch­wertige Eleganz und Mut zum Mini­malismus kenn­zeichnen das modulare Design System.

«Neue» Zürcher Zeitung

In regelmässigen Abständen gibt die Gruppe Medien­mit­teil­ungen heraus, um über ihre Aktivi­täten zu infor­mieren. Wie es sich bei der Arbeit für ein Unter­nehmen mit publi­zistischem Hinter­grund gehört, wurde für die Artikel-Seiten Wert auf visuelle Stringenz und optimale Les­bar­keit gelegt.

Newsflash: Lesen macht wieder Spass

Eine Haupt-Zielgruppe der Website sind die Aktionäre der Medien­gruppe. Im Bereich «Aktionariat» liegen den Anteils­eignern in über­sicht­licher Weise alle für sie rele­vanten Infor­mationen vor. Aktien­kurse, Kenn­zahlen, Finanz­berichte und Veran­staltungen sind kompakt präsen­tiert und jederzeit für Ana­lysten ver­gleichbar.

Big money, big responsibility

In Anlehnung an das Design der NZZ Medien­gruppe entstand ein eigener Auftritt für NZZ Media Solutions. Wo die Website der Medien­gruppe vor­wie­gend eine infor­mierende Funk­tion erfüllt, stehen bei der Media Solutions stärker die Werbe­partner im Fokus. Ein grosses Augen­merk wurde daher auf die attrak­tive Präsen­tation der Produkte gelegt, sowie eine klare Struktur mit nutzer­zentrierter Usability.

Werbung für Werber

UX/UI Design, Workshops, Art Direction, Coaching, Prototyping

Wordpress Entwicklung: <a href="https://www.comotive.ch" rel="noopener noreferrer" target="_blank">Comotive</a>, Fotografie und Video: <a href="https://www.opladen.ch" rel="noopener noreferrer" target="_blank">Simon B. Opladen</a>, <a href="https://kerstinberk.com/" rel="noopener noreferrer" target="_blank">Kerstin Berk</a>

Dienstleistungen

Arbeiten

Work

Wir gestalten und entwickeln digitale Produkte und begleiten Kunden von der Idee bis zum fertigen Produkt.

Arillo Projekte

Sneaker Designer

K-HF

BLS

Creative Hub

BSC Young Boys

Casino Remix

Verfora

United Grinding

Rework

NZZ Mediengruppe