CRANIO CREATIONS' E-COMMERCE

[ Personal Project ]

About

This personal project is a redesign of the e-commerce experience for Cranio Creations, created to explore how AI-assisted workflows can support the design of complex digital interfaces. Built with Figma Make, the project focuses on improving usability, navigation, and product discovery, while giving the brand’s playful identity a more modern twist.

The challenge

Cranio Creations has a broad catalogue of board games, accessories and related products. The existing e-commerce experience (as of April 2026) combines shopping, editorial content and promotional communication, creating an experience where the products themselves can sometimes get lost. Rather than trying to redesign every part of the website, I focused on one question: How could the experience make it easier for someone to discover a game, understand whether it's right for them, and ultimately decide to buy it? This led me to focus on three areas:

[1] Navigation: Make the structure of the shop easier to understand and reduce the effort required to reach the catalogue.

[2] Product discovery: Give users clearer ways to browse, filter and explore the available games.

[3] Product evaluation: Present the information people need to understand a game without overwhelming the product page.

E-commerce homepage. Every non-sales content was scrapped except the loyalty program.

From content-first to product-first

The redesign is based on a relatively simple principle: when someone enters an e-commerce experience, the products should be immediately accessible.
Before, the experience mixed different types of content and destinations within the primary navigation (The homepage had to serve several purposes simultaneously: communication, editorial content, promotions and commerce). The redesigned homepage establishes a clearer hierarchy, bringing products and the main shopping actions closer to the foreground.

Detail of the main interactions over the products.

Key UX decisions

Make discovery the primary interaction

The catalogue is one of the most important parts of an e-commerce experience, so I wanted users to be able to start exploring without first understanding the company's content structure.
The redesign gives the catalogue a more prominent position and makes browsing feel like the natural starting point for shopping.

Reduce cognitive load

A product page can contain a lot of information: player count, duration, age, description, mechanics, components, images, videos and related products.
Instead of presenting everything with equal visual weight, I created a hierarchy around the questions a potential buyer is most likely to have:
"What is it?" "Is it for me?" "What does it contain?" "What else should I know?"
This allows supporting information to remain available without competing with the main purchase decision.

Create a stronger visual hierarchy

The visual redesign isn't intended to simply make the website "look nicer".
I used typography, spacing, grouping and component hierarchy to establish clearer relationships between information.
The objective was to make the interface easier to scan — particularly in situations where users might compare multiple products.

Full products catalog.
Product page example.

A retrospective

This project reinforced something I find increasingly important in product design:
A good interface isn't necessarily the one with the most features. It's the one that makes the important decisions easier.
For this redesign, much of the work was therefore about reducing competition between different types of content and establishing a clearer hierarchy around the shopping journey.

This was a self-initiated redesign, so the next step would be validation rather than further visual refinement. With access to real users and analytics, I'd want to test questions such as:

The prototype represents a design hypothesis, not a proven solution. The next step would be to put those hypotheses in front of users and see where they hold up.