Back to Showcase

The modern version of a construction kit

frontastic Boost Theme

I worked as an Interim Webdesign for the full remote SaaS startup about one year. I developed a standard shop with the team on which customers like Universal Music, Bonprix & Co. build their own platforms.

Services

  • Interface Design
  • Frontend
  • Scalable CSS Architecture

Deliverables

  • Figma-Prototype
  • CSS Architecture

Interfacedesign in Figma

The theme was developed from scratch. So I defined colors, fonts and compositions. I started to develop single components and put them together to pages. This also ensured that the developers had everything they needed to develop the components.

mobile-phone-2

Focus on mobile

The eCommerce sector can no longer do without mobility and is becoming increasingly important. Frontastic pursues the Mobile First idea in their software development and so I followed it in design as well.

ui-columns

Modular principle

The assembled pages are made of components that are put together like a puzzle. So I could document the components and quickly build more pages in the future.

Navigation concept

One of the most important things about a website is the navigation. This must be simple and user-friendly on all viewports. I decided to hide the navigation on small devices and display it with an overlay. Deeper levels only become visible when the user wants them to. On the desktop I use the whole space and show the most important points directly.

The Guide

The heart of the category page to filter the visible products. By horizontal swiping the user can view all possible items of a category and dive into deeper levels.

Storybook as central place

After the design process I started working with the team to translate the components into React components. I provided a modular and scalable CSS that developers could use on their own for new components. The documentation and presentation of the components was captured in Storybook, which we provide to our customers.