Naar hoofdinhoud
BTNG

Creating Spaces that Matter with Plantinum Ecommerce

Philip Wallage · E-commerce design · 2024

Creating Spaces that Matter with Plantinum Ecommerce

I had the pleasure of leading the design overhaul for Plantinum, a renowned Dutch ecommerce company specializing in creating spaces that matter.

This project was a collaborative effort involving a front-end developer, a back-end developer, and myself, where I took charge of all design-related aspects. The goal was to transform Plantinum’s online presence into a user-friendly website that reflects their brand.

people: designer, front-end developer, back-end developer
3
checkout versions, for an A/B test
2
404s at launch, thanks to redirects
0
series, Colourful and Natural, each with its own menu
2

Figma · UX Design

The case in 24 seconds. Sound is off until you turn it on.

Project challenges

Plantinum faced several challenges with their existing website:

  1. Outdated design: The old website did not reflect the modern and innovative spirit of Plantinum.
  2. Content organization: The existing content was not well-structured, leading to poor navigation and user experience.
  3. Mobile responsiveness: The site lacked a smooth mobile experience, which is crucial for today’s ecommerce platforms.

Design approach

To address these challenges, my design approach for Plantinum focused on three key areas:

  1. Visual overhaul: The new design needed to be modern, clean, and reflective of Plantinum’s brand. Using the UntitledUI Design System as a starting point allowed me to quickly establish a solid design foundation, enabling me to focus on creative and branding elements.
  2. Content reorganization: I replanned all existing content, including implementing redirects to avoid 404 errors. This ensured a smooth transition to the new site without losing valuable SEO rankings or user trust.
  3. Mobile and desktop wireframes: I created detailed wireframes for both desktop and mobile versions to ensure a consistent and responsive design across all devices.
Plantinum homepage in a browser: a dark green page with the headline Samen ontwerpen we ruimtes die er toe doen, buttons for the Colourful and Natural series, and a row of photos of planters in offices
Homepage. The Colourful and Natural series up front, under the headline.

Design system

  1. Leveraged the UntitledUI Design System for rapid development of basic elements.
  2. Focused on beautiful typography and cohesive branding elements to enhance visual appeal.
Boards of Plantinum components: buttons in every state, input fields, badges, alerts and an account menu
Components. Buttons, fields, badges, alerts and menus, starting from UntitledUI.
A wall of Plantinum content blocks: popular products, collection heroes for the colourful and natural series, material and inspiration sections, quotes and a block on circular products
Content blocks. Products, collections, materials, inspiration and sustainability.

Sitemap and content planning

  1. Reorganized content to improve navigation and user experience.
  2. Implemented redirects to maintain SEO integrity and avoid 404 errors.
The Colourful menu open on the homepage: Colourful serie, colours, inspiration, collections, brochures and products, next to links for products, brochures, inspiration, sustainability, updates and contact
Navigation. Each series opens its own menu: colours, inspiration, collections, brochures and products.
Collections page of the Colourful series: a breadcrumb, the headline Ontdek onze unieke collecties die je interieur tot leven brengen, buttons to view products and download brochures, and a photo of plants in an office
Collections. A page per series, with routes to the products and the brochures.

Wireframes and UI design

  1. Developed wireframes for both desktop and mobile to ensure responsive design.
  2. Created a comprehensive design system, including typography, colors, and UI elements.
Three phones: the homepage with the two series, the product overview with a filter button and a Colourful chip, and the product page for the Prestige Plus Square planter
Mobile. Homepage, product overview and product page.

Screen designs

Product pages

Enhanced product pages with a focus on clarity and aesthetics.

Product page for the Prestige Plus Square planter: a large product photo with a Made in Europe label, product properties, selects for size, finish and options, and RAL colour swatches
Product page. Size, finish, options and RAL colour on one page.
Two phones with the same product page: the product name, the planter photo, a row of photos in rooms and a button to download high-res images
Product page on a phone.

Updates overview page

Designed an engaging updates page with a prominent call-to-action footer.

An update about the Colourful series, Colourful: maximaal circulair, minimaal in CO2 footprint, with an intro and a wide photo of a forest with a Made in Europe label
Updates. An article with a wide photo under the headline.

Series page

Developed a compelling hero section for series pages to highlight key products.

Colourful series page: the headline Ontdek de pracht van Colourful kleurrijke materialen, buttons to view products and download brochures, and a row of photos of planters in rooms
Series page. The Colourful hero, with routes to the products and the brochures.
Inspiration page of the Colourful series: the headline Laat je inspireren in deze kleurrijke wereld, a switch between Colorful and Natural, and photos of bowls and planters on tables and in rooms
Inspiration. Rooms with the planters in them, one switch between the two series.

Checkout experience

Created two versions of the checkout process for A/B testing to determine the most effective design.

Three phones: the product overview, the cart with two Prestige Rectangular planters and a free shipping note, and the checkout form with the order total on top
Checkout on a phone. Product overview, cart and the order form.

Impact and results

The redesign of Plantinum’s website resulted in several significant improvements:

  • Modernized visuals: The new design brought a fresh, modern look to the website, aligning with Plantinum’s brand identity.
  • Improved user experience: Reorganized content and improved navigation led to a more intuitive user experience.
  • Enhanced mobile responsiveness: The website now offers a smooth experience across all devices, catering to the growing number of mobile users.
  • Better engagement: Early feedback indicated that users found the new design more engaging and easier to use, leading to higher customer satisfaction.

What this shows

A redesign is also a move. I replanned the content and set up redirects, so the new site started without 404s.

Starting from UntitledUI took care of the basic elements, which left the time for typography and the brand. And the checkout got two versions, so an A/B test can decide between them.

Wil je zulke resultaten voor je webshop?

Maak een afspraak

Terug naar cases