Shopware
Helping store owners run their business with well thought-out features and interfaces.
About Shopware
I have been working at shopware as a UI/UX designer since 2017, and have been involved with the Shopware 6 product from the very beginning. My main focus is on the administration area, where shop owners manage their online stores. In this role, I have put special emphasis on designing user friendly and intuitive interfaces.
During my time at shopware, I have not only developed my design skills, but also my ability to work in interdisciplinary teams. I have worked closely with product managers, developers, and quality assurance to ensure that our design concepts are seamlessly integrated into the product development process. This close collaboration has allowed us to develop efficient and high quality solutions that meet our customers’ needs.
I have also worked on several special projects, including the development of configurable products, the Shopware Extension Store and the implementation of Digital Sales Rooms. Through these projects I have broadened and deepened my knowledge and skills in a variety of areas. I’ve also assisted in various areas, whether it’s the online store storefront or creating the foundations of the UI framework for administration.
This versatility has allowed me to gain a wide range of experience and knowledge, making my work as a UI/UX designer at shopware even more effective.
Digital Sales Rooms
Digital Sales Rooms (DSR) is a groundbreaking platform that enables businesses to present and sell products and services in a new way. With a focus on B2B customers, DSR enables the creation of engaging presentations using Shopware’s native page builder. These presentations are used in interactive meetings where attendees and presenters can communicate via voice and video chat.
A key feature of DSR is the ability for attendees to add products to their shopping carts or wish lists directly from the presentation. This creates a modern and interactive shopping experience.
DSR also enables integration with existing online stores, CRM systems and marketing tools. This ensures a seamless connection to your existing sales and marketing strategies.
Overall, Digital Sales Rooms offer companies the opportunity to create immersive and personalized online shopping experiences that go beyond the traditional product catalog. This can lead to more effective customer engagement, increased revenue, and pave the way for the future of digital selling.
Crafting the DSR UI Kit
While developing the UI for the Digital Sales Rooms, we noticed that the interface differed significantly from our Shopware Admin UI Kit. Therefore, we decided to create a completely new kit, inheriting only certain elements such as colors and fonts from the Admin Kit.
Our goal was to create a modern and clean design that would meet the requirements of our customers. The new UI Kit was designed from the ground up with this vision in mind, and offers numerous customization options to ensure it meets the individual needs of our customers.
Accessibility was a key focus from the beginning. We made sure that the UI Kit was accessible from the start to ensure that all users, regardless of their individual abilities or limitations, have a smooth and enjoyable user experience.
UI components
We’ve created a number of UI components to support our needs and the needs of our customers. They include components such as: Buttons, Form inputs, The UI Frame (bottom toolbar, left and right sidebars, modals), Tooltips, Toasts, Empty states, Video overlays, Product boxes, Paginations, Pills, Product lists, Quantity selects, Status banners, Participant list items, Product image sliders, and more…
Typography
In DSR we also use the Inter font, just like in the Shopware Admin. This font is optimized for use in digital software interfaces. It contains all the necessary characters and offers flexibility with its variable width. We continue to use the T-shirt size naming system for font sizes because it is easy to understand and easy for developers to implement. We have deliberately limited ourselves to the essential sizes to ensure scalability.
Colors and Elevation
In Digital Sales Rooms, the colors are derived from the Shopware Admin palette. They are then adjusted one level down and tailored to the specific application purposes. It was deliberately decided not to use a complete token system in order to keep the extensibility for our end customers as simple as possible. In addition to the colors, various shadows are also defined for different elevation styles.
