Integrated Marketplace – SaaS platform

SaaS platform

Integrated Marketplace

MacBook Air


Franklin Energy’s marketplace is a platform that connects users with energy-efficient products and provides access to government incentives. It offers a wide range of high-quality products, valuable information on energy-saving practices, and streamlined installation arrangements with trusted contractors.

The goal

My goal is to create a new marketplace that implements a user-friendly site using the latest design system. This platform will serve as a Software-as-a-Service (SaaS) tool, providing utilities with a range of utilities-focused features and functionalities.

Challenge and approach

The primary challenge for designing a marketplace site SaaS is creating a seamless transition to the client’s style guide. To address this, the final UI should be properly linked to the external style guide, ensuring consistency with the client’s branding and visual identity. Additionally, since the project involves a diverse range of teams, including product and marketing, it is crucial to cater to the specific feature requirements of each department. To facilitate effective collaboration, scheduling regular design meetings and promptly addressing any questions or inquiries from stakeholders will be essential.

SaaS Model

Our marketplace-as-a-service offering not only promotes utility clients’ green energy incentives locally, but also provides high adaptability and customization. Clients can easily personalize the marketplace to match their branding guidelines, including customizing colors, typography, logos, buttons, headers, footers, and more.

Group 96

Design System

As our platform is built on a SaaS model, a centralized style guide facilitates quick and efficient customization and integration with clients’ specific style guidelines.

Screenshot 2023-04-30 at 10.36.37 PM

Wireframe Design

In collaboration with the product manager and marketing team, we utilized wireframe design to finalize the design requirements for the website. By working together and using wireframes, we were able to effectively communicate and visualize the different elements of the website, ensuring that all design requirements were met before moving forward with development.

image 5

As part of the website design process, I created a sitemap to help organize the content and make it easier for the product manager, marketing team, and engineers to navigate the website. By outlining the structure of the website and the relationships between different pages and sections, the sitemap ensures that all stakeholders have a clear understanding of the website’s layout and can easily find the information they need. This helps to streamline the development process and ensures that the website is user-friendly and easy to navigate for all users.

image 1

UI design

Home page


At the top fold of the page, users will find a global search function as well as a selection of energy-saving products. In addition, the website includes information on rebates, news about green energy incentives, and a learning section. This layout is designed to prioritize the most important features and content of the website, making it easy for users to find what they need and encouraging them to explore the available energy-saving products and resources.

Product landing page


The product page displays the user’s search results and offers a range of filters to help them choose the best option. In addition, the page includes a product comparison feature that allows users to compare different products side-by-side, helping them to make informed decisions about which energy-saving products to purchase. This layout is designed to provide a user-friendly and informative shopping experience, allowing users to easily find and compare products based on their individual needs and preferences.

Product details page

Product details

The pricing page displays the prices of products in full or with the available incentives. To encourage sales, a countdown timer is included on the page. In addition, the page provides detailed information on available incentives, installation options, and product descriptions, allowing users to make informed decisions about their purchases. This layout is designed to simplify the purchasing process for users, providing them with all the information they need in one place and encouraging them to take advantage of available incentives before they expire.

Installation schedule page

[NGAGE] Shopping cart
[NGAGE] Shopping cart
[NGAGE] Shopping cart
[NGAGE] Shopping cart

After choosing the installation option, users select a convenient date and time. They receive a separate link to choose local contractors and complete the checkout process, ensuring a seamless experience to schedule professional installation of energy-saving products at their preferred time.

Check out the