Live shopping like never before.
Voggt is a live shopping app with a straightforward concept: sellers showcase products during live streams, and users can bid and purchase within seconds. The platform offers a variety of items, including sneakers, trading cards, action figures, comics, manga, retro gaming, art, and vinyl records.
Originally focused on Pokemon cards, Voggt has recently expanded to include a wider range of products to appeal to diverse customer types. We've partnered with Voggt to enhance their web app experience, ensuring it looks premium and consistent for all audiences.
Homepage
The primary goal was to provide distinct experiences for connected and non-connected users, as previously both groups shared the same homepage. We designed a more intuitive homepage with guided navigation and banners to help non-connected users find their way. For connected users, we created a customized homepage tailored to their preferences. Instead of being overwhelmed by numerous live shows and items, the new homepage offers different pathways based on user status.
![](https://archi-617880101.imgix.net/f/243597/5535x3960/9f592339a3/voggt-home-dark.png?auto=format&w=3840)
![](https://archi-617880101.imgix.net/f/243597/5535x3960/bbb959a14f/voggt-home-light.png?auto=format&w=3840)
Product Page
Our work on the product page focused on reorganizing information and simplifying the display. A key challenge on Voggt is that users control what they publish, leading to some listings lacking images or having minimal text, resulting in empty and unappealing pages. This inconsistency makes it difficult for Voggt to maintain a premium user interface. We restructured the page to use a uniform template, ensuring a consistent and appealing layout regardless of whether a product has a detailed description, images, or numerous characteristics.
![](https://archi-617880101.imgix.net/f/243597/5535x3960/1d4381c6ad/voggt-product-page-dark.png?auto=format&w=3840)
![](https://archi-617880101.imgix.net/f/243597/5535x3960/fe8a8f0386/voggt-product-page-light.png?auto=format&w=3840)
![](https://archi-617880101.imgix.net/f/243597/5535x3960/db42644197/voggt-product-page-mobile-dark.png?auto=format&w=3840)
![](https://archi-617880101.imgix.net/f/243597/5535x3960/87f913b82a/voggt-product-page-mobile-light.png?auto=format&w=3840)
Seller page
We encountered a similar challenge on the Seller page, where sellers with no sold items, no banner, or no available items ended up with empty pages. Additionally, all profile data were presented at the same level of hierarchy, making the content difficult to scan. To address this, we restructured the profile information, allowing us to better highlight items and live shows. This redesign ensures a more engaging and visually appealing Seller page, even for less active sellers.
![](https://archi-617880101.imgix.net/f/243597/5535x3960/0791a6c1dd/voggt-seller-page-dark.png?auto=format&w=3840)
![](https://archi-617880101.imgix.net/f/243597/5535x3960/31e2467d3c/voggt-seller-page-light.png?auto=format&w=3840)
Pre-Show and Show page
To improve the preshow screen, we first reviewed the information architecture to ensure clarity and ease of navigation for users. Splitting the screen into three distinct sections -products, live streaming, and chat- emphasize the bid system and enhance user engagement by clearly delineating different interactive elements. Additionally, updating and refining the articles miniatures provide users with quick, visually appealing information and strengthens overall coherence.
![](https://archi-617880101.imgix.net/f/243597/5535x3960/75b32e2a91/voggt-show-page-dark.png?auto=format&w=3840)
![](https://archi-617880101.imgix.net/f/243597/5535x3960/42ba133658/voggt-show-page-light.png?auto=format&w=3840)
![](https://archi-617880101.imgix.net/f/243597/5535x3960/a1fcdc1a0e/voggt-show-page-mobile-dark.png?auto=format&w=3840)
![](https://archi-617880101.imgix.net/f/243597/5535x3960/7e665e2c4f/voggt-show-page-mobile-light.png?auto=format&w=3840)
Design System - Badges Rework
To elevate Voggt to a more premium standard, our primary task was to establish consistency throughout the product. We achieved this by creating a straightforward Design System divided into two parts: foundations and UI Kit. The foundations include font styles, a color library, and cohesive icons. The UI Kit encompasses core components like buttons, inputs, or tabs. This Design System enabled us to reuse the same styles and components across all screens, automatically ensuring visual coherence. Additionally, we incorporated animations and interactive states to enhance user engagement and make interactions feel more dynamic and responsive.
We also completely revamped the badges used on the platform. Users earn badges by completing achievements such as a specific number of sales or live streaming hours, with rankings from bronze to platinum based on difficulty. Top sellers on Voggt receive also special badges. The previous badge designs lacked consistency, so we redesigned them to be more premium, ensuring a clear distinction between types and difficulty levels.
![](https://archi-617880101.imgix.net/f/243597/5535x3960/5a54f8dffe/voggt-design-system-dark.png?auto=format&w=3840)
![](https://archi-617880101.imgix.net/f/243597/5535x3960/a366f12dbf/voggt-design-system-light.png?auto=format&w=3840)