Books, art & collectibles
MinaLima.
E-commerce and product personalisation
An online shop for MinaLima’s illustrated books, prints and collectibles. The project includes product page updates, configurable book orders and the connection between product options, the basket and checkout.
- Project
- Online shop
- Coverage
- Product pages / Personalisation / Checkout
01 / Overview
About MinaLima
MinaLima is the graphic design studio behind the visual world of the Harry Potter films. Its own collections include illustrated editions of classic books, art prints and stationery, sold online and through House of MinaLima.
The shop brings together different kinds of products: a print may have several finishes, while a book may be available in different languages and with a choice of bookplate. Those differences affect the images, price and information shown on each page.
Key requirement
Book personalisation
Choosing a personalised book involves several decisions: language, bookplate and message. The challenge is to make those steps feel simple and keep every choice attached to the right book.
02 / The website
Updating the product pages
The product pages evolved to bring photography, descriptions and buying options closer together. Later updates added guided book choices, personal messages and accompanying products.
The purchase module also had to distinguish available products, pre-orders, sold-out items and products temporarily out of stock. The same product information needed to stay consistent across catalogue listings and individual pages.
06 / Screens
Catalogue to product page
The Books view shows collection filters, sorting, cover images and prices. The collection opening introduces a particular range; the product view then combines photography with language and bookplate choices. These are different parts of the same purchase journey, each with its own amount of information.
Shown: books catalogue, collection opening and product page
07 / Collection navigation
A different way
to explore.
Illustrated medallions turn a set of collection links into an interactive wheel. Each one carries the visual character of the world it opens.
Drag to move through the collections, or select a neighbouring medallion to bring it to the centre. Inertia gives the movement weight; the gentle settling motion makes the next choice clear.
The central image grows as the others recede, keeping a clear focus while showing what is available on either side.
08 / Product carousel
A closer look
before choosing.
The product carousel brings several views of a book into one place, from its cover to the details inside. The position indicators make it clear that there is more to see.
Alongside the images, language and bookplate options give each choice its own space. The visitor can explore the object and select the edition they want within the same page.
09 / The illustrated compass
A world that
opens up.
Six illustrated segments open together like a camera aperture, revealing the artwork beneath. The centre and gold frame stay still while the image changes around them.
Move over the compass to open it, then move away to close it. The same mechanism runs in reverse, keeping the movement connected to the illustration.
Explore MinaLima (opens in a new tab)
In this project
Order details
- Edition
- Selected book language
- Bookplate
- Illustrated, signed or personalised
- Message
- Attached to the individual book
10 / Project detail
From basket to order
A personal message belongs to one particular book. Keeping that relationship clear through the basket and checkout matters especially when someone orders several copies, each with its own dedication.
The project also includes administrator controls for linking add-ons and managing their image, title and description. This connects the shopping interface with the information required to prepare an order.
Visit MinaLima (opens in a new tab)Artwood
A website for bespoke timber surfaces
Explore the project
Contact
Discuss your website
Tell us about your organisation, the pages or functions you need, and your timeframe.
Start a project