GoodBarber's Extensions Store Design

GoodBarber's Extensions Store interface

As part of a broader strategy to enhance the user experience on the GooodBarber portal, the company decided to refresh the "Add-on Catalog" into an entirely new concept: the "Extension Store." This redesign aimed to provide a more intuitive, engaging way to present features for app creation. The goal was to create a unified and user-friendly interface that would make it easier for users to explore, select, and manage extensions for their apps.

I was involved in designing several key pages and features to support this transition, including the Homepage ("All Extensions"), Collection and Category pages, UI Templates for extension presentation pages, the search page behaviors, and the settings pages in the back-office for managing installed extensions.

Additionally, I worked on developing branding elements to highlight the new marketplace feel of the Extension Store.

Transitioning the Catalog: The challenge was to transform the "Add-on Catalog" into a more modern, feature-rich "Extension Store," providing an engaging, e-commerce-like experience for users looking to enhance their apps.

Page Design Complexity: There were several types of pages that needed to be designed, each with different functionalities—ranging from extension collection and category pages to search page behaviors and settings for managing installed extensions.

Branding the Marketplace: The new Extension Store required a fresh branding approach to emphasize its marketplace feel and distinguish it from the rest of the GooodBarber portal.

User Engagement and Navigation: The new layout needed to guide users seamlessly through the browsing and selection process, making it easy to discover extensions and understand how they could enhance their app.

The old Add-on Catalog felt outdated and lacked an engaging, intuitive browsing experience.

The process of managing installed extensions was not clearly defined, with users finding it difficult to activate, deactivate, or delete extensions.

The lack of a marketplace-like branding made it harder for users to see the value and potential of the extensions on offer.

Marketplace Branding: The Extension Store required fresh branding to differentiate it from other sections of the GooodBarber portal.

Visual Consistency: Throughout the design, we maintained visual consistency with GooodBarber’s existing branding, ensuring that the Extension Store felt like a natural extension of the overall portal, while also standing out as a key feature.

Interactive UI Elements: Special attention was given to interactive elements like buttons, hover states, and card layouts for extension previews. These elements were designed to be visually engaging and provide clear feedback to users as they navigated the store.

Increased Engagement: User engagement within the Extension Store increased significantly, with more users interacting with extensions and spending longer periods browsing.

Improved Extension Management: The new settings pages for managing extensions were much easier to navigate, leading to improved user satisfaction in the back-office.

Enhanced Marketplace Feel: The new branding and layout successfully created a marketplace-like experience, with users appreciating the more visually engaging and intuitive browsing process.