Arillo Projects

Project Index

From old to gold

Rework Webshop

Our friends at Rework are trying to make the world a little better by make new out of old. In line with their motto we updated their Shopify e-commerce online shop with a fresh theme to better promote their immense variety of one-of pieces made from second hand clothing.

We worked hand in had with their marketing team to come up with a design that represent the brand values and allows an optimized online shopping experience for their customers.

Web design, Shopify theme development, Consulting

Services

Manufacturing & Industrials

Design

Development

Ruin some perfectly good Sneakers

Sneaker Designer

As part of a limited-time Brand Activation, this 3D sneaker designer was created. The interactive web app offers a range of creative design options to customize an iconic sneaker design.

Our 360° editor enables a playful and intuitive user experience. The bright stickers can be placed directly on the 3D sneaker from all sides and combined freely. For ambitious artists, painting tools with different brush tips and a free text tool are available. With just a few clicks you can create a unique shoe design.&nbsp;

Intuitive Tools

To allow users to unleash their creativity, Sneaker Designer is built on a robust technical foundation. Modern web technologies like React, Redux, WebGL with Three.js and GraphQL Server API provide the necessary flexibility and performance.

Low poly, high performance

A raffle held as part of the associated brand activation meant that some lucky winners were able to realize their designs. In meticulous manual work, the digital templates were realized by local artists as truly unique pieces.

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

Lead agency and key visual: BOLD, Illustrations: Matthias Zimmermann, 3D modeling: Severin Brodmann

Partners

Consumer Goods & Retail

Connecting educational and political leaders

k-hf.ch Website

K-HF represents the higher technical colleges in Switzerland. As a political umbrella organization, it tirelessly ensures that the interests of its more than 150 members are perceived in politics, administration, business and the public. The new website serves as an information hub and makes the political clout of the organization tangible.

The target groups of the K-HF are united by the need to be able to grasp information in as short a time as possible. The information architecture was therefore designed with short paths in mind, and content was radically reduced. The minimalist design ensures visual clarity, which helps the user to concentrate on the essentials. And the loading times? Minimal, of course.

No time? No problem.

The team at the office saw the relaunch as a fitting opportunity to optimize internal processes as well. The heart of the new website is therefore the integrated member administration with login area. All relevant data can be recorded and processed in digital form in a single place. Sprawling Excel lists are a thing of the past.

While we're at it...

«Great job and perfect cooperation: many thanks to the whole Arillo team!»

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>

Public Service & Tourism

Discovery ticket for the Bernese Oberland

Regional-Pass Berner Oberland

Around 65 partner railroads offer a low-cost way to discover the Bernese Oberland with the Regional Pass. Tourists from Switzerland and abroad can use public transport flexibly with the savings ticket and benefit from discounts and reductions with numerous partners. We were able to add a new chapter to our long-standing collaboration with the customer during the relaunch of the website.

The ambitious team behind the RPBO is continuously looking for optimization opportunities for the product and international marketing. An increased focus on the digital advertising market with targeted SEO and SEA measures, reinforces the importance of the website as a target medium. In close cooperation, we created a concept for a clear user journey and new interaction possibilities that round off the offer.

On the new website, visitors effortlessly learn about the benefits of the offer and find all the necessary information on how to buy and use the ticket. At the same time, it provides a useful source of inspiration for excursion destinations: An interactive map with thematic filters, makes it easy to explore the numerous excursion and discount partners.

Another useful service for all travelers are the ready-made day trips. An interactive planning tool helps the RPBO team to design excursion routes with multiple stops directly in the backend. Through the connection to a transport API, travel duration and means of public transport are determined automatically.

«Thank you very much for the super online training and again big compliments to you and your team. It's a pleasure to work with you guys.»

To avoid unpleasant surprises, travelers receive daily updated information on the weather situation at the excursion destinations. Our specially created icons show the weather in all its facets: from bright sunshine to thunderstorms. Of course, the Bernese Oberland is worth a visit in any weather. Just in case, you will find some selected <a href="https://www.regionalpass-berneroberland.ch/en/attractions/7-bad-weather-tips-for-families/" rel="noopener noreferrer" target="_blank">bad weather tips</a> on the website.

Concept, UX/UI Design, Backend Development, Frontend Development

Lead agency: Formeldrei SEO/SEA: Corinne von Ballmoos

Innovation made in Switzerland

Creative Hub Website

Creative Hub has been supporting Swiss creatives in the commercialization of innovative product and service ideas since 2013. The dedicated team around the funding platform thus makes a valuable contribution to the start-up scene in Switzerland.&nbsp;We were commissioned to develop a website that reflects the innovative nature of the Creative Hub in all aspects.

In close cooperation with the client, a completely overhauled website was created that not only conveys information, but - through the targeted use of design elements and animation - also makes the values and mission of the Creative Hub tangible for the user on an emotional level.

Brand new

Concept, UI/UX Design, Animations, Frontend Development, Backend Development

Creative Hub has been supporting Swiss creatives in the commercialization of innovative product and service ideas since 2013. The dedicated team around the funding platform thus makes a valuable contribution to the start-up scene in Switzerland. 

We were commissioned to develop a website that reflects the innovative nature of the Creative Hub in all aspects.

Non-Profit

Making yellow and black dreams come true

BSC Young Boys Website

Our personal miracle of Bern happened when BSC Young Boys hired us for the redesign of their website. As big football fans, it was a matter of the heart for us to help the biggest club in the region to an appropriate appearance. We accompanied the entire design process from the conception to the interactive prototype.

Football is a sport that is characterized by great emotion. The club has a huge pool of images and videos that draw the viewer right into the action. The website gives these moments a lot of space to infect even the last visitor with football fever.

Hopp YB!

Whether long-time supporters, young fans or business partners, the website of a major football club has to organize a variety of content for a wide range of target groups. To guide visitors efficiently, we developed a user-centric site structure in close collaboration with the club. As a central design element, we introduced a sidebar navigation that provides orientation at all times.

One website for all the fans

The absolute highlight of every week for YB fans is Match Day - also on the website. Whether on the computer or on the smartphone: The Match Day mode offers all information about the next match and increases the anticipation with the countdown. From kick-off, Newsroom's Match Center provides all those at home with live radio, a ticker and photos directly from the stadium. Match reports and picture galleries let you relive the best moments afterwards. It's great to be a fan!

It's a Matchday!

As a football nerd, you always want to know exactly. How many assists did Kevin Mbabu have last season? How tall is Steve von Bergen? How many games until the championship? On the Young Boys website you can find match schedules, statistics, squad info and much more. Even football historians will get their money's worth.

Information overload desired

We want all YB fans to get along. When at the next football regulars' table there is again an argument about who scored the goal against Real Madrid in the 1986 Champions Cup: <a href="https://www.bscyb.ch/yb-international" rel="noopener noreferrer" target="_blank">Here is the answer</a>.

Would you have known?

Information Architecture, Workshops, UX/UI Design, Prototyping, Newsletter

Art Direction: Sebastian Hirn, Development: Extern

Events & Culture

Drag & Drop it like it’s hot

Casino Remix Website

Casino Bern has been an important social and cultural meeting place in the Bern region since it opened in 1909. As part of an extensive renovation, 30 of Bern's most popular musicians were invited to perform at the large construction site. Arillo and Formeldrei were commissioned to develop a concept to bring the performances to life online and to promote their dissemination on social networks.

We developed an interactive music mixer web app that allows users to create and share their own music clips. The compositions can be assembled from short videos of the performances using a simple drag and drop mechanic. Each mix is a unique creation that can be shared individually on social networks.

This is where the music plays

A particular challenge was to keep the Mixer interface equally user-friendly on both mobile and desktop devices. We therefore chose modern technologies like React, MobX and GSAP. They enable a simple and playful user experience where users can let their creativity run free.

The right instruments

We fired up the mixer and created our <a href="https://www.casinoremix.ch/play/c8c3e555-56e6-419d-9b08-e6dfaeb2d737" rel="noopener noreferrer" target="_blank">own masterpiece</a>. Please send inquiries for live performances and record deals to <a href="mailto:hello@arillo.ch" rel="noopener noreferrer">hello@arillo.ch</a>.

Our Remix

Concept, Interaction design, Animations, Frontend Development, Backend Development&nbsp;

Lead Agency: BOLD Nik Leuenberger, Casino Bern Lukas Iselin, All Tones Fabian Steiner, Fabust Film Roman Tschäppeler, Guzo

Little annoyances make it big

Verfora App

The progtagonists in this cross-media campaign for VERFORA may look funny, but they're pretty nasty. They are called Kopfus Klopfus, Schnupfus Maximus, Pollus Juckus or Fiebrus Plagus, and their names say it all. With the help of the augmented reality app and the campaign website, the pests are also making digital space unsafe.

The tormentors have conquered Swiss children's rooms in no time at all. This was made possible by the VERFORA memory cards to collect and the accompanying app for iOS and Android. The augmented reality scanner brings the creeps on the cards to life with fun 3D animations. Each new scan unlocks additional content in the app, such as new stickers for the selfie feature. User experience and fun factor of the app were checked in user tests at an early stage.

Tormentors in 3D

The campaign website introduces the tormentors and the associated VERFORA products. A rather cheeky character named Schnupfus Maximus comments on every click. If you want to have the augmented reality memory at home, the POS search engine helps you find a participating pharmacy or drugstore in your area. For those in a hurry, there is also a browser-based version of the memory game on the website: Who can uncover all the pairs the fastest?

Microsite for Micromonsters

An accompanying photo contest provides an additional incentive to interact with the tormentors. Anyone who uses the app's selfie function and uploads a snapshot via the microsite has the chance to win a travel voucher.

Selfie stick optional

Concept, UI/UX Design, Art Direction, User Testing, Frontend Development, Backend Development

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

How do you say „High Precision grinding“ in Korean?

United Grinding Design System

Switzerland based “United Grinding Group” is the worldwide umbrella brand for a number of ventures with a focus on development and production of enterprise grade grinding machines. Arillo was commissioned to develop a design system with the goal to create a&nbsp;consistent user experience for website visitors across the globe.

The project involved the redesign of 11 websites for multiple branches under the United Grinding brand. Each website is available in various laguages, including not-latin tongues like Russian, Korean and Mandarin.

The creation of a modular and responsive pattern library based on atomic design principles allowed for a smooth development process. Due to the flexibility of the system, the customers technical partners were empowered to quickly create additional templates in response to new requirements.

We were able to create a modern, functional and consistent design language unifying all brands across the digital space. The company decided to encorporate our ideas into their corporate identity guidelines and went on to roll out the system across other applications as well.

Digital branding, information architecture, UX/UI design, pattern library

Lead agency: Formeldrei Development: Bitmotion

Rework Branding

Rework looks for exciting vintage textiles, which are reworked with new cuts to unique trendy pieces. Everyone wins: the environment is protected, employees worldwide receive fair wages, the customer gets great unique pieces and we were allowed to contribute corporate design and online store. Rework shows how sustainability can be elegantly combined with fashion.

To properly celebrate the launch of Rework, a special edition of the in-house Fizzen Magazine #6 was developed in close cooperation with the Fizzen team. In addition to the obligatory fashion spreads, the reader gets an insight into the still young history of the brand, the underlying philosophy and the production processes. Employee portraits at the locations in Bangkok, India and Switzerland show the people behind the scenes. The issue's likeable figurehead is the popular Swiss presenter and journalist Gülsha.

The story behind the brand

Those who are not lucky enough to live near a Rework store can also order the unique pieces online. We implemented the web store with Shopify and equipped it with a custom theme in the brand look. This solution gives the Rework team the greatest possible autonomy and flexibility in developing the online business.UPDATE: We had the honor to implement the new version of the webshop. You can find the case <a href="/en/projects/rework-webshop" rel="noopener noreferrer">here</a>.

Web Shop for new favorites

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

Business platform for trend-setting journalism

NZZ Mediengruppe Website

The NZZ Media Group, headquartered in Zurich, is one of the largest private media companies in Switzerland. Its portfolio includes many publications with high journalistic and aesthetic competence, including a number of major daily and weekly newspapers, magazines, radio stations and online portals. For a demanding client, we successfully worked with the WordPress specialists at Comotive.

The media group is the publisher of the "Neue Zürcher Zeitung," the oldest newspaper still published in Switzerland. As a recognized leading medium, the NZZ stands for competence, objectivity and accurate research. This all-defining claim finds its visual translation in the precise layout of the website. Clarity, high-class elegance and the courage to minimalism characterize the modular design system.

At regular intervals, the Group issues media releases to provide information about its activities. As befits work for a company with a journalistic background, importance was attached to visual stringency and optimum readability for the article pages.

One of the main target groups of the website are the shareholders of the media group. In the "Shareholders" section, shareholders have access to all the information relevant to them in a clearly structured manner. Share prices, key figures, financial reports and events are presented compactly and can be compared at any time for analysts.

Big money, big responsibility

Based on the design of the NZZ Media Group, a separate website was created for NZZ Media Solutions. Whereas the website of the media group mainly fulfills an informative function, the focus of Media Solutions is more on the advertising partners. A great deal of attention was therefore paid to the attractive presentation of the products, as well as a clear structure with user-centered usability.

Advertising for advertisers

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

Wordpress Development: <a href="https://www.comotive.ch/" rel="noopener noreferrer" target="_blank">Comotive</a>, Photography 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>

Professional Services

Arbeiten

Work

We design and develop digital products and accompany customers from the initial idea to the finished product.

Arillo Projects

Rework

Sneaker Designer

K-HF

BLS

Creative Hub

BSC Young Boys

Casino Remix

Verfora

United Grinding

Rework

NZZ Media Group