Case Study: How flaconi covers UI testing with Widgetbook
flaconi has been the leading German e-commerce shop for fragrances and beauty products for the past years. Reaching their customers via webshop and mobile app comes with interesting design challenges. At the heart of flaconi’s design prowess lies Figma and the Style Dictionary API, enabling them to propagate design excellence throughout the company. Design tokens serve as the foundational elements for colors, fonts, and more, forming the backbone of their design system. From this foundation, they craft components for web, mobile, and also marketing material. Leveraging Storybook for the web and Widgetbook for mobile ensures that all components are accessible for designers and developers. A clear commitment to developing mobile applications with Flutter ensures efficiency gains as a single code base can be used to develop for Android and IOs.
Widgetbook fits perfectly into this tech stack as a Flutter first tool. Before Widgetbook became part of flaconis development workflow, flaconi encountered potential for optimization in their internal processes related to testing and presenting UI components. Despite having a design system in place, the absence of a dedicated tool posed difficulties in ensuring the seamless functionality of basic elements, such as buttons in their mobile app. Prior to Widgetbook, flaconi’s designers had to navigate a complex process of manually testing components, relying on hardware and test apps. This not only consumed a significant amount of time but also presented difficulties in ensuring the consistent performance of elements across various screen orientations and text scales. The absence of a unified tool added complexity to the review process, necessitating extensive coordination between designers and developers. Widgetbook emerged as a solution, streamlining flaconi’s UI design and testing procedures, ultimately enhancing their workflow efficiency.
Widgetbook aligns Developers and Designers
Let’s delve deeper into how Widgetbook has not only streamlined the exchange of information but also elevated the entire process of showcasing and testing components for flaconi. Despite already having a robust design system in place, flaconi recognized opportunities for optimizing the testing and presentation of UI components within their mobile app team. The introduction of Widgetbook offered a refined solution, allowing flaconi’s product team to effortlessly isolate and test fundamental components, such as buttons, across diverse scenarios — from various screen orientations to different text scales. Widgetbook plays its role in eliminating the need for separate builds, significantly boosting the efficiency of UI element testing. The tool is especially valuable in addressing accessibility scenarios, showcasing its broader impact on enhancing overall design and testing processes at flaconi.
Imagine this scenario: an app is to be translated and the UI must be able to function not only with a Latin alphabet but also with Arabic characters. Widgetbook empowers designers and QA testers to explore various cases seamlessly, bypassing traditional hurdles like creating test apps or constantly adjusting phone settings. This marks a paradigm shift, ensuring components exhibit the desired behavior without unexpected glitches, ultimately contributing to a smoother and more effective design and testing experience for flaconi.
Ensure Accessibility
flaconi’s commitment to ensuring accessibility in their app takes a significant stride forward with the integration of Widgetbook into their testing processes. As part of the many ways to test UI with Widgetbook. It is possible to create scenarios in which you test your UI components for accessibility in a dedicated way. flaconi’s product team uses the Widgetbook dashboard to thoroughly test components under diverse conditions. This includes evaluating how the UI elements respond to changes in text scale and ensuring optimal functionality for users with disabilities. The platform’s user-friendly interface allows designers to simulate settings directly from the Widgetbook dashboard, eliminating the need for complex, manual testing procedures. This makes the tedious clicking around in the test app settings to display different accessibility settings obsolete and saves time and nerves.
“At flaconi, Widgetbook is our go-to for testing mobile UI design. It’s changed the game, allowing us to showcase and test components effortlessly. No need for dedicated builds — Widgetbook simplifies testing scale factors and ensures accessibility with unparalleled ease.” — Mohammed Almissbah (Senior Mobile Engineer at flaconi)
We encourage others to explore Widgetbook’s transformative capabilities in streamlining collaboration and ensuring a user-friendly experience. Embrace the future of UI design with Widgetbook. Big thanks to Mohammed Almissbah and flaconi for sharing their invaluable insights, driving positive change in digital design.
