CONTRACTOR
52Hz Website Conversion Flow
Restructure the product page's information architexture
About the project
52Hz offers B2B SaaS products that enable real-time monitoring and analysis of maritime operations and cargo flow to shipping, energy, and supply chain clients.
As the company rapidly grows and launches new products—including a brand new cargo flow dashboard—it needed a refreshed website to match its expanding offerings.
The project involved a full redesign of the 10–15-page website and the creation of a new landing page for the news and blog section. However, this case study will focus only on the landing pages.
Let’s get into it. 🎉
· · ·
Competitor Analysis
I started off by understanding the project's scope. After several meetings with the CEO and the product team, I got what the company was looking for and what the requirements were:
Update outdated content on the current website to ensure clarity and relevance.
Rebrand the site with a consistent visual style that strengthens its identity as a tech company.
To better understand design paradigms for product pages, I conducted competitor analysis by looking at direct competitors for industry standards, as well as leading B2B tech companies for best practices in clarity, structure, and navigation.
Competitor analysis (I did cleaned it up a little bit)
Usability Findings - New Problem Discovered
Besides competitor analysis, I also conducted heuristic evaluations of the current conversion flow and combined the results with user feedback. From this, I discovered a new problem: the main conversion flow for "Book a Demo" was incoherent and disconnected.
I can’t really see how the product introduction relates to our business.
The product seems interesting, but I couldn’t find a corresponding product detail page.
Product Discovery
Product Details
Conversion
The ‘book a demo’ user flow contains several friction points that disrupt task completion, including a lack of clear textual guidance and explicit CTA interactions to inform users of upcoming actions. In addition, while the product page has rich content, it lacks a solid information architecture.
Project Goals
· · ·
Style
Before the main redesign, I defined colors and text styles to ensure consistency. The current website’s visual style feels messy due to stock images and inconsistent colors. To reduce visual clutter, I narrowed the palette to two core colors and a series of support colors.
Atomic Tangerine
#FF964B
Dark Cerulean
#053F7D
Snow
#F9FDFF
Alice
Blue
#E5EEF5
Oxford
Blue
#081A2E
Dark
Gray
#474646
Medium
Gray
#888888
· · ·
Streamlining the Flow
Landing Page
I began with the landing page, which introduces all 52Hz products. An effective landing page should address users’ initial questions and build clarity, as this significantly improves conversion.
Before
After
I replaced the product overview carousel with a statement of the company’s core proposition. This section now communicates the essentials: the problem the company aims to solve, how their solution works, and their long-term vision. The change ensures users quickly grasp the company’s value and relevance before diving deeper into individual products.
The idea behine having a mesh gradient background is to direct viwers' attention to the product while making the hero section still visually engaging.
Before
After
I reduced friction in the conversion flow by adding a ‘Learn More’ CTA to each product listing, directing users to the corresponding product detail page.
Visitors usually arrive with a problem they want to solve. To address this, I restructured the product overview to help them quickly connect needs to solutions. The content is organized by product, with key features and use cases presented in short, scannable points. To make the information more concrete and straightforward, I added mockups of the actual product alongside the descriptions.
Liquid Bulk Cargo Flow Tracking and Forecasting Services
Real-time tracking and forecasting of bulk commodity imports (origin, destination port, type, quantity, etc.).
Real-time tracking and forecasting of petrochemical product exports.
Comprehensive tracking and forecasting of inland liquid bulk cargo flows, including terminals, berths, ports, docks, and anchorage positions.
Cargo Flow Dashboard
Track global cargo flows in real time with interactive dashboards. From vessel positions to cargo routes and voyage efficiency, get the insights you need to plan smarter and act faster.
Key Features
Real-time vessel monitoring
Global cargo flow analysis
Voyage efficiency insights
AI-powered data interpretation
Comparing the copy in the “products” section
I revised the subtitle by shifting the copy to be user-focused and benefit-driven. Instead of overwhelming visitors with technical detail, I used simple language, a short intro, and a scannable feature list to quickly show value and drive engagement.
· · ·
Product Detail Page
Before
After
Following the same approach as the landing page, I designed the layout to highlight the products and keep them at the center of attention. I ensured the page focused solely on the product, without any irrelevant information.
Before
After
Before
After
The dense blocks of text on dark backgrounds made the content heavy and difficult to scan. To fix this, I introduced a light background and a modular, card-like layout that makes each feature distinct.
Most viewers don’t read the page line by line. Therefore, instead of full interface mockups, I used zoomed-in feature highlights to improve scannability and better showcase the product.
I added a CTA button at the bottom of the page so viewers who miss the header CTA still have a clear action, keeping the conversion flow seamless.
Vessel Valuation
(Shipowners) Vessel Search, Market Valuation, Historical Transactions, Comparable Matching
(Investors) Dynamic Valuation, Comparative Analysis, Risk Alerts
Visualization (Valuation Trends, Transaction Hotspots, Vessel Type Market Comparison)
Precise Search & Smart Filters
Locate vessels by name, IMO, MMSI, or call sign, or filter by type, tonnage, and year built to quickly focus on target assets.
Real-Time Multi-Dimensional Valuation
Combines AIS data, past sales and market trends, continuously updated to reflect real market values.
Comparing the copy in the “features” section
The copy was content-rich but lacked a clear flow. I broke it down into sections with benefit-driven titles and aligned the flow with real use cases, making complex product features easier to digest.
Before
After
In the old website, pricing was listed directly within product detail pages, which distracted visitors and led them to compare costs before understanding the product’s value. To streamline the flow, I moved pricing to a dedicated page, allowing product pages to focus on communicating value and guiding users toward demo sign-ups.
· · ·
Signup Pop-up
At the end of the conversion flow is the signup form. While the original form included most essentials, it still needed optimization to better guide viewers toward the final conversion.
Before
After
I used a two-column layout to separate information from interaction, with context and reassurance on the left and the form on the right, making the interface clearer and more conversion-focused.
Please fill out the form and we will contact you as soon as possible.
Or call our customer service: Ms. Zhang 123-123-1234
Power your supply chain with intelligent data
Fill out the form to receive for free:
Trial Membership
Monthly Report (delivered by email)
Customer Support: 021-65380520
Or scan the code to connect with our support team.
Comparing the copy in the sign-up form
The original form offered little context, leaving users uncertain about its purpose. I also noticed that the company provides free trials and reports for new signups but didn’t mention this benefit. I rewrote the copy with a benefit-driven headline and supportive details, making it clear why users should complete the form and what value they would receive.
· · ·
Wrap Up
This project was a very rewarding experience for me. It allowed me to lead a project and be part of a cross-functional team. Here’s what I learned:
Good design starts long before pixels. Research and analysis are essential to understand both users and the product before any design begins. Even in a website project, a designer’s role goes beyond visuals. It’s about seeing the bigger business picture and shaping how design contributes to it.
Embrace iteration and uncertainty. Requirements and technical feasibility often change quickly, so it’s crucial to stay aligned with stakeholders. Keeping track of your thought process and building a solid foundation makes it easier to iterate swiftly and with clarity.
Thank you for reading! 🙂