UNIBIC Microsite : DealBerg
The most recent project I worked on was designing a microsite for UNIBIC, aimed at showcasing their range of cookie hampers specifically tailored for corporate gifting. The target audience included businesses looking to order these hampers for their employees or clients.
Although the primary design system and UI components were initially created for DealBerg, we had anticipated the need for a dedicated microsite right from the start. So while building the design system and key pages—like product listings, checkout flows, cart interactions, and more—we ensured they were flexible enough to scale or adapt for future use cases like this. The microsite strikes a visual balance: it partially reflects DealBerg’s branding system while also capturing UNIBIC’s unique identity and aesthetic. This hybrid approach ensured design consistency while giving UNIBIC its own space to shine.
Iteration on the Design System
The UNIBIC microsite leverages the existing DealBerg design system with minimal adjustments. Key tweaks were made by adding two display tokens D6 and D7, incorporating a more playful font style aligned with UNIBIC’s brand personality. These subtle refinements ensured the design remained consistent while capturing the lighter, more approachable tone of the UNIBIC brand.
DealBerg
Design System
UNIBIC
Design System
Brainstorming & Ideation
During the ideation phase, it became clear that all products needed to be showcased on the homepage with clear categorization. Achieving this balance was challenging, but through multiple rounds of paper wireframes and iteration, I arrived at a layout that allowed for intuitive classification and equal visibility of all product categories.
During the brainstorming phase, the wireframes were rough, scribbly, and all over the place—but that was part of the process. Sketching freely helped me think through layout challenges, especially how to categorize and display all the products effectively on the homepage. The mess eventually led to clarity.
High Fidelity Designs of Homepage
Prototype
Building Design System for DealBerg
The most recent project I worked on was designing a microsite for UNIBIC, aimed at showcasing their range of cookie hampers specifically tailored for corporate gifting. The target audience included businesses looking to order these hampers for their employees or clients.
Although the primary design system and UI components were initially created for DealBerg, we had anticipated the need for a dedicated microsite right from the start. So while building the design system and key pages—like product listings, checkout flows, cart interactions, and more—we ensured they were flexible enough to scale or adapt for future use cases like this. The microsite strikes a visual balance: it partially reflects DealBerg’s branding system while also capturing UNIBIC’s unique identity and aesthetic. This hybrid approach ensured design consistency while giving UNIBIC its own space to shine.
Iteration on the Design System
The UNIBIC microsite leverages the existing DealBerg design system with minimal adjustments. Key tweaks were made by adding two display tokens D6 and D7, incorporating a more playful font style aligned with UNIBIC’s brand personality. These subtle refinements ensured the design remained consistent while capturing the lighter, more approachable tone of the UNIBIC brand.
Dealberg
Design
System
UNIBIC
Design
System
Brainstorming & Ideation
During the ideation phase, it became clear that all products needed to be showcased on the homepage with clear categorization. Achieving this balance was challenging, but through multiple rounds of paper wireframes and iteration, I arrived at a layout that allowed for intuitive classification and equal visibility of all product categories.
During the brainstorming phase, the wireframes were rough, scribbly, and all over the place—but that was part of the process. Sketching freely helped me think through layout challenges, especially how to categorize and display all the products effectively on the homepage. The mess eventually led to clarity.
High Fidelity Designs of Homepage
Prototype