Thermor

E-commerce Website

Information Architecture, Wireframing & Prototyping

Ecommerce_1.png
 

01 Context


Questioning the Project Aim

Thermor is a French brand of stylish connected heaters and heated towel rails. The brand is currently selling mostly through other professionals and retailers although its products can be purchased directly by both professionals or directly by individuals. With this project, Thermor’s goal was to improve their website to better showcase their products as well as to redirect users to other platforms of the brand if needed. Such platforms included an ecommerce website on Magento selling only accessories parts of Thermor products; a support website with an assistance service, a FAQ webpage; a forum; and a professional reseller locator website. While working on this project, our UX design team quickly recognized the need for upgrading the website to a full ecommerce solution hosting directly the support service, the store locator and the user account. The redesign of the website as intended by Thermor initially was not meant to sell products due to technical difficulties to link different CMS together. But recognising this unique opportunity - to offer an online selling solution and boost the B2C relationship - this idea was approved and we redefined the project scope to meet these new objectives.

For this large project, our UX design team mobilised two designers to work as a team on the milestone parts such as the content categorisation and divided the rest of the work in smaller modules. As for me, I was responsible for the search engine, the reseller locator, the product selection guide, the documentation and the assistance service parts.

 
Ecommerce_2.png
 

02 Problem


Organising Heavy Content

One of the main problems we needed to address was how to clearly organise the information and enable an easy navigation among the very significant amount of product references in the Thermor catalogue. The end users must be able to find quickly the right information, to have a general view of the Thermor’s offer to make an online purchase without going to a physical store, and finally, to choose among the many product options available to them to order the right item.

Another major constraint was Thermor’s need to be able to edit all elements of the website as the catalogue and promotions would change at least every year.  Thermor also asked to be able to edit additional elements like the prioritisation of the results displayed in the search engine, the support page or the store locator.

 
Ecommerce_3.png
 

03 Approach


Categorizing and Prioritizing User Goals

We first categorized the products and the information in a way that would reflect the user logic and defined what kind of action the end users would need to perform on this interface. This technique helped to connect each type of content to another. These categories were carefully defined and sorted through a co-conception workshops with the clients. Secondly, we imagined a journey that would ease the purchase decision by allowing Thermor’s customers to compare items by their product options. Among other things, we needed to display both retailers and professionals on a store locator map and set a powerful search engine to go through the website content and Thermor’s large documentation. The basket purchase and the user account were handled in a separate project for technical and project management reasons.

 
Ecommerce_4.png
 

04 Design Solution


Guiding User Through the Content 

For each part of the website, all design solutions have been conceived to be flexible for Thermor, enabling them to contribute and edit the website via their back office. The website was also responsive and designed with the mobile-first methodology in order to fit different types of devices. Through sketching and low-fidelity prototypes, we could identify the type of journeys that would work best for Thermor’s customers and guide them through the large product catalogue. We proposed several options ranging from practical proposals such as a dimension calculator to suggest products fitting well in the customers’ home; to bolder proposals such as an AR visualiser to virtually project the product in a physical place. The client decided to go for a modular dashboard allowing to compare items options and a product selection guide for less expert users.

 
Ecommerce_5.png
 
 

The products options were listed, sorted and prioritised in close collaboration between the clients and our UX design team. Options are displayed in the forms of filters and gauges as on the following wireframes of product pages. At that stage, interesting questions arose about the rules applying to those filters; e.g. whether the filters should exclude each other or whether an attribute should allow the display of all products containing this option.

 
Ecommerce_6.png
 
 

The design of the search engine was also a complex part of this project. due to the many technical possibilities from the large offer in search engine solutions. Within the large range of options available, the client selected the Swiftype solution. In close collaboration with the PHP development team, we first analysed the advantages and constraints resulting from this choice. The content of the website was mapped out to sort the list of results in a consistent way. We needed to help Thermor’s customers to identify the type of content (web page, pdf document, video etc.), the category where the result comes from (product information, assistance, blog, store locator etc.) and a representative summary of the information contained in each result. By tailoring the Swiftype solution with these custom changes, we made sure to answer Thermor’s specific needs.

 
Ecommerce_7.png
 
 

Finally, the support webpage was also challenging to design to fit the needs of Thermor’s customers. Rather than dividing the FAQ and forum by product category as the support website was previously designed, we chose to organise the support contentaround categories  of users’ typical concerns such as online purchase, user account, Thermor’s products and connected objects, as it is displayed below. With this approach, the intention was to more quickly redirect users to the relevant support section. The documentation was also made easily accessible from the support webpage for users looking for a product’s instructions.

 
Ecommerce_8.png
 

05 Prototyping


Sharing, Discussing and Iterating

We prototyped the website in InVision which helped us throughout the project to communicate not only with Thermor but also with others involved in the project such as visual designers, back-end and front-end developers, consultants and IT project managers. 

 All updates were quickly shared and the first microinteractions were set soon enough to allow developers to build the structure of the website and the new CMS. It also helped us to discuss within our UX design team, especially on mobile, each component behaviours and iterate them quickly when needed.

 
 

06 Personal Contribution


Roles and Team Organisation

I joined this project in its early beginnings when the scope of the website was being rediscussed. At first, my role in this project was in relation to the search engine webpage where I had to quickly grasp the very large content to be able to organise clearly theoptions of each item and to ensure consistency in the hierarchy of information on each product page. In a second step, I designed the product selection guide, the support webpage, the search engine, the documentation and the responsive behaviour to different devices by working closely with the visual designers, the IT project manager, the front-end and the back-end developers involved in this project.

 
Ecommerce_10.png
 

07 What’s Next


Going Further

This project was a cornerstone for a larger redesign process of the Thermor website. For the time being, the next step planned is to create a full user account grouping every website of the brand into a unique account. We helped Thermor clarify the scope of this task by identifying the user, administrator and marketing teams’ needs as well as  writing user stories for each profile.

The rest of the project has been discused with the client but time and budget constraints at the client’s end imposed this work to be carried out step-by-step, with the next steps being planned for 2019. The remaining work will involve adding extensions and/or new features on the website , and improving some aspects that would demand further development and more advanced technical solutions. One of those upgrades will be to fully integrate an ecommerce solution within the website which may require to migrate the website to another CMS. With better information about Thermor’s products stock, for instance, we could integrate the option of providing information about the stock available at each selling point within the store locator and, consequently, of embedding this information also directly on the product page. This could be combined with additional information about professionals available to install the product in the user’s area. By working with the Thermor R&D team, we could also develop a larger image library to dynamically display how the product changes depending on the attributes selected in the filters panel (e.g. colour, size).

 
Ecommerce_11.png