Concept, design and implementation of a pattern library

The goal was to use a design system to re-conceptualize, design and redevelop the s.Oliver webshop as if it were a construction kit. To achieve this, we worked our way from the rough to the fine, starting with a global design vision that was integrated in the most focused way on the brand's strongest page, the start page. From the emotional start, we moved on to the functional via the product detail page to the shopping cart and checkout.

• Adaptation of the brand book into the digital world. For this purpose, a design vision was created, from which several styletiles were derived. These form the basic framework for the pattern library.
  
• Concept and design of various start page modules such as Hero-Stages, Productslider or interactive modules such as a SwipeStyles module, where users can display products according to their preferences.
  
• Concept and design of product detail pages for different viewports. In addition, a click and reserve functionality was developed as well as an animated size table to better advise users and thus avoid returns.

ROLE

Lead Interaction Designer

CLIENT

s.Oliver

PLATFORMS

Webdesign Mobile, Tablet, Desktop

YEAR

2019 - 2021

Ernsting's Family mobile app

As Lead Interaction Designer for Ernsting's Family, I was responsible for the native conception and design of the product detail page, shopping cart and feature communication. Development support and testing are also part of the job.

• Concept and design of the native product detail page. Integration of a native slider with pinch-to-zoom feature for optimal product image viewing. Additional integration of a sticky button after scrolling over the shopping cart button to add the desired product to the shopping cart faster.
  
  

• Since the Erstings Family app contains many useful features, such as the notepad, the reminder function for theme worlds or the sharing option, these should be shown and explained more prominently.

  Movements of new users were tracked for a period of time. If the features were not used, they were displayed to the user by an animated overlay reflecting the brand. The focus here is not only on the explanatory text, but also on the position of the icon that contains the feature. If the user has already used the feature, the overlay was not displayed to him.

ROLE

Lead Interaction Designer

CLIENT

Ernsting's Family

PLATFORMS

Android | iOS

YEAR

2018 - 2021

Type design "Alfie"

Design and implementation of the font Alfie under the direction of Professor Veljovic. Alfie is a sans serif display font that is perfect for use as a headline font due to its clear and straightforward appearance. 

• It consists of a total of six weights: regular, demibold and bold, as well as the respective italics. Each style contains 240 characters.
  
  

• For the presentation, a booklet was conceived, designed and implemented. Alfie shows here how well it works and how versatile it is.

AREA

Type Design

PROJECT

Frei – HAW Hamburg

TOOLS

FontLab

YEAR

2015