Suger Website Design

Team: Product & Marketing Team

Role: Product Designer

Time: 2024.10 - 2024.11

Process: Request Collection, Visual design, Project hand-off, Project launch

Challenge

How to make sure Suger’s official website clearly convey company’s uniqueness and core features at the first glance?

Context

Before I joined Suger, the company did not have a dedicated design function, and as a result, the website lacked a cohesive brand and marketing strategy. Much of the content on Suger’s official website was outdated, and the supporting visuals were limited in effectiveness.

As my first project at Suger, I led the development of a new visual system for the official website and collaborated closely with the product marketing manager to design and launch a refreshed version of the site.

Wiz website homepage promoting cloud security platform with an illustration of hands holding a cloud and a smartphone, and logos of companies like Salesforce, Morgan Stanley, Siemens, Fox, Colgate-Palmolive, IHG, Mars, BMW, Priceline, and Slack.
Stripe website page showcasing global payment solutions with a focus on accepting payments online and round the world. The page features a product called Powder, which costs ¥7,788, and includes a form for entering shipping information and payment details. The design uses purple buttons, blue gradients, and a clean layout with navigation links for Products, Solutions, Developers, Resources, and Pricing.

Inspirations from other companies…

A webpage for Mux Video showing a section with the text "Your player, built with Mux" and a purple button labeled "Start Building." There is an overlapping image of a tea cup on a table, with coffee or tea being poured from a glass pot into the cup, and a slice of cake on a plate nearby.
Screenshot of the homepage of a payments platform called Bridge, a stripe company. The page features a large headline 'Make money move,' a subheading describing the platform built with stablecoins, and a blue button labeled 'Let's Chat.' The top navigation includes links for Products, Solutions, Company, Blog, and a button for a free demo. The bottom area shows a flow diagram of different cryptocurrencies and fiat currencies.

Project Scope

After aligning with the Product Marketing Manager, I defined the top priorities for the redesign to better showcase and promote Suger’s products:

  1. Homepage visual - Establish a strong first impression and provide a clear overview of Suger’s primary product offering.

  2. Core Features Concept Visual - Create three high-level visuals to represent Suger’s core features: Marketplace, Co-sell/Resell, and Metering.

  3. Core Features Product Visual - Design more detailed visuals to further explain each core feature and reinforce their value through concrete product representation.

New design

Screenshot of a financial dashboard displaying various charts, graphs, and metrics related to sales, revenue, inquiries, referrals, and product listings, with navigation menu on the left.

I started the design process from general to specific - starting with the homepage visual to concept visuals and finally to product visuals. By doing so, I was also gradually learning the product features myself.

Homepage Visual

A digital dashboard displaying marketplace revenue of $328,240 with a line graph showing monthly data from January to December, and options for customized prices and flexible offers related to cloud services, AWS, and Azure.

Marketplace

A digital bar chart with multiple colored bars displayed on a white background. Surrounding the chart are floating logos for Suger, HubSpot, Salesforce, and a cloud icon.

Cosell/Resell

Computer screen showing a dashboard interface for creating and listing products on a marketplace, with options to select the cloud marketplace, add product details, and create a new listing.

Product Listing

A digital dashboard displaying billing information, including statuses of pending and completed invoices, amounts, issuing dates, and usage metrics with bar graphs and line charts.

Metering

Screenshot of a web application interface showing sections for managing co-sell opportunities, with options to add new partners from cloud platforms like AWS, Azure, Google Cloud, and partners like Salesforce and Hubspot. The interface includes details such as interview status, creation time, last update, and actions, along with buttons to save or discard changes.

Cosell & CRM

Visuals with Content

Screenshot of a SaaS platform homepage showing financial analytics, charts, and customer testimonials.

The designs and visuals went through several rounds of iterations after CEO, CTO and PMM’s review. Eventually we collected all the visuals and add new content in the website. Suger’s official website is hosted on hubspot with some constraints on the website layout, so we made some trials and launch the new version of the new website.

Screenshot of Suger cloud marketplace platform webpage featuring cloud marketplace management tools, product listing interface, and FAQs.
Screenshot of Suger website homepage showing sections on co-sell and resell processes, features, platform interface, differentiation, and FAQ.

Launch and impact

The new website was launched in November 2024. Even though throughout the year some content has been changed, the visuals are still kept in place. The visuals along with the content played a great role attracting new customers which led to more sales calls and revenue generation. As a comparison from October 2024 to October 2025:

166.0% Active user increase to 44K

164.0% Event count to 364K

1.17B -> 3.86B Cumulative Commit with Suger