Redesigning the Product Detail Page for Midocean.com

Opdrachtgever:

Solo Midocean

Type:

Product detail page

For Midocean, one of Europe’s leading suppliers of promotional products, I redesigned the Product Detail Page (PDP). The challenge was to create one flexible product page that works for both customers ordering unprinted products and those customising printed products. My focus was on simplifying the user flow, making pricing and delivery information transparent, and integrating the personalisation tool directly into the PDP.

Research & Problem Definition

The main reason for this project was Midocean’s wish for a completely new and modern design of the product configurator within the Product Detail Page. The old design felt outdated and didn’t match their ambition for a more contemporary and user-friendly platform. As we moved forward, additional insights came up during several iterations and user sessions. For example, customers found the call-to-action “Calculate my price” confusing if they only wanted unprinted products, and B2B clients asked for clearer price breakdowns showing buying versus selling price. Delivery information also turned out to be too generic, and stock indicators were sometimes unclear when showing very large numbers. These findings, discovered step by step, confirmed the importance of not only refreshing the look and feel but also improving the PDP’s functionality and clarity.

Stakeholder Alignment

After defining the need for a redesign, a big part of the process was aligning with different stakeholders at Midocean. The PDP touches many areas of their business, from sales to operations, so requirements and expectations varied widely. This meant going back and forth a lot: discussing priorities, reviewing early concepts, and adjusting details based on feedback. Although it was sometimes challenging to balance all perspectives, this close collaboration helped us refine the direction step by step. In the end, it led to a well-thought-out first version of the new PDP design, ready for user testing.

Working towards the MVP

After we finished stakeholder alignment, the next phase was about turning that shared vision into something concrete, the MVP. I started sketching wireframes based on what stakeholders had said during alignment. These wireframes were simple at first: just rough layouts, focusing on the main screens like product details, printing options, delivery info.

I shared these early drafts with stakeholders and we went back and forth a lot. They gave feedback: what works, what feels confusing, what might need simplifying. For example, we realized that some users didn’t understand “Calculate my price” when ordering unprinted products. So I made changes: refined wording, rearranged elements, removed unnecessary steps.

Then I built multiple wireframe versions. One focused on clarity, another tried to speed up the flow into the print configurator, another emphasized showing all pricing options clearly for B2B. Each version had trade-offs. Presenting them helped the stakeholders see what they preferred and what would bring the most value for users.

Once we chose a direction, I created a clickable prototype covering the core user journey: from viewing a product, checking stock and delivery, to starting the print customization. During this, I kept an eye on complexity, making sure we were doing enough to test properly, but not over-building features beyond the MVP.

At the end of this phase, we had a validated prototype that included all essential screens and flows. It was ready for the next step: user testing with real Midocean users, to see how well the MVP works in practice.

Iteration & User Testing

After delivering the first version of the redesigned PDP, we entered an iterative phase. Together with the team, I tested the new design with five Midocean users. Their feedback confirmed that the page looked cleaner, more modern, and easier to read. At the same time, the sessions revealed several areas for improvement.

Users wanted stock information to be shown immediately per colour and size, including future availability dates, and they expected essential details like size charts, delivery times, and packaging to be accessible without extra clicks. On pricing, they asked for quick-reference tables with bulk quantities and region-specific shipping estimates, since this information is crucial for B2B clients.

In the print configurator, the overall logic was clear, but the flow felt too slow. Users preferred fewer steps, a direct link into the design tool, and a horizontal layout for selecting print positions. Finally, the “Save & share” functionality was rarely used in its current form and would need rethinking to fit existing reseller workflows.

These insights allowed us to refine the PDP beyond its new look and feel, making it more intuitive, faster, and better aligned with the day-to-day needs of Midocean’s customers.

The outcome

The redesign of the Product Detail Page delivered much more than just a visual update. The new PDP offers a clean, modern look that better matches Midocean’s ambition and provides a smoother experience for both printed and unprinted product orders.

Key product information is now available at a glance: stock per colour and size, size charts, delivery times, and packaging details are all directly accessible. The pricing section was restructured to show a clear buying price, resale suggestions, and bulk price tables, while also making room for shipping estimates. This transparency was especially valuable for international and B2B clients.

The print configurator was simplified into a more direct flow, allowing users to jump into the design tool faster and navigate more intuitively. Although features like “Save & share” still need refinement, the foundation is set for a more integrated approach in future iterations.

Overall, the result is a PDP that feels modern, intuitive, and aligned with Midocean’s brand. It combines a fresh design with practical improvements uncovered through user testing — ultimately making it easier for customers to configure, understand, and order products with confidence.

Let's grab a coffee!?

Looking for a collaboration or just want to get to know each other? Contact me below and let's schedule a (virtual) coffee meeting!