Largest greek products e-commerce site selling more than 1000 greek products in 5 different languages worldwide.

This project is actively maintained in collaboration with With Love Internet.

Advice on technical issues regarding integrated e-commerce services

Greek Flavours

We developed a new intranet site for Siemens ARTIFICIAL INTELLIGENCE @ CORPORATE TECHNOLOGY. It serves as the internal communication of services and gives the editors of the website the possibility to change contents and structures independently and individually.

The old Siemens AI@CT site is based on an outdated web architecture, which causes several problems:

No responsive behavior at different screen sizes

Design restrictions due to technology limitations

In order to present and sell training, knowledge and processes of Siemens AI@CT internally, the current site needs to be redeveloped. A new high-speed web framework is intended to perfect the loading time of pages and also give editors of the site the ability to easily and quickly add and customize content. For this purpose, an individually adapted CMS shall be integrated into the site.

We built the new website using the Gatsby component-based JavaScript framework. This allowed us to create pages with the fastest possible loading time. Long cluttered pages could thus be split into several shorter subpages.

video-siemens-trimmed.mp4

To maintain the corporate identity of Siemens, we integrated the Siemens-internal design theme into the new website. Design elements and functions, which were not feasible with the old technology, were rethought based on CI guidelines, designed and animated.

The new status bar now guides visitors clearly through the processes displayed on the page. It shows the user's current scroll position and, unlike before, now offers a seamless experience on mobile devices as well.

Markdown files make up an individualized and function-specific content management system. Texts, images, icons, pages and links can be easily edited and added with it. This does not require a technical background and the function of the page can not be affected unintentionally.

Content such as these texts about a training offered (highlighted in red) can be changed very intuitively via Markdown files. Text formatting, metadata and insertion of components can be done via simple codings.

Using the "Use Case Explorer", projects can be intelligently filtered and displayed according to several criteria. Clicking on the respective project displays further detailed information. The page makes use of an existing internal API in which the projects are stored.

Siemens AI@CT

We designed and developed a new e-commerce shop for Biersafe, a beer accessory manufacturer from Germany.

An e-commerce shop for Biersafe, a beer accessory manufacturer from Germany.

BIERSAFE

Our mission was to redesign and redevelop the existing Wordpress online shop with state-of-the-art technology. The new site should improve the shopping experience and ultimately increase conversion.
Together with Biersafe we agreed on a end-to-end product development process. It encompassed several steps listed below

In a discovery session and a following branding workshop we challenged the Biersafe team against their brand. We defined the customer, revised the value proposition of Biersafe and created a compelling visual language.
We identified that Biersafe customers are largely middle aged house owners with a backyard and a big circle of friends who like to have get togethers outside.
The outcome was a branding guideline and a site structure in the form of wireframes tailored to those customers.

While the branding guidelines and wireframes layed down the foundation for the customer journey our designers translated this into a high-fidelity user interface. We put a particular focus on a design that is strongly connected to the language of the earlier created brand. We refreshed the visual language of Biersafe with a new sunny yellow color, representing beer and sunshine and a laid-back 70s typeface.
The final design included an emotional user journey throughout the landing page, a functional shop page and informational team and info pages.

In order to craft a perfectly customized and high-performant online shop we used the frontend framework GatsbyJS and integrated the e-commerce platform Shopify. Not yet adapted in the e-commerce space, the static site generation through Gatsby allows for almost unnoticeable loading times. The enhanced user experience results in lower bounce rates and higher completed purchase rates.
We added Contentful as a content mangagement system so that Biersafe can easily edit informational content and trigger new versions of the site.

Subsequently we took care of the deployment of the new site and transitioned seamlessly from the old to the new one without any downtime.
Finally we arranged a handover workshop together with Biersafe where we explained how to manage the product catalog in shopify and change content on the site.
Post delivery we continuously host, maintain and ensure the security of the site.
Prost!

For a startup, we designed and developed a web application that offers high school students insights into various jobs in the form of videos.

The client approached us with the idea of building a digital job orientation platform. With no more than a few presentation slides, that conveyed the rough idea, our mission was to flesh out the idea, bring it to life as a mobile-first web-application and ultimately solve the business case assigned to us in the short timeframe of 2 months.

In a continuous discovery process with the client we advised with our industry knowledge about user interests, behaviors and best practices. We challenged ideas, systematically separated the good ideas from the bad and iterated over the user journey to then break everything down into the following:

Users signup for an account by answering only the most basic informations about themselves to avoid drop off rate during the process.

Users then agree or decline personal and job related questions on cards by swiping them left or right.

After completion users can access recommended videos based on their given answers.

In these videos, people from a specific industry give insights into their profession and career.

Users can get into discussions with the community below the video.

The result of this UX design process were low fidelity wireframes that constituted the first clickable prototype.

With our wireframes in place our goal was now to design the real interface of the app with all its details and speak the language of the brand. Our goal was to surface the product to our earlier defined student in a clean, simple and intuitive way.

To focus on clarity and consistency we kept the design clean and simple with two main colors and reoccurring elements.

Interactive elements like swiping cards and comments were supposed to feel familiar and intuitive to use and were therefore based on established apps like Tinder and Instagram. Like hearts, speech bubbles and filter buttons were designed in a way that invites users to interact in a playful way with the product.

Main ideas revolved around a decision based swiping feature with an intelligent matching alogrithm, a recommendation video library and a realtime chat.

The app architecture is built with the javascript framework NextJS on the frontend and Firebase on the backend. We chose this stack because it allows for rapid scalability, speed and easy maintenance.

With the integration of Contentful as a content management system the client can not only easily add content like questions and videos but also classify and customize the uploaded content to influence how it is matched with users interests.

We developed a matching algorithm that intelligently matches users answers to specific videos the user is likely to be interested in. Questions and videos are weighted against a user's answers and can thus be sorted by most matching interest

To foster in-app engagement and communication we integrated a real time chat feature that allows users to read, post and like comments below a video. Users get immedieate response on their comments and those of others.

The app was set up in a way that makes continuous development and deployment as easy and fast as possible. Through the separation into a staging and production environment, new features and content can be tested before it goes live to the public. Our powerful backend-solution makes deployment of new versions and hosting fast, safe and reliable.

Job finder

We developed a new intranet site for the Machine Intelligence Research Team at Siemens. It is used for internal communication of services and allows interested parties to try out Siemens' AI services and products via demos on the website. It also gives website editors the ability to independently and individually change content and structure via the custom-built content management system.

Siemens MIRG

We designed and developed a new e-commerce shop for Equi Dreams, a horse accessory manufacturer from Germany.

Equi Dreams

Landing page for the car startup Strommotors from India

Strommotors

Creation of a website with a content management system for an interior design office

Projects