Zum Hauptinhalt springen

Archives

Categories

UX/UI Design

shopvarics GUI

During my time at ISCOPE, I worked extensively on their proprietary GUI, which connects the product management software advarics with the Shopware shop system and automatically synchronizes products. My responsibilities included redesigning the existing system, optimizing the user flow, and expanding the GUI with new features. At the end of the project, I thoroughly tested the GUI and reviewed all functions to ensure they worked correctly and met user requirements.

Structural redesign of the shopvarics GUI

As part of the redesign process, I created a prototype in Figma to guide the improvements and ensure consistency across all elements without completely changing the existing layout.

When I took over the GUI, it required targeted adjustments, as it had initially been assembled solely by developers without a consistent design approach. I meticulously reviewed and adjusted spacing and alignment, developed a cohesive color scheme for buttons and other interface elements, and designed consistent form fields—such as inputs and dropdowns—covering all necessary states like disabled, enabled, and visited. These improvements helped create a more intuitive and user-friendly experience, while preserving the original layout’s structure.

I then refined the table logic to ensure it was accessible and usable on smaller screens, significantly improving the overall responsiveness and usability.

Adding new features to the GUI

New features were developed to enhance the GUI. For example, a Size Tables Plugin was implemented, allowing customers to create and manage their own size tables for their online shop directly through the GUI. Another feature was a Translation Plugin, which enables customers to translate their product descriptions easily using ChatGPT and adjust them as needed within the GUI.

Initially, the ideal user flow was carefully planned and tested. Wireframes were then created and adapted to the existing design system. Finally, everything was thoroughly tested and documented before being handed over to the development team for implementation.

Comprehensive quality assurance for the interface

Finally, I conducted an extensive quality assurance round to ensure that the redesigned GUI met all functional and design requirements. This involved systematically checking all buttons, links, and user interactions to ensure they worked as expected. I also thoroughly tested key functionalities, such as product synchronization, order processing, and other critical workflows.

In addition, I carefully reviewed all implemented changes to verify that they matched the planned adjustments and design specifications. Throughout the process, I documented every issue and potential improvement in a Trello board, following the Kanban methodology to prioritize and assign tasks efficiently to the development team for resolution.

Take a Look at the shopvarics GUI in figma