MEUBLL, our first Front-Commerce’s Custom Theme – Part 1

By 5 June 2018 March 29th, 2019 News

MEUBLL, our first Front-Commerce’s Custom Theme – Part 1

By GRENIER Johanny - Publish on May 28, 2018

Develop an idea, create value, stay inspired

The main goal behind our custom themes is simple: show that Front-Commerce can do everything an actual ecommerce platform propose, but better, faster and easier and combine with a smooth user experience and an attractive design. Hard task in perspective!

In order to be more relevant, faster and able to deal with several topics in a short time, we’ve chosen to work as follows: each theme will highlight one precise and relevant feature, and only one. Working like that allows us to propose more themes and more features while significantly reducing the development time (few pages to design, only the useful ones for the related feature).

First theme, first feature

The first track we’ve chosen to explore is the possibility to buy grouped products.

If you want to buy one and only one product, you just have to visit the related page and then add the product to your cart. Nothing to hard. However, if you’re interested in several products (you think they combine well and want to buy them at the same time), the process suddenly gets harder and repetitive. You need to individually go on each product page, add them to your cart while remembering which one you’ve already added or not. Not really practical, isn’t it?

Started with this statement, we’ve decided to iterate on the subject, trying to answer the following question: how could we make the buying of grouped products easier while making the process smooth and intuitive ? 

After a benchmarking of the market competition, searching for good practices and ideas to be inspired of, we started to work on the following feature: products collections.

In order to customize this feature with relevant content, we choose the house furniture’s theme. Which one of us doesn’t want to easily create the perfect room? 🙂

Next step: define how the feature will work. Here are some ideas our team proposed, which we developed one by one then test with users in order to validate them or not.

A - Create an alternative navigation

When you talk about “products collections”, you necessarily need a custom navigation process for it. Actually, a “classic” navigation doesn’t allow users to access grouped products, or only on specific occasion (lookbook for example).

Moreover, surfing from a product to another, then remember which one you’ve already seen quickly become a puzzle for the user. You need to avoid that.

We’ve decided to create a “by collection” navigation. Nous avons donc décidé de mettre en place une navigation “par collection”.  User will access this secondary navigation and with it, he will be able to select a room and some furniture styles he likes. After that, a filtered list of collections will be proposed to him, based on his previous choices. Each collection will be composed with some products, and each product will be identified with a tag.

B - An interactive picture to project yourself

Second idea, and logical following of the first one: implement an interactive picture to increase user’s projection. After having selected a collection in the list, the user ends up on the related presentation page.

On top of the page will be displayed the interactive image, with all products available in the collection. The image will highlight how products combine together, in context. It allows user to have an quick overview of the collection. It helps him reinforcing his choice, or else redirect him to another collection.

Below the image, user will find the current collection’s description, all the available products and a link to the next collection.

Why we think it's cool?

Create an alternative navigation can be complex and time-consuming while using natives templates of a classic CMS. Front-Commerce allows you to forget these constraints. Setting it up becomes very quick and allows you to propose an original and adapted ergonomics.

We then started to think about what the interface could look like. We were all agree to say that visuals would occupy a central part on it. It would help users to project, and reinforce immersion.

Here are some of our inspirations :

And some of the first wireframes we created, for mobile devices. Yup, it’s in French. Oopsy!

Involve your users

Before going further in the process, gather some users’ feedbacks is really important. Do they like the feature? Do they find it useful? What do they think of the wireframes? Are some critical points missing?… So much questions to answer, so much things to test..

We’ve decided to test our wireframes, and so we’ve recruted some users. We then proposed them a little test session in our office.

But this is for the next part! 🙂

  • Introduction 
  • Part 1 : Develop an idea, create value, stay inspired You’re here ?
  • Part 2 : Involve your (future) users COMING SOON
  • Part 3 : Create a tailor-made user experience
By GRENIER Johanny - Publish on May 28, 2018